Soy la persona que hizo los tutoriales en 2. Están sucediendo muchas cosas aquí, así que trataré de explicar un poco.
Utilizo un lienzo oculto para la selección simplemente porque es fácil de aprender y funcionará para CUALQUIER tipo de objeto (texto, rutas complejas, rectángulos, imágenes semitransparentes). En la biblioteca real de diagramas que estoy escribiendo, no hago nada por el estilo, en cambio uso mucha matemática para determinar la selección. El método de lienzo oculto está bien para menos de 1000 objetos, pero finalmente el rendimiento comienza a sufrir.
Lucidchart en realidad usa más de un lienzo por objeto. Y no solo los tiene en la memoria, sino que están todos en el DOM. Esta es una opción de organización por su parte, una bastante rara en mi opinión. SVG podría haber hecho su trabajo mucho más fácil si eso es lo que van a hacer, como si pareciera que están haciendo un montón de trabajo de pies solo para poder emular cómo SVG funciona un poco. No hay muchas buenas razones para tener tantos lienzos en el DOM si puede evitarlo.
Me parece que la ventaja de que lo hagan de esa manera es que si tienen 10,000 objetos, cuando hace clic, solo tiene que mirar el único lienzo en el que se hace clic para realizar pruebas de selección, en lugar de todo el lienzo Entonces lo hicieron para hacer su código de selección un poco más corto. Prefiero tener solo un lienzo en el DOM; su camino parece innecesariamente desordenado. El punto del lienzo es tener una superficie de representación rápida en su lugar de un mil divs que representan objetos. Pero solo hicieron mil lienzos.
De todos modos, para responder a su pregunta, la forma "más fácil" de lograr diagramas interactivos de red como lucidchart es usar una biblioteca o usar SVG (o una biblioteca SVG). Lamentablemente, todavía no hay demasiados. Obtener toda la funcionalidad usted mismo en Canvas es difícil pero ciertamente factible, y le ofrecerá un mejor rendimiento que SVG, especialmente si planea tener más de 5,000 objetos en sus diagramas. Comenzar con EaselJS por ahora no es una mala idea, aunque probablemente te encuentres modificando cada vez más a medida que profundizas en tu proyecto.
Estoy haciendo una de esas diapositivas interactivo biblioteca de diagramas para Northwoods Software, pero no se hará durante unos meses más.
Para responder a la pregunta que está más o menos en su título: El método más rápido de interactividad, como la prueba de golpes, es el uso de las matemáticas.Cualquier biblioteca de lienzo de alto rendimiento con las características para admitir una gran cantidad de diferentes tipos de objetos terminará implementando funciones como getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint, y así sucesivamente.
En cuanto a su pregunta complementaria, creo que crear un campo de texto en la parte superior del lienzo cuando un usuario quiere cambiar el texto y luego destruirlo cuando el usuario termina de ingresar texto es la manera más intuitiva de obtener entrada de texto. Por supuesto, debe asegurarse de que el campo esté posicionado correctamente sobre el texto que está editando y que la fuente y los tamaños de fuente sean los mismos para una sensación constante.
La mejor de las suertes con su proyecto. Déjame saber como va.
¿Qué pasa con [SVG with raphael] (http://raphaeljs.com/) y [trazando gráficos con gRaphael] (http://g.raphaeljs.com/) – Raynos
@William Sham Hola, en realidad, también estoy haciendo algo similer a su trabajo y tratando de hacer una aplicación de diagrama interactiva utilizando easelJs ¿Puede guiarme cómo han conectado dos imágenes de la lona? Gracias – mainajaved