Группа объектов холста FabricJS скрывается при добавлении ее клона на другой холст - PullRequest
Новая
       20

Группа объектов холста FabricJS скрывается при добавлении ее клона на другой холст

0 голосов
/ 03 ноября 2018

Я пытаюсь экспортировать группу объектов из холста в SVG. Для этого я клонирую группу на другом холсте (который будет иметь такую ​​же высоту / ширину группы). Это работает очень хорошо. Но проблема в том, что группа становится скрытой в оригинальном холсте, я не знаю почему.

вот код: 

    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», а затем снова щелкните на холсте, группа исчезнет. И я не знаю почему.

Пожалуйста, как это исправить?

1 Ответ

0 голосов
/ 05 ноября 2018

Для копирования объекта используйте 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>
...