javascript - PaperJS:穿过前一条路径时停止绘制路径

Question

我正在使用 paperjs，当用户绘制一条线时，我希望它在穿过之前绘制的线时停止。这是我当前的测试代码:

tool.minDistance = 1;

var path;
var drawing = false;

function onMouseDown(event) {
    if (!drawing) {
        startLine(event);
        drawing = true;
    }
}

function onMouseDrag(event) {
    if (drawing) {
        path.add(event.point);
    }
}

function onMouseUp(event) {
    if (drawing) {
        endLine(event);
    }
}

function startLine(event) {
    path = new Path();
    path.strokeColor = 'black';
    path.strokeWidth = 10;
    path.strokeCap = 'round';
    path.add(event.point);
}

function endLine(event) {
    path.add(event.point);
    path.smooth();
    path.simplify();
    path.onMouseDrag = function(event) {
        if (drawing) {
            console.log('ending line')
            endLine(event);
        }
    }
    drawing = false;
}

我添加了一个 onMouseDrag 事件来检测用户何时穿过现有路径。这在大多数情况下都有效，但有时不会触发，特别是在缓慢绘制时。

我的问题是为什么在这种情况下没有触发 onMouseDrag 事件？和/或有更好的方法来完成我想做的事情吗？

Answer 1

更好的方法是使用Path.getIntersections

当您绘制时，使用它来获取与绘制路径的交点。如果返回某些内容，则在交点处停止绘制。

另请参阅Path.getCrossings