android - 我将如何画一条线来连接 flutter 中的点

Question

我一直在尝试使用 painter 来绘制点之间的线，但我有两个问题需要解决。

1. 我需要知道哪些点是相互连接的
2. 我需要线在靠近点时捕捉到点

可以引用下面的设计

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

Answer 1

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

I need to know which dots are connected to each other

我创建了 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]}");