当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《在fabric.js画布上添加遮罩层》经验,为你挑选了1个好方法。

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

使用HTML 5 Canvas创建图像蒙版

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



1> kangax..:

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

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

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

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有