fabric Js 中剪辑部分中的多个对象 canvas

Question

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

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

Answer 1

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

fabric Js 中剪辑部分中的多个对象 canvas

Multiple object in a clipping section in fabric Js canvas

javascript

canvas

fabricjs