添加遮罩層

Question

我有，我想補充的編輯fabric.js HTML5畫布的頂輪罩的一個問題。 類似的問題在這篇文章中描述：

Creating an Image Mask with HTML 5 Canvas

我的問題是，當我在fabric.js畫布上添加此層，然後我的畫布是不可編輯的這個透明的圈子裏面了。這意味着頂部元素（蒙版）捕獲點擊/拖動事件，但我想要移動此蒙版元素下的項目。尋找想法，如何解決這個問題。

Answer 1

可以利用在布口罩內置支持。

下面是用200的半徑在創建一個100/100圓形掩蔽的例子：

var canvas = new fabric.Canvas('...'); 
// ... 
canvas.clipTo = function (ctx) { 
    ctx.arc(100, 100, 200, 0, Math.PI*2, true); 
};