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

目前，我可以使用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);

---

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

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

这里有一个简单的应用程序，展示了如何使用一个矩形。应该可以直接扩展它来处理多个

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;
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“可拖动的自定义画家”，
家：脚手架(
主体：CustomPainterDragable（），
),
);
}
}
类CustomPainterDragable扩展StatefulWidget{
@凌驾
_CustomPainterDraggableState createState（）=>\u CustomPainterDraggableState（）；
}
类_CustomPainterDraggableState扩展状态{
var xPos=0.0；
var-yPos=0.0；
最终宽度=100.0；
最终高度=100.0；
bool\u拖动=false；
///点（x，y）在矩形内吗？
布尔（双x，双y）=>
x>=xPos&&x=yPos&&y\u拖动=\u(
details.globalPosition.dx，
details.globalPosition.dy，
),
onPanEnd:（详细信息）{
_拖动=假；
},
onPanUpdate:（详细信息）{
如果（_拖动）{
设置状态（）{
xPos+=details.delta.dx；
yPos+=details.delta.dy；
});
}
},
子：容器(
颜色：颜色，白色，
孩子：定制油漆(
画师：矩形画师，
子级：容器（），
),
),
);
}
}
类RectanglePainter扩展了CustomPainter{
矩形画师（this.rect）；
最终Rect Rect；
@凌驾
空心油漆（帆布，尺寸）{
drawRect（rect，Paint（））；
}
@凌驾
bool shouldRepaint（CustomPainter oldDelegate）=>true；
}

我开发了一个名为 用于向画布上绘制的每个单独形状添加手势回调。您可以绘制形状并添加

onPanUpdate

或

onTapDown

回调来拖动形状

下面是你可以做什么来检测你的圆圈上的触摸和拖动

下面是一个直接取自pub dev站点的小示例：

使用CanvasTouchDetector包装CustomPaint小部件。它使用一个builder函数作为参数，该参数需要CustomPaint小部件，如下所示

import'package:touchable/touchable.dart'；
CanvasTouchDetector(
生成器：（上下文）=>
定制油漆(
画家：我的画家（背景）
)
)

在CustomPainter类的paint方法中，创建并使用TouchyCanvas对象（使用从CanvasTouchDetector和canvas获得的上下文）来绘制形状，您可以在此处执行诸如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
});

---

见答案：Thx！将进行评估。