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的目的是向您在画布上绘制的每个形状添加手势回调。您可以绘制形状并添加a或z=a回调以拖动形状。

在这里您可以执行以下操作来检测圈子中的触摸和拖动。

这是直接从pub dev网站获取的一个小示例：

使用CanvasTouchDetector包裹CustomPaint小部件。它使用一个构建器函数作为参数，期望您的CustomPaint小部件如下所示。

for

在CustomPainter类的paint方法中，创建并使用TouchyCanvas对象（使用从CanvasTouchDetector和canvas获得的上下文）绘制形状，然后可以在此处提供诸如onPanUpdate，onTapDown之类的手势回调来检测拖动事件。

z=a
for i in z:
   a.append(i)

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

2 个答案: