[英]Pre-save edit fabric.js PNG image
我目前正在为客户开发一个界面,该界面将允许客户创建PNG图片以供进一步使用:
我在fabric.js画布中有所谓的叠加层(三个白色正方形),可以根据所使用的模板进行随机放置。
如果用户选择启用一个名为“ front overlays ”的新选项,则这些正方形上的所有内容都将位于它们下面(我在这些覆盖层中创建了白色Rect,并将其放置在画布的顶部)。
之前,一旦编辑结束,我就可以使用“ FileSaver.js”库保存PNG,因为这些叠加层的内部是透明的。 现在,如果启用了“ front overlays ”,则此空间为白色。
现在,我需要在移动之前清空这些叠加层,然后再保存它。 fabric.js是否可能? 还是带有JS库?
答案比我想的要容易得多:
如果启用了我的新选项,我将覆盖我的覆盖物,并使用“ clearRect”清除它们,这是可行的,因为fabric.js使用画布...:
if(frontOverlay) {
let c = document.getElementById("canvas");
let ctx = c.getContext("2d");
for (let i = 0, len = overlaySvg.length; i < len; i++) {
let stroke = overlaySvg[i].strokeWidth;
ctx.clearRect(overlaySvg[i].left+stroke, overlaySvg[i].top+stroke, overlaySvg[i].width-stroke, overlaySvg[i].height-stroke);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.