[英]Multiple object in a clipping section in fabric Js canvas
我在画布上添加了一个剪切部分。 我为此添加了多个对象。 问题是,一旦我添加了第二个对象,第一个对象就变得不可见。
在此解释
var pug = new fabric.Text("Hi ", {
angle: 0,
width: 500,
height: 500,
left: 245,
top: 35,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.rect(
100, 100,
200, 200
);
clipRect1.render(ctx);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.restore();
}
});
canvas.add(pug);
var pug1 = new fabric.Text("Hello", {
angle: 0,
width: 500,
height: 500,
left: 300,
top: 35,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.rect(
100, 100,
200, 200
);
clipRect1.render(ctx);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.restore();
}
});
canvas.add(pug1);
将剪贴区域背景更改为透明(第17行)。 当FabricJS渲染第二个对象时,它与第一个对象重叠。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.