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 事件？ And/or有没有更好的方法来完成我想做的事情？

Answer 1

更好的方法是使用Path.getIntersections

绘制时使用它来获取与绘制路径的交点。如果是return东西，交点就停下来画

另见 Path.getCrossings

PaperJS：穿过前一条路径时停止绘制路径

PaperJS: stop drawing path when crossing a previous path

javascript

drawing

path

paperjs