织物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 呈现第二个对象时，它会与第一个对象重叠。