在织品Js帆布的一个裁减部分的多个对象 [英] Multiple object in a clipping section in fabric Js canvas

问题描述

我在我的画布中添加了一个剪辑部分。
和我在此添加多个对象。
问题是一旦我添加第二个对象，第一个对象就不可见。

I have added a clipping section in my canvas. and I am adding multiple object on this. The problem is as soon as i add the second object, the first object get invisible.

在

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/

推荐答案

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

Change clipping area background to transparent (line 17). When FabricJS renders second object it overlaps first one.

这篇关于在织品Js帆布的一个裁减部分的多个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！