如何解决FabricJS clippath边框颜色并将叠加图像移到clippath后面?
我正在尝试使用fabricJS在画布上添加clippath区域(矩形对象)。目前,我将“覆盖图像”设置为画布,除此之外,还添加了clippath区域来放置对象。我能够成功地将对象放置在clippath中,但是问题是我将其放置在clippath中的图像具有不透明度(意味着对象也具有透明度),我知道这是因为我将透明图像设置为叠加层,该叠加层始终位于其他对象之上。
我的查询是
- 我可以单独设置剪切路径区域来忽略覆盖吗?还是像clippath那样设置首选项和下一个叠加优先?
- 当前clippath没有边框,我不知道clippath在哪里?那么有没有办法在clippath区域设置边框?
这是我的下面的代码
HTML
<canvas id="ex8" width="300" height="400"></canvas>
JS
(function () {
var canvas = new fabric.Canvas('ex8');
canvas.controlsAboveOverlay = true;
var clipPath = new fabric.Rect({ width: 100,height: 100,fill: 'red',top: 100,left: 100 });
canvas.setOverlayImage(
'https://i.ibb.co/88QkSMC/crew-front.png',canvas.renderAll.bind(canvas),{}
);
var group = new fabric.Group([
new fabric.Rect({ width: 100,globalCompositeOperation: 'xor' }),new fabric.Rect({ width: 100,fill: 'blue',top: 100 }),fill: 'green',left: 100,]);
canvas.clipPath = clipPath;
canvas.add(group);
})();
感谢您的帮助!
解决方法
一个非常有趣的问题。
您遇到的问题与Fabric.js
中应用图层的顺序有关。
如相关github帖子所述,各层的应用方式如下(从下至上):
因此,不是clipPath
放在T恤图像上(即Overlay image
)。相反,因为T恤层被应用在clipPath上。
虽然“透明度”来自clipPath
响应。 fabric group
,它实际上来自Overlay image
本身,因为图像中的T恤是透明的(周围的白色背景不是)。
用鼠标悬停在T恤图像上时,也可以看到它的不透明性(例如,如下所示在文件资源管理器中)。
至于边框,您可以在代码中添加以下内容:
group.set({
borderColor: 'yellow',cornerColor: 'yellow',cornerSize: 6,transparentCorners: false
});
group.setActiveObject(canvas);
请注意,仅当相应的画布项目被激活时,边框才可见。有关更多信息,您可以在自定义项上选中此link
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。