如何用kineticjs製作橡皮

Question

我正在搞kineticjs，我試圖構建一個鼠標工具，可以讓你在單一層上擦除東西。我知道如果我的背景是白色以給出「橡皮擦」效果，我可以製作白色線條，但是我的問題是我的背景是圖像（它們不會擦除背景圖像），因此畫白線不會擦除它。我需要能夠通過鼠標座標實際擦除部分線條。是否有任何人做過這樣或知道如何

Answer 1

「是否有任何人做過這種」

恐怕心不是。您繪製的線是一個對象。它很容易作爲一個整體刪除它。

如果你不想使用像橡皮擦一樣的東西，那就很難將線劃分爲幾部分，它們保留在drawin中，而那部分沒有。

如何，如果你的線是一組像素，會更容易，但一組像素不是一條線。

Answer 2

是的，你既可以畫手繪線條，也可以在KineticJS中使用手繪橡皮擦。

但是，該解決方案適度複雜。

先決條件：

我是你搞亂期間假設你身邊已經學會如何傾聽鼠標事件並保存這些mouseXY的，以讓用戶「一拖拉」的折線。

解決方案是：

的解決方案涉及使用自定義Kinetic.Shape它給你比預先定義的動力學對象的更多的靈活性。

Kinetic.Shape爲您提供了一個完整的畫布上下文。

您可以使用context.moveTo和多個context.lineTo來讓用戶拖動手繪線條。

對於完整的上下文，還可以使用合成。

具體而言，您可以使用「目標輸出」合成，這會導致繪製的任何新線條充當橡皮擦。

對於「目標輸出」...任何先前繪製的線條被新線條「刪除」。

您的解決方案的概要：

• 有通過捕獲所有的各個點，因爲它們拖動用戶拖放在畫布上繪製折線。
• 捕獲拖動該線時用戶是處於「繪製」還是「擦除」模式。
• 使用自定義的Kinetic.Shape繪製線條或使用合成來擦除線條。
• 在「繪製」模式下，設置context.globalCompositeOperation =「source-over」並繪製該線。
• 在「擦除」模式下，設置上下文。globalCompositeOperation =「目標出」拖動橡皮擦。

一個複雜因素是上下文Kinetic.Shape給你的是一個真正的畫布上下文的包裝。

它將您限制到一個context.beginPath，並且每個context.beginPath只能使用1個組合模式。由於您需要具有多種合成模式（繪圖與橡皮擦），因此您需要知道如何獲得真實的上下文畫布，而不是使用Kinetic.Shapes包裝的上下文。

方法如下：我

var sketchpad = new Kinetic.Shape({ 

    drawFunc: function(context) { 

     // get a true canvas context, not a "wrapped" context 
     context=this.getContext()._context; 

     // save the context state 
     context.save(); 

     // then you can use multiple beginPath's 
     // and therefore have multiple composites. 

     context.beginPath(); 
     context.globalCompositeOperation="source-over"; 
     // draw a polyline using your saved line-points 
     context.stroke(); 

     context.beginPath(); 
     context.globalCompositeOperation="destination-out"; 
     // draw a polyline which acts like an eraser 
     context.stroke(); 


     // restore the context state 
     context.restore(); 

    }, 
    stroke: 'black', 
    strokeWidth: 4 
}); 

Answer 3

知道它的真正較晚，但，當我搜索過的橡皮擦我第一次發現這個鏈接，我沒有找到一個好的解決辦法，所以我已經創建了一個新的她是： How to make an eraser with kineticjs 5.1.0 acting on multi-layer?