在织物Js画布的裁剪部分中的多个对象

Question

我在画布中添加了剪辑部分。    我在这上面添加了多个对象。 问题是，只要我添加第二个对象，第一个对象就会变得不可见。

在此

中解释

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);

http://jsfiddle.net/ZxYCP/202/

Answer 1

将剪裁区域背景更改为透明（第17行）。 当FabricJS呈现第二个对象时，它与第一个对象重叠。