javascript - 使用 fabric.js 的镜像克隆对象位置问题

Question

我正在尝试使用 fabric.js 在 Canvas 上制作一个克隆对象，当我制作原始对象的克隆时，它会准确地放置克隆，但是当我制作一个克隆时之前的克隆对象并没有在所有方向上准确放置它。

这里是 demo link

HTML 代码

 <canvas  id="c" height="400" width="500"></canvas>
 <button id="clone_left" name="left">Left</button>
 <button id="clone_right" name="right">right</button>
 <button id="clone_top" name="top">top</button>
 <button id="clone_bottom" name="bottom">bottom</button>

脚本

//Using i-text
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
    left: 100,
    top: 100,
    fill: 'red'
});
canvas.add(text); 
document.getElementById('clone_left').addEventListener('click', function (e) {
  var obj = canvas.getActiveObject();
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
               clone.set({left: clone.get('left') + 210});
                canvas.add(clone);
            });
        } else {
            //alert("else");
            var clone = obj.clone();
          //lone.set({left: clone.get('left') + 370});
          clone.set("angle", "180").set('flipY', true); 
          clone.set({top: clone.get('top') + 52});
          canvas.add(clone);
          canvas.renderAll();
        }
  } 
});

document.getElementById('clone_right').addEventListener('click', function (e) {
  var obj = canvas.getActiveObject();
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
               clone.set({left: clone.get('left') + 210});
               clone.set("angle", "180").set('flipY', true);
               canvas.add(clone);
               //alert("if");
            });
        } else {
          //  alert("else right");
          var clone = obj.clone();
          clone.set({left: clone.get('left') + 250});
          clone.set("angle", "180").set('flipY', true); 
          clone.set({top: clone.get('top') + 52});
          canvas.add(clone);
        } 
     } 
});
document.getElementById('clone_top').addEventListener('click', function (e) {
 var obj = canvas.getActiveObject();
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
              clone.set("angle", "180").set('flipX', true);
              clone.set({top: clone.get('top') - 135});
              canvas.add(clone);
            });
        } else {
            //alert("else top");
            var clone = obj.clone();
        //clone.set("angle", "180").set('flipX', true);     
       // clone.set({top: clone.get('top') - 50});
          clone.set({left: clone.get('left') + 120});
          clone.set("angle", "180").set('flipX', true); 
          canvas.add(clone);
        } 
  }  
});

document.getElementById('clone_bottom').addEventListener('click', function (e) {
  var obj = canvas.getActiveObject();
  if(obj.type=='i-text')
  {
        if (fabric.util.getKlass(obj.type).async) {
            obj.clone(function (clone) {
              clone.set("angle", "-180").set('flipX', true);    
              clone.set({top: clone.get('top') + 135});
              canvas.add(clone);
            });
        } else {
            var clone = obj.clone();
        // clone.set("angle", "-180").set('flipX', true);   
        //clone.set({top: clone.get('top') + 50});
        clone.set("angle", "-180").set('flipX', true);  
        clone.set({top: clone.get('top') + 100});
        clone.set({left: clone.get('left') + 120});
        canvas.add(clone);
        } 
  } 

});

当我制作简单的克隆时，它运行良好:

但是当我对克隆的对象进行克隆时，它看起来像这样并且不在准确的位置。你可以在这里看到从克隆的底部制作的克隆对象，带有蓝色边框 Angular 和蓝色箭头代表该对象的错误位置，实际上我想要下面的克隆对象，因为它是克隆对象的。

Answer 1

位置错误主要是fabric.IText对象声明造成的。

var text = new fabric.IText('Sample', {
    left: 100, // this cause translation
    top: 100, // this cause translation
    fill: 'red'
});

我使用了 fabric.util.object.clone 而不是 obj.clone 函数，并且我已经删除了魔数(Magic Number)的所有重复出现，现在可以正常工作了:

http://jsfiddle.net/InferOn/3dr72sj2/4/embedded/result/

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
    fill: 'red'
});

// the start positioning of text are set out object declaration
text.set({top: text.get('top') + 150}); 
text.set({left: text.get('left') + 200});
canvas.add(text);

document.getElementById('clone_left').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);  
        // using the text object properties instead of magic numbers it is better to achieve the right measurement 
        cl.set({left: cl.get('left') - text.width});
        canvas.add(cl);

    }
});

document.getElementById('clone_right').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);  
        cl.set({left: cl.get('left') + text.width});
        canvas.add(cl);

    }
});

document.getElementById('clone_bottom').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);
        cl.set({top: cl.get('top') + text.height});
        canvas.add(cl);

    }
});
document.getElementById('clone_top').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if (obj.type == 'i-text') {
        var cl = fabric.util.object.clone(obj);
        cl.set('flipY', true);
        cl.set({top: cl.get('top') - text.height});
        canvas.add(cl);

    }
});