0
274
VistasFabric.js Canvas: haga que un tipo de objeto siempre permanezca debajo del otro
Estoy trabajando en un proyecto en el que tengo que agregar rectángulos y agregar triángulos en esos rectángulos. Obtengo el rectángulo seleccionado actualmente usando esto
const rect = canvas.getActiveObject().aCoordsLuego compruebo si el clic del mouse está en el rectángulo y, si es cierto, agrego un triángulo.
const x = event.pointer.x const y = event.pointer.y if (rect.tl.x + 20 < x < rect.br.x - 20 && rect.tl.y + 20 < y < rect.br.y - 20) { var points = regularPolygonPoints(3, 10); var myPoly = new fabric.Polygon(points, { stroke: 'red', left: x, top: y, strokeWidth: 2, strokeLineJoin: 'bevil' }, false); canvas.add(myPoly); }El problema es que cada vez que se selecciona el rectángulo, aparece encima de todos los triángulos agregados y solo después de hacer clic para anular la selección del rectángulo, los triángulos aparecen debajo.
Por favor, vea las imágenes a continuación para comprender mejor
no seleccionado
Rectángulo seleccionado que viene encima de los triángulos
Lo que quiero es que incluso si se selecciona el rectángulo, siempre permanece debajo de los triángulos.
1 Respuestas
Responde la pregunta0
http://fabricjs.com/docs/fabric.Canvas.html#preserveObjectStacking
Indica si los objetos deben permanecer en la posición actual de la pila cuando se seleccionan. Cuando los objetos falsos se colocan en la parte superior y se representan como parte del grupo de selección
Establezca su canvas.preserveObjectStacking en true (es false de forma predeterminada).
Evitará que la selección traiga objetos al frente, pero tenga en cuenta que esto dependerá del orden en que haya agregado sus objetos.