Javascript Paper.js套索选择工具

有没有人像你在Adobe Illustrator中那样为paperjs创建了一个free hand或lasso select工具

我试图使用

相交（项）

，但这似乎只有在我的选择路径直接命中任何其他路径时才起作用，而如果选择中有项，则不起作用，即使我之前在

onMouseUp

中将其关闭

isInside（rect）

看起来很有希望，但它只能检查某个东西是否在矩形内，而不是自由手路径

以下是一些例子：

var item1 = Path.Circle(new Point(180, 100), 20);
item1.fillColor = "black";

var item2 = Path.Rectangle(new Point(150, 180), new Size(50, 50));
item2.fillColor = "black";

var selection = new Path([
    new Point(50, 50),
    new Point(50, 250),
    new Point(250, 250),
    new Point(250, 150),
    new Point(150, 150)
]);
selection.closed = true;

selection.strokeColor = "blue";
selection.fillColor = new Color(0, 0, 50, 0.5);

function selectionContains(item) {
    // does not work as expected
    return selection.intersects(item);
}

// should be false
console.log(selectionContains(item1));

// should be true but is false
console.log(selectionContains(item2));

您可以使用它与多边形相交

和

---

该函数可能会对您有所帮助。

布尔运算对我很有用。它们不是几何测试，创建了必须删除的额外项目，但这似乎是我能得到的最佳解决方案。

isEmpty（）

测试结果形状是否包含减法后的任何线段

var red = Path.Circle(new Point(180, 100), 20);
red.fillColor = "red";
red.name = "red";

var green = Path.Rectangle(new Point(150, 180), new Size(50, 50));
green.fillColor = "green";
green.name = "green";

var yellow = Path.Circle(new Point(90, 100), 20);
yellow.fillColor = "yellow";
yellow.name = "yellow";

var purple = Path.Rectangle(new Point(160, 190), new Size(30, 30));
purple.fillColor = "purple";
purple.name = "purple";

var selection = new Path([
    new Point(50, 50),
    new Point(50, 250),
    new Point(250, 250),
    new Point(250, 150),
    new Point(150, 150)
]);
selection.closed = true;
selection.strokeColor = "blue";
selection.fillColor = new Color(0, 0, 50, 0.2);


function isInside(_selection, _item) {

    var result = _item.subtract(_selection);
    var insideSelection = result.isEmpty();
    result.remove();

    return insideSelection;
}

function test(_item) {
    console.log(_item.name, isInside(selection, _item) ? " inside" : " outside");
}

test(red); // red  outside
test(green); // green  inside
test(yellow); // yellow  outside
test(purple); // purple  inside

---

无法直接在那里找到“路径在路径内”几何测试。看起来这个库附带了paper.js主要包含的150kb功能。在我的网页工作流程中获取它也不容易，因为它没有package.json。你有没有一个我可以从那里学到的函数或算法的想法？我正在寻找一个“多边形多边形”函数我知道，你可以用[paper.Path.GetIntersection（）]检查多边形交点；然后使用Clipper.PointInPolygon（）检查选择多边形内是否有路径点。在使用Clipper.PointInPolygon（）之前，您应该检查边界框交点。您正在寻找减布尔运算。关于BoolOps，最近做了大量的工作，包括在Paper.js中——但为了澄清问题，你想套住什么？光栅还是矢量？它们的工作原理不同。它们都是傻瓜做的，见下面的答案。我不是百分之百满意，因为他们在Paper.js中创建并绘制了额外的几何图形。出于性能原因，我可能需要在之前添加一个边框预检查。仅矢量。无法想象这样的事情对光栅图形是如何起作用的。如果光栅图像是矩形的（通常情况下），您可以使用BoolOps（矢量矩形的一部分，等于光栅图像的宽度/高度）切掉（减去），然后将光栅图像设为减去形状的遮罩/背景图像。