Agrupación de formas y texto en HTML5 Canvas

Así que acabo de empezar a trabajar con HTML5 y el elemento Canvas. Estoy trabajando en un proyecto en el que crearé mapas mentales, y planeo hacer esto usando el elemento Canvas junto con el script java.Agrupación de formas y texto en HTML5 Canvas

Mi pregunta es, ¿cómo agrupo las formas juntas en un lienzo? No tengo problemas para dibujar formas y texto en el lienzo, y no hay problemas para arrastrarlos por el lienzo. Lo que me gustaría hacer es bloquear decir una forma y un elemento de texto juntos de modo que si arrastro la forma, el texto viene junto con ella.

¿Alguna idea?

Gracias de antemano.

Fuente

2010-11-08 Adam Holmes

¿Al menos ha intentado codificar? En caso afirmativo, publique el código, porque su pregunta es un poco confusa para mí. de todos modos, voy a votar su pregunta para obtener una buena respuesta :) –

Ok, sí, aquí está la página en la que estoy trabajando: http://www.adam-holmes.co.uk/mindmaps/test2/temp.php Si miras en "scripts.js", deberías poder dar sentido a lo que hice. P.S. Gracias por el voto positivo :) –

Gracias :) Tomé bits de todas partes y agregué bits yo mismo. Tomó dos días ... –

Es probable que desee utilizar SVG en lugar de lienzo.

SVG es un tablero sobre el que se quede trazados, grupos, etc., que se pueden agregar, modificar, etc. ya que siguen siendo entidades separadas. A continuación, puede tener cosas como un controlador onclick en un objeto (ruta, grupo o lo que sea), lo que hace que el manejo de eventos a menudo sea mucho más simple que el lienzo. Hacer contenido repetible es más fácil con SVG también. Dibuja algo en Inkscape y luego puedes copiar el SVG que produce y hacer lo que sea con él.
La lona es solo un lienzo para pintar; cada nuevo marco que dibuje encima del anterior, de forma manual, por lo que en lugar de tener un <ellipse> debe invocar funciones en el contexto 2D de su lienzo para construir cada cuadro. No hay controladores de eventos para esa elipse: deberá calcular si el mouse está sobre la elipse manualmente: solo hay un elemento; los trazos del pincel en el lienzo no se mantienen separados. Para mapas mentales que lo harían más difícil.

SVG también hace que la exportación sea fácil y escalable, lo que podría ser conveniente para su propósito. Canvas solo te daría un mapa de bits.

Fuente

2010-11-08 21:11:24

Supongo que tendré que hacer un pequeño cambio de diseño. Off Voy a ver algunos tutoriales. Gracias. –

Cualquier mecanismo que esté utilizando para arrastrar su forma debe hacer la magia por usted si puede combinar temporalmente esas dos formas en una sola. Sin saber cómo representas las formas y el método que utilizas para moverlas, no puedo darte ningún consejo mejor.

Fuente

2010-11-08 21:03:39

estoy un poco tarde a la fiesta, pero fwiw hay una muy buena biblioteca que te permite hacer capas, formas, grupos e incluso enlaces de eventos en canvas elemento de HTML5 llamada Kinetic.js

http://www.html5canvastutorials.com/kineticjs/

Lo usé para crear un grupo de formas y texto arrastrables en el lienzo html5 con gran éxito.

Fuente

2012-09-19 08:41:38 tmaximini

Agrupación de formas y texto en HTML5 Canvas

Respuesta

Cuestiones relacionadas