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

Question

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

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

Answer 1

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

关于如何通知用户 'close' 形状，这里没有对错之分 - UI 你设计什么都行。您可能希望让用户在起点附近单击以指示关闭。如果你学习这门课程，你需要对鼠标点击点做一些测试，判断它是否'near enough'到起点，表明用户想要关闭图形。

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

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

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

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

react-konva Free hand area selection using mouse click (straight lines)

canvas

konvajs

react-konva

konva

konvajs-reactjs