首页 文章

在fabric.js画布上添加遮罩层

提问于
浏览
4

我有一个问题,我想在可编辑的fabric.js HTML5画布上添加圆形蒙版 . 本文描述了类似的问题:

Creating an Image Mask with HTML 5 Canvas

我的问题是,当我在fabric.js画布上添加此图层时,我的画布在此透明圆圈内不再可编辑 . 这意味着顶部元素(蒙版)捕获单击/拖动事件,但我想移动此蒙版元素下的项目 . 寻找想法,如何解决这个问题 .

1 回答

  • 8

    您可以在布料中使用内置的面罩支持 .

    以下是以100/100创建圆形蒙版的示例,半径为200:

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

相关问题