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套索選擇工具

回答

相關問題