Flutter图形变换插件box_transform的使用

插件简介

Box Transform 是一个纯 Dart 的基础包，它允许您在不依赖 Flutter 的情况下，编程式地处理盒子的缩放和拖动。它提供了高度灵活的、可编程缩放和拖动的盒子，可以在任何 Dart 项目中使用。

特性

• 📏 尺寸限制：设置最大和最小约束，以确保在调整大小时盒子保持在特定边界内。
• 🔁 翻转机制：当调整大小达到极限值时，提供高级的位置翻转。
• 🔒 拖动限制：指定限制框，以保持您的可变形盒子在特定区域内。
• 🎨 灵活的缩放模式：选择四种不同的缩放模式，以获得更灵活的缩放方式。
• 📍 可自定义的锚点：定义调整大小的角柄，以在调整大小时锚定盒子的不同部分。
• 🚀 易于集成：轻松将 Box Transform 集成到您的 Dart 或 Flutter 项目中。

快速开始

您可以访问 Getting Started 页面来开始使用 Box Transform。

示例应用

• Example App
• Playground

文档

文档地址：https://docs.page/hyper-designed/box_transform

贡献

请参阅 CONTRIBUTING.md 和 DEVELOPMENT.md 获取更多信息。

作者

Birju Vachhani	Saad Ardati

加入我们的 Discord 服务器获取更多帮助和支持：https://discord.gg/yrahEhCqTJ

使用示例

缩放一个盒子

import 'package:box_transform/box_transform.dart';

void main() {
  final Box rect = Box.fromLTWH(50, 50, 100, 100);

  final ResizeResult result = BoxTransformer.resize(
    handle: HandlePosition.bottomRight, // 正在被拖动的手柄
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
    resizeMode: ResizeMode.freeform,
    initialFlip: Flip.none,
  );

  print(result.rect); // 新的矩形
}

移动一个盒子

import 'package:box_transform/box_transform.dart';

void main() {
  final Box rect = Box.fromLTWH(50, 50, 100, 100);
  final MoveResult result = BoxTransformer.move(
    initialRect: rect,
    initialLocalPosition: Vector2.zero(),
    localPosition: Vector2.zero(),
  );

  print(result.position); // 盒子的新位置
}

完整示例 Demo

以下是一个完整的 Flutter 示例，展示了如何在 Flutter 应用中使用 box_transform 插件进行图形变换：

import 'package:flutter/material.dart';
import 'package:box_transform/box_transform.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Box Transform Example')),
        body: BoxTransformDemo(),
      ),
    );
  }
}

class BoxTransformDemo extends StatefulWidget {
  @override
  _BoxTransformDemoState createState() => _BoxTransformDemoState();
}

class _BoxTransformDemoState extends State<BoxTransformDemo> {
  Box _rect = Box.fromLTWH(50, 50, 100, 100);
  Offset _position = Offset.zero;

  void _resizeBox(HandlePosition handle, Offset dragDelta) {
    final ResizeResult result = BoxTransformer.resize(
      handle: handle,
      initialRect: _rect,
      initialLocalPosition: Offset.zero,
      localPosition: dragDelta,
      resizeMode: ResizeMode.freeform,
      initialFlip: Flip.none,
    );

    setState(() {
      _rect = result.rect;
    });
  }

  void _moveBox(Offset dragDelta) {
    final MoveResult result = BoxTransformer.move(
      initialRect: _rect,
      initialLocalPosition: Offset.zero,
      localPosition: dragDelta,
    );

    setState(() {
      _position = result.position;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        final Offset dragDelta = details.delta;
        _resizeBox(HandlePosition.bottomRight, dragDelta);
        _moveBox(dragDelta);
      },
      child: CustomPaint(
        size: Size.infinite,
        painter: BoxPainter(_rect, _position),
      ),
    );
  }
}

class BoxPainter extends CustomPainter {
  final Box box;
  final Offset position;

  BoxPainter(this.box, this.position);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0;

    final Rect rect = Rect.fromLTWH(box.left + position.dx, box.top + position.dy, box.width, box.height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

这个示例展示了如何在一个 Flutter 应用中使用 box_transform 插件进行图形的缩放和移动操作。通过手势识别器（GestureDetector），用户可以通过拖动手势来调整图形的大小和位置。

希望这些信息能帮助您更好地理解和使用 box_transform 插件！如果有任何问题，欢迎随时提问。