我如何画一条线来连接颤振中的点

Question

我一直在尝试使用画家在点之间画线，但我有两个问题需要解决。

1. 我需要知道哪些点相互连接
2. 我需要线在靠近点时卡入点中

你可以参考下面的设计

Draggable 插件可以解决这个问题吗？

Answer 1

我能够找到第一点的解决方案：

我需要知道哪些点相互连接

我创建了4把钥匙

GlobalKey _keyTopLeft = GlobalKey();
GlobalKey _keyBottomLeft = GlobalKey();
GlobalKey _keyTopRight = GlobalKey();
GlobalKey _keyBottomRight = GlobalKey();

然后我将每个键添加到我想要跟踪的小部件中：

_letterWidget(
    key: _keyTopLeft,
)
_letterWidget(
    key: _keyBottomLeft,
)
_letterWidget(
    key: _keyTopRight,
)
_letterWidget(
    key: _keyBottomRight,
)

我创建了一个列表来跟踪手指触摸过的点：

List<bool> ongoingSequence = List.filled(4, false);

然后我在 GetureDetector 小部件上执行了逻辑

GestureDetector(
      onPanDown: (DragDownDetails details) {
        ongoingSequence = List.filled(4, false);
        getDragDownPosition(details);
      },
      onPanUpdate: (DragUpdateDetails details) {
        getDragUpdatePosition(details);
        var result = BoxHitTestResult();
        RenderBox renderBoxTopLeft =
            _keyTopLeft.currentContext.findRenderObject();
        RenderBox renderBoxBottomLeft =
            _keyBottomLeft.currentContext.findRenderObject();
        RenderBox renderBoxTopRight =
            _keyTopRight.currentContext.findRenderObject();
        RenderBox renderBoxBottomRight =
            _keyBottomRight.currentContext.findRenderObject();
        if (renderBoxTopLeft.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[0] = true;
        } else if (renderBoxBottomLeft.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[1] = true;
        } else if (renderBoxTopRight.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[2] = true;
        } else if (renderBoxBottomRight.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[3] = true;
        }
      },

然后我们可以打印正在进行的序列列表以获取结果：

print("top-left ${ongoingSequence[0]}");
print("bottom-left ${ongoingSequence[1]}");
print("top-right ${ongoingSequence[2]}");
print("bottom-right ${ongoingSequence[3]}");