FabricJS: невозможно клонировать объекты или изображения, так как они не определены

Question

FabricJS: невозможно клонировать объекты или изображения, так как они не определены

1

Я новичок в FabricJS и немного поиграл с ним. Я пытаюсь построить на редактор изображений с открытым исходным кодом. В настоящее время этот код позволяет клонировать объекты, такие как фигуры, но я не могу клонировать группы объектов за раз, а также не могу клонировать изображения или группы изображений. Ошибка, которую я получаю от клонирования группы объектов или любых изображений:

Uncaught TypeError: Невозможно прочитать свойство 'length' undefined

Или ошибка для клонирования изображений в этом случае будет: Uncaught TypeError: Невозможно прочитать свойство "set" неопределенного

Вот мой код для клонирования объектов:

function clone() {
var object = null;
   if (canvas.getActiveGroup()) {
     var objects = canvas.getActiveGroup().objects;

     canvas.deactivateAll();

     var cloned = [];
     for (var i = 0; i < objects.length; i++) {
        object = objects[i].clone();

        object.set("top", object.top + 20);
        object.set("left", object.left + 20);
        canvas.add(object);
        cloned.push(object);
     }

     selectAll(cloned);
   } else if (canvas.getActiveObject()) {
     object = canvas.getActiveObject().clone();
     object.set("top", object.top + 20);
     object.set("left", object.left + 20);
     canvas.add(object);

     canvas.deactivateAll();
     canvas.setActiveObject(object);
    }

    canvas.renderAll();

    canvas.trigger("object:statechange");
}

И вот код, который я использую для импорта изображений:

document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
  reader.onload = function (event){
  var imgObj = new Image();
  imgObj.src = event.target.result;
  imgObj.onload = function () {
    var image = new fabric.Image(imgObj);
    image.set({
          angle: 0,
          padding: 10,
          cornersize:10,
          height:110,
          width:110,
    });
    canvas.centerObject(image);
    canvas.add(image);
    canvas.renderAll();
  };
};
  reader.readAsDataURL(e.target.files[0]);
};

Спасибо за вашу помощь

BrownJayTwo 08 сен. 2017, в 13:28

Источник

Теги:

javascript

fabricjs

1 ответ

Ещё вопросы

AndreaBogazzi · Accepted Answer · 2017-09-10T06-02-00.000Z

Пожалуйста, прочитайте здесь:

http://fabricjs.com/docs/fabric.Object.html

Clone - это асинхронная функция. Он ничего не возвращает.

function clone() {
var object = canvas.getActiveGroup();
   if (object) {
     object.clone(function(clone) {
       clone.set("top", object.top + 20);
       clone.set("left", object.left + 20);
       canvas.deactivateAll();
       clone.getObjects().forEach(function(obj){
         canvas.add(obj);
       });
       clone.canvas = canvas;
       canvas.setActiveGroup(clone);
     });    
   }
var object = canvas.getActiveObject();
 if (object) {
       object = object.clone(function(cloned){
         cloned.set("top", object.top + 20);
         cloned.set("left", object.left + 20);
         canvas.add(cloned);
         canvas.deactivateAll();
         canvas.setActiveObject(object);
       });
     }
     canvas.renderAll();
     canvas.trigger("object:statechange");
    }