Paper.js套索选择工具

有没有人内置了免费的手或套索选择工具，paperjs就像你在Adobe Illustartor有哪些？Paper.js套索选择工具

我试图使用，但是这似乎只有在我的选择路径直接碰到任何其他路径，而不是如果选择内有项目时才起作用，即使我之前在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));

来源

2016-11-20 Andreas Neumann

您正在寻找的减布尔运算。最近在BoolOps上做了大量的工作，包括在Paper.js中 - 但只是为了清理一下，你想要套上什么？栅格或矢量？他们的工作方式不同 –

BoolOps做到了，请参阅下面的答案。我没有百分百满意，因为他们在Paper.js中创建并绘制了额外的几何图形。出于性能原因，我可能必须在之前添加边界矩形预先检查。仅限矢量。无法想象这样的东西会对光栅图形起作用。 –

如果栅格图像是矩形的（通常情况下），可以使用BoolOps（相等于光栅图像的宽度/高度的矢量矩形的一部分）切掉（减去） - 然后将栅格图像设置为减去形状的蒙版/背景图像。 –

你可以使用jsclipper相交多边形。

This is the original Clipper library和its documentation。

的PointInPolygon()功能可以帮助你。

来源

2016-11-20 17:42:23

直接找不到“路径在路径内”的几何测试。看起来像这个lib提供了150kb的paper.js主要包含的功能。因为它没有package.json，所以在我的webpack工作流程中采用它并不容易。你有没有我能从那里获取的功能或算法的想法？ –

我编辑我的回答，希望帮助 –

我正在寻找一个“PolygonInPolygon”功能 –

布尔操作为我工作。他们不是几何测试，并创建必须删除的额外项目，但它看起来像我能得到的最佳解决方案。 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

来源

2016-11-22 14:28:56

Paper.js套索选择工具

回答

相关问题