私は長方形とテキストオブジェクトを持っています。キャンバス上にドラッグすると、「テキスト」が「矩形」を描くようになります。

Question

fabric.Canvas.prototype.getItemsByName = function(name) { 
    var objectList = [], 
     objects = this.getObjects(); 

    for (var i = 0, len = this.size(); i < len; i++) { 
    if (objects[i].name && objects[i].name === name) { 

     if (objects[i].type && objects[i].type === "text") { 
     objectList.push(objects[i]); 
      } 
    } 
    } 
    return objectList; 
}; 




var moveHandler = function (evt) { 
    var movingObject = evt.target; 
    //console.log(movingObject.get('left'), movingObject.get('top')); 
    var textToMove = canvas.getItemsByName(objectname); 
    textToMove.style.left = movingObject.get('left')+'px';// 'px'; 
    textToMove.style.top = movingObject.get('top')+'px';// 'px'; 
}; 

canvas.on('object:moving', moveHandler); 

上記のコードはテキストオブジェクトを検出しますが、テキストを後ろに移動させていません。私は何を間違っているのですか？

私はfabric.jsを使用しています。

私はキャンバスに2つのオブジェクトを持っています。そして、私はイベントを使用しているとき、私はコンソールでオブジェクトの移動の座標を見ることができます。そしてまた、私は長方形

(var textToMove = canvas.getItemsByName(objectname)); 

しかし...をフォローしたいテキストオブジェクトの存在の教授を得ることができ、私は間違って何

次

Uncaught TypeError: Cannot set property 'left' of undefined next to: textToMove.style.left = movingObject.get('left')+'px';

を取得しますか？

var circle1 = new fabric.Circle({ 
    radius: 10, 
    fill: 'green', 
    left: 100, 
    top: 100, 
    id:objectname+"Circle" , 
    name:objectname  
}); 


    var text40 = new fabric.Text(objectname, { 
    selectable :false, 
    left:100, 
    top: 80, 
    fontWeight: 'bold', 
    fontSize: 12, 
    id:objectname+"Text", 
    name:objectname 
    }); 

Answer 1

テキストが移動されています要素の子である場合は、ちょうどそれがrelativeからpositionだし。ピクセルを計算してそれを移動しようとするのではなく、

Answer 2

fabric.Canvas.prototype.getItemByName2 = function(objectname) { 
    var object = null, 
     objects = this.getObjects(); 

    for (var i = 0, len = this.size(); i < len; i++) { 
    if (objects[i].type && objects[i].type === "text"){ 
     if (objects[i].name && objects[i].name=== objectname) { 
      object = objects[i]; 
     break; 
     } 
    } 
    } 
    return object; 
}; 

var moveHandler = function (evt) { 
    var movingObject = evt.target; 
    var leftx = movingObject.get('left'); 
    var topy = movingObject.get('top'); 
    canvas.getItemByName2(objectname).set('left',leftx); 
    canvas.getItemByName2(objectname).set('top',topy-20); 
}; 

canvas.on('object:moving', moveHandler); 

これは動作しています。 ありがとうございます