FabricJS ClipTo为组等多个对象发出问题 [英] FabricJS ClipTo Issue for multiple objects like group
问题描述
我的代码是
我从红色虚线框中获取值并应用于生成多个蒙版的剪辑
I am taking values from the red dotted box and apply to clip where multiple mask are generating
我的问题是它取得所有属性但不是所有属性的轮换
My issue is its taking all properties but not rotation for all
canvas.clipTo = function (ctx) {
ctx.beginPath();
for (var i = 0; i < totalPrintArea; i++) {
ctx.save();
ctx.fillStyle = 'rgba(51,51,51,0)';
ctx.rect(clipLft[i], clipTp[i], clipW[i], clipH[i], 'rgba(51,51,51,1)', clipRtn[i]);
ctx.stroke();
ctx.restore();
}
ctx.closePath();
ctx.clip();
canvas.calcOffset();
};
canvas.renderAll();
我想旋转所有矩形
我只是得到一些代码来改变剪辑的旋转,如ctx.rotate(50);但是不会起作用,因为我想用他们自己的值进行全部旋转
I just get some code to change the rotation for the clip like ctx.rotate(50); but will not work as i want to make all rotate with their own values
请指导我同样的
推荐答案
在原始的fabricJS github项目中,我看到了评论: https://github.com/kangax/fabric.js/issues/932#issuecomment-27223912
On the original fabricJS github project I saw the comment: https://github.com/kangax/fabric.js/issues/932#issuecomment-27223912
并决定我需要防止一直制作ctx.beginPath:
and decided that I need to prevent making ctx.beginPath all the time:
canvas.clipTo = function(ctx) {
var skip = false;
// Workaround to make possible
// making clipTo with
// fabric.Group
var oldBeginPath = ctx.beginPath;
ctx.beginPath = function() {
if (!skip) {
oldBeginPath.apply(this, arguments);
skip = true;
setTimeout(function() {
skip = false;
}, 0);
}
}
group.render(ctx)
};
您可以看到我所描述问题的解决方法:
https://jsfiddle.net/freelast/6o0o07p7/
You can see my workaround to the problem described: https://jsfiddle.net/freelast/6o0o07p7/
解决方法并不完美,但希望它会对某人有所帮助。
The workaround is not perfect, but hope it will help somebody.
这篇关于FabricJS ClipTo为组等多个对象发出问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!