如何使用KineticJS創建一個圓形剪輯？

Question

我想剪輯一個使用圓形路徑的組，但該組的clipFunc似乎並未執行，關於如何使用clipFunc屬性的文檔有點多餘。

Here is a jsfiddle與我目前的嘗試。

下面是相關代碼：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 500, 
    height: 500 
}); 
var layer = new Kinetic.Layer(); 
var group = new Kinetic.Group({ 
    clipFunc: function(canvas) { 
     var context = canvas.getContext(); 
     context.beginPath(); 
     context.arc(250, 250, 50, 0, 2 * Math.PI, false); 
     context.clip(); 
    } 
}); 

var rect = new Kinetic.Rect({ 
    x: 150, 
    y: 225, 
    width: 200, 
    height: 200, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 2 
}); 

group.add(rect); 
layer.add(group); 
stage.add(layer); 

目前，如果我把一個破發點中clipFunc功能它從來沒有被擊中。

Answer 1

對clipFunc的支持被刪除，以支持裁剪，這只是一個矩形裁剪區域。如果您想模擬圓形剪輯，可以使用toImage（）將該組轉換爲圖像，然後用圖像填充圖案繪製一個圓。

的clipFunc財產被丟棄，因爲在畫布剪輯功能不與非矩形的剪輯區域發揮非常好，因爲邊緣是非抗鋸齒（這是圓形路徑特別明顯）