Mi pregunta es acerca de mover líneas y rectas usando coordenadas absolutas.
const line = new PIXI.Graphics(); line.lineStyle(2, 0xffffff); line.moveTo(100, 200); line.lineTo(300, 200); app.stage.addChild(line);Pero si intento establecer coordenadas cambiando x/y, será relativo a la posición creada:
line.x = 200; // real x will be 300 line.y = 200; // real y will be 400¿Cómo debo mover esta línea si necesito establecer coordenadas absolutas a la vista? ¿Debo calcular siempre las coordenadas absolutas usando la corriente?
const blueBox = new PIXI.Graphics(); blueBox.beginFill(0x0000ff); blueBox.drawRect(50, 50, 50, 50); blueBox.endFill(); app.stage.addChild(blueBox);Si trato de moverlo usando x/yi, haré lo mismo que la línea: x/y son relativos, está bien. Siempre puedo dibujar rectos en el punto 0/0 y luego moverlos, pero ¿es el diseño correcto? ¿Hay otra forma?
Como regla general, no debe activar redibujados en objetos gráficos si no cambian visualmente. Es una operación computacionalmente costosa, y simplemente reposicionar el objeto no justifica llamarlo.
Una mejor alternativa es pintar la línea o el recto usando coordenadas locales y colocarlo en la posición absoluta de destino configurando la propiedad de position . Prefiero mantener (0, 0) como el centro de la forma, pero también es válido elegir la esquina superior izquierda o cualquier otro punto de referencia. Para un rectángulo se vería así:
const blueBox = new PIXI.Graphics(); blueBox.beginFill(0x0000ff); blueBox.drawRect(-25, -25, 50, 50); blueBox.endFill(); blueBox.position.set(25, 25); app.stage.addChild(blueBox);A partir de este punto, todos los cambios a la posición absoluta del rectángulo deberían ocurrir cambiando la propiedad de posición, no volviendo a dibujar los gráficos con las nuevas coordenadas.