Arrastrar y colocar en lienzo de mozilla

Question

Quiero implementar un panel de dibujo (similar pero más pequeño a lo que visio da para los diagramas de flujo) en mozilla canvas.

¿Hay alguna ayuda para esto?

he utilizado hasta entonces jQuery para crear los rectángulos y moverlos. Si bien esto es fácil aquí ... crear líneas (conexiones entre objetos) es un verdadero dolor. Estoy usando una forma cruda de colorear píxel por píxel en javascript y no se ve bien ni escalable y también necesito construir muchas funciones para hacer que las conexiones se adhieran a un conjunto de objetos, etc.

¿Alguien sabe? si el lienzo y las funciones disponibles allí harán mi vida más fácil.

Cualquier punteros a lo que es una mejor solución en este caso. (Estoy esperando que no se applet)

Gracias de antemano.

Answer 1

Por favor, siga este enlace: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK si ayuda!

siguientes medidas pueden ayudar:
1. Crear y añadir un lienzo para el DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Establecer el ancho-altura del lienzo:
myCanvas.width=200; myCanvas.height=200;
3. Obtener el contexto de la lona y empezar a dibujar en él:
var gc = myCanvas.getContext('2d');
4. el código para dibujar rectángulo:
gc.strokeRect(50,50,50,50);
5. Después de esto, añadir mousehandlers (MO usedown, mousemove, mouseup)/touchhandlers (touchdown, touchmove, touchup) en el lienzo y manejar el movimiento en consecuencia.

Answer 2

Sí, puede usar lienzo para eso. Dibujar formas simples y escalarlas es bastante simple.

Pero si necesita editar las formas después de haberlos dibujado, que tendrá que invertir un poco más de trabajo. El lienzo dibuja en un llamado "modo inmediato", lo que significa que no sabe lo que ha pintado justo después de haberlo pintado. No realiza un seguimiento de las formas pintadas. Si lo necesita, tendrá que implementarlo por su cuenta.

he hecho esto usando la función isPointInPath() que puede ser usado para probar si un usuario hace clic en un punto en particular. Hago un seguimiento de mis objetos pintados usando el Patrón MVC (Modelo-Vista-Controlador), para poder averiguar en qué Forma se ha hecho clic.

Otra alternativa podría ser fabrics.js que deben estar muy cerca de lo que necesita.

Answer 3

Cualquiera de estas plugins jQuery son ideales para paneles de dibujo:

jCanvas Para sacar ninguna formas simples y complejas, incluso

sketch.js para dibujar en general.

Ambos son receptivos y compatibles.