javascript - 将 FabricJS Canvas 对象组的克隆添加到另一个 Canvas 时被隐藏

Question

我尝试将一组对象从 Canvas 导出到 svg。为此，我将组克隆到另一个 Canvas 中(该 Canvas 将具有与组相同的高度/宽度)。效果非常好。但问题是该组隐藏在原始 Canvas 中，我不知道为什么。

这是代码:

    this.__canvas = new fabric.Canvas('meCanvas', {
        preserveObjectStacking: true,
        height: 300,
        width: 200,
        backgroundColor: '#1F1F1F',
        canvasKey:'azpoazpoaz'
    });
    let newID = (new Date()).getTime().toString().substr(5);
    let rect = new fabric.Rect({
        fill: 'red',
        width: 48,
        height: 32,
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal',
        myid: newID
    });

    let newID1 = (new Date()).getTime().toString().substr(5);
    let text = new fabric.IText('Text', {
        fontFamily: 'Times',
        fontSize: 18,
        fill: 'white',
        left: 100,
        top: 100,
        originX: 'center',
        originY: 'center',
        fontWeight: 'normal',
        myid: newID1,
        objecttype: 'text'
    });

    this.__canvas.add(rect);
    this.__canvas.add(text);
    this.__canvas.renderAll();

    $('#generate').click((e)=>{

        let obj = this.__canvas.getActiveObject();
        if(!obj) return;

        let obj1 = $.extend(true, {}, obj);
        this.tempCanvas = new fabric.Canvas('tempCanvas', {
            canvasKey:'efsdfsd',
            preserveObjectStacking: true,
            height: obj1.getScaledHeight(),
            width: obj1.getScaledWidth()
        });
        obj1.left= 0;
        obj1.top=0;
        this.tempCanvas.add(obj1);
        let mySVG = this.tempCanvas.toSVG();
        //console.log(this.tempCanvas.toSVG());
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <div style='display: inline-block'>
        <div>
            <canvas id='meCanvas' ref='meFabric'/>
        </div>
        <div>
            <button id='generate'>Generate the SVG</button>
        </div>
        <div style='display: inline-block'>
            <div id="rect"></div>
            <div id="recttext"></div>
        </div>
    </div>

如果您同时选择文本和红色矩形，然后单击“生成 SVG”按钮，然后再次单击 Canvas ，该组将消失。我也不知道为什么。

请问如何解决？

Answer 1

要复制对象，请使用 obj.clone()而不是 $.extend

示例

this.__canvas = new fabric.Canvas('meCanvas', {
  preserveObjectStacking: true,
  height: 300,
  width: 200,
  backgroundColor: '#1F1F1F',
  canvasKey: 'azpoazpoaz'
});
let newID = (new Date()).getTime().toString().substr(5);
let rect = new fabric.Rect({
  fill: 'red',
  width: 48,
  height: 32,
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal',
  myid: newID
});

let newID1 = (new Date()).getTime().toString().substr(5);
let text = new fabric.IText('Text', {
  fontFamily: 'Times',
  fontSize: 18,
  fill: 'white',
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center',
  fontWeight: 'normal',
  myid: newID1,
  objecttype: 'text'
});

this.__canvas.add(rect);
this.__canvas.add(text);
this.__canvas.renderAll();

$('#generate').click((e) => {

  let obj = this.__canvas.getActiveObject();
  if (!obj) return;
  obj.clone(function(clonedObj) {
    let obj1 = clonedObj;
    this.tempCanvas = new fabric.Canvas('tempCanvas', {
      canvasKey: 'efsdfsd',
      preserveObjectStacking: true,
      height: obj.getScaledHeight(),
      width: obj.getScaledWidth()
    });
    obj1.left = 0;
    obj1.top = 0;
    this.tempCanvas.add(obj1);
    let mySVG = this.tempCanvas.toSVG();
  })


  //console.log(this.tempCanvas.toSVG());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div style='display: inline-block'>
    <div>
        <canvas id='meCanvas' ref='meFabric'/>
    </div>
    <div>
        <button id='generate'>Generate the SVG</button>
    </div>
    <div style='display: inline-block'>
        <div id="rect"></div>
        <div id="recttext"></div>
    </div>
</div>