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

PaperJS：穿越前一个路径时停止绘制路径

1 个答案: