canvas - react-konva 使用鼠标单击自由手区域选择（直线）

Question

我想使用react-konva在画布上实现自由区域选择。有人有解决方案或建议吗？
请参阅屏幕截图以更好地理解。
谢谢你 ！！！

我试过这个，https://codesandbox.io/s/dry-flower-b5eof-b5eof

Answer 1

从概念上讲，您正在收集多边形的点。您必须决定您的 UI 应如何通知用户如何“关闭”形状。用户关闭形状后，删除线条并使用多边形角的 x + y 值作为点数组绘制 Konva.Polygon。您可以通过其正常的 fill() 属性为多边形填充颜色。

关于如何通知用户“关闭”形状，这里没有对错——无论你设计什么 UI。您可能希望让用户在起点附近单击以指示关闭。如果您参加本课程，您需要对鼠标单击点进行一些测试，并确定它是否“足够接近”起点以指示用户想要关闭图形。

这里有一些代码可以帮助你。它正在测试鼠标点击是否在一个圆形（不是圆形，仅用数学术语）放置在具有特定半径的特定点（您的开始绘图点）（用户需要多准确？）。

// Javascript program to check if a point
// lies inside a circle or not 
// from https://www.geeksforgeeks.org/find-if-a-point-lies-inside-or-on-circle/
function isInside(circle_x, circle_y, rad, x, y)
{
     
    // Compare radius of circle with
    // distance of its center from
    // given point
     
    if ((x - circle_x) * (x - circle_x) +
        (y - circle_y) * (y - circle_y) <= rad * rad)
        return true;
    else
        return false;
}

所以 - 现在您可以知道用户何时想要关闭形状，然后您将拥有多边形的点数组。您将擦除线条形状，然后添加多边形。