交互对象fabric.js

时间:2016-02-26 09:28:34

标签: html5-canvas fabricjs

我有两个元素(矩形,文本),当我移动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;
        }

});

1 个答案:

答案 0 :(得分:0)

您是将两个对象分组为一个还是分别操作它们?

我做了一个较旧的现场练习,在其上加载图像(T恤)徽标(i-text),我们操纵文本。

我添加了文本框,我们可以更新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/

我希望有所帮助,好好舔。