Intercction objects fabric.js

Question

我有兩個元素（矩形，文本），當我移動rentangle時，文本隨着租借角度移動。 enter image description here

移動矩形後，我想選擇文本，但是我無法通過單擊來選擇它。我如何讓文字在矩形上方？

這是我的代碼：

canvas.on("object:moving", function() { 

     //Objeto que se mueve 
     var obj = this.relatedTarget; 
     var type = obj.type; 
     var id = obj.id; 
     var top, left; 
     switch (type) 
     { 
      case 'rectangleElemento': 
       var elementos = buscarporElementoID(mapa.mapaElementos, id); 
       if (elementos.idTextoElemento != null) 
       { 
        var textoElemento = canvas.item(elementos.idTextoElemento); 
        top = obj.top + 20; 
        left = obj.left + 20; 
        textoElemento.setTop(top); 
        textoElemento.setLeft(left); 
        textoElemento.bringToFront(); 
        canvas.bringForward(textoElemento); 

        //canvas.br 
        // obj.bringToBack(); 
        //Pendiente que se active el texto por encima 
       } 
       break; 
      case 'textoElemento': 
       var elementos = buscarporElementoIDTexto(mapa.mapaElementos, id); 
       var bounds = canvas.item(elementos.idRectanguloElemento); 
       if (bounds.id == elementos.idRectanguloElemento) { 
        top = bounds.get('left'); 
        left = bounds.get('top'); 
        obj.setCoords(); 
        if (!obj.isContainedWithinObject(bounds)) { 
         obj.setTop(goodtop); 
         obj.setLeft(goodleft); 
         // canvas.renderAll(); 
        } else { 
         goodtop = obj.top; 
         goodleft = obj.left; 
        } 
       } 
       break; 
     } 

}）;

Answer 1

你是否將兩個對象分組爲一個行爲，還是分別操縱它們？

我做了一個加載圖片（T恤）的舊活exmple和標誌（I-文本）它，我們處理的文本。

我添加了文本框，我們可以更新文本實時和按鈕將文本上/下/左/右移動到圖像元素中。

但首先我創建和組的兩個對象是這樣的：

fabric.Image.fromURL(myImg, function(myImg) { 
    var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 }); 

    var text = new fabric.Text('the_text_sample\nand more', { 
       fontFamily: 'Arial', 
       fontSize:20, 
      }); 

    text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150); 
    text.set("left",myImg.width*scaleFactor/2-text.width/2); 

    var group = new fabric.Group([ img1,text ], { left: 10, top: 10 }); 
    canvas.add(group); 
console.log(canvas._objects[0]._objects[1].text); 
}); 

活生生的例子：https://jsfiddle.net/tornado1979/zrazuhcq/

我希望幫助，好舔。