接口对象fabric.js

Question

我有两个元素(矩形、文本)，当我移动rentangle时，文本也会随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

您是否将这两个对象组合在一起作为一个对象，还是单独操作它们？

我做了一个较老的实时示例，在上面加载一个Image(t-shirt)和一个徽标(i- text )，然后我们处理文本。

我已经添加了textbox，我们可以在其中更新i-text实时和按钮，以将文本上/下/左/右移动到图像元素中。

但首先我创建两个对象并将其分组，如下所示：

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/

我希望这能帮上忙，舔得好。