我有两个元素(矩形,文本),当我移动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;
}
});
答案 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/
我希望有所帮助,好好舔。