如何在颤动中绘制自定义形状并拖动该形状？

Question

目前我可以使用 CustomPainter 绘制矩形。在我的 CustomPainter 的paint方法中的代码下面。

for (var rectPoints in rectangles) {
  paint.color = rectPoints.color;
  paint.strokeWidth = rectPoints.strokeWidth;
  if (rectPoints.selected != null && rectPoints.selected == true) {
    paint.color = Colors.black45;
  }
  var rect = Rect.fromLTWH(
      rectPoints.startPoint.dx,
      rectPoints.startPoint.dy,
      rectPoints.endPoint.dx - rectPoints.startPoint.dx,
      rectPoints.endPoint.dy - rectPoints.startPoint.dy);
  canvas.drawRect(rect, paint);
}

var rect = Rect.fromLTWH(startPoint.dx, startPoint.dy,
    endPoint.dx - startPoint.dx, endPoint.dy - startPoint.dy);
canvas.drawRect(rect, paint);

矩形是一个自定义对象，具有 startPoint、endPoint 和绘制该特定矩形所需的一些其他属性。现在我想选择一个矩形并重新定位它。任何帮助，将不胜感激。谢谢

Answer 1

您需要独立于画布绘图跟踪矩形位置的状态。最简单的方法是使用 StatefulWidget。您还需要使用 GestureDetector 来捕获平移事件。然后，您可以将手势细节连接到矩形的位置，并调用画家重新绘制所有内容。

这是一个简单的应用程序，展示了如何使用一个矩形来完成。将其扩展以处理多个应该很简单。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draggable Custom Painter',
      home: Scaffold(
        body: CustomPainterDraggable(),
      ),
    );
  }
}

class CustomPainterDraggable extends StatefulWidget {
  @override
  _CustomPainterDraggableState createState() => _CustomPainterDraggableState();
}

class _CustomPainterDraggableState extends State<CustomPainterDraggable> {
  var xPos = 0.0;
  var yPos = 0.0;
  final width = 100.0;
  final height = 100.0;
  bool _dragging = false;

  /// Is the point (x, y) inside the rect?
  bool _insideRect(double x, double y) =>
      x >= xPos && x <= xPos + width && y >= yPos && y <= yPos + height;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) => _dragging = _insideRect(
        details.globalPosition.dx,
        details.globalPosition.dy,
      ),
      onPanEnd: (details) {
        _dragging = false;
      },
      onPanUpdate: (details) {
        if (_dragging) {
          setState(() {
            xPos += details.delta.dx;
            yPos += details.delta.dy;
          });
        }
      },
      child: Container(
        color: Colors.white,
        child: CustomPaint(
          painter: RectanglePainter(Rect.fromLTWH(xPos, yPos, width, height)),
          child: Container(),
        ),
      ),
    );
  }
}

class RectanglePainter extends CustomPainter {
  RectanglePainter(this.rect);
  final Rect rect;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(rect, Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 2

我开发了一个名为 touchable 的库，目的是为您在画布上绘制的每个单独形状添加手势回调。您可以绘制形状并添加onPanUpdate或onTapDown回调以拖动形状。

您可以执行以下操作来检测圆圈上的触摸和拖动。

这是直接取自 pub 开发站点的一个小示例：

使用 CanvasTouchDetector 包装您的 CustomPaint 小部件。它采用构建器函数作为参数，需要您的 CustomPaint 小部件，如下所示。

import 'package:touchable/touchable.dart';


CanvasTouchDetector(
    builder: (context) => 
        CustomPaint(
            painter: MyPainter(context)
        )
)

在 CustomPainter 类的 Paint 方法中，创建并使用 TouchyCanvas 对象（使用从 CanvasTouchDetector 和画布获取的上下文）来绘制形状，并且您可以在此处提供手势回调，例如 onPanUpdate 、 onTapDown 来检测拖动事件。

var myCanvas = TouchyCanvas(context,canvas);
myCanvas.drawRect( rect , Paint() , onPanUpdate: (detail){
    //This callback runs when you drag this rectangle. Details of the location can be got from the detail object.
    //Do stuff here. Probably change your state and animate
});