使用鼠標剪裁和插入不規則形狀的圖像

Question

我已經裁剪了一個不規則形狀的圖像。我需要將圖像插入裁剪的部分。我已經使用HTML5和JavaScript（kinetic.js）來執行此操作（請參閱：http://imgur.com/Lyt3j）。我已經完成了區域繪圖。我不想要像rect，poly等形狀。我需要一個用戶定義的形狀，並且應該使用鼠標進行裁剪。

任何人都可以幫助我嗎？

Answer 1

看看2d上下文的compositing settings。這些允許您使用路徑或圖像在畫布上執行遮罩。當您使用上面創建的路徑和context.globalCompositeOperation = 'destination-in'時，路徑將不會繪製，並且只有路徑內部覆蓋的圖像部分將保留。其餘的將是透明的。當您使用'source-out'操作時，您會在畫出路徑的畫布上創建一個透明的「孔」。

所以當你有一個帶有源圖像（你想插入的圖像）的畫布，一個帶有目標圖像（你想插入另一個圖像的圖像）和路徑的畫布時，做到這一點。

a）你用source-in繪製源畫布的路徑，所以你有一個正確的形狀在它的圖形。然後，將複合操作設置回source-over，然後將源畫布設置爲目標畫布上的drawImage。這會裁剪源畫布上的圖像，因此請確保在您仍然需要時預先創建副本。

b）中繪製的路徑到目標圖像與destination-out抹去由所述路徑包圍的區域中，源圖像設置的複合操作來destination-atop然後drawImage到目標圖像，則其將被插入的「後面」目的地的透明部分。這個變體對於源畫布是非破壞性的。請記住，完成後將globalCompositeOperation設置回source-over，否則其他畫布操作可能不再執行您期望的操作。

c）就像在b）中使用destination-out在目標畫布上切出一個洞，但是然後將複合操作設置爲正常設置source-over並將目標繪製到源上。您現在已經在源畫布上顯示完整的圖像。