Paso 4: Kinetic.js: Hit-Performance con 20.000 puntos, en tela
KineticJS ni siquiera es mi biblioteca favorita lienzo 2D. Elegí inicialmente sobre los muchos muchos otros lona y opciones de JavaScript de SVG (caballete, papel, proceso, Rafael, tela, la lista es interminable) por una razón solamente: esta demo.
Esto es solo un gif. Haga click para ver la demo completa!
Cinética tiene delegación de eventos incorporado para objetos agregados a sus lienzos. Se registra sólo un detector de eventos solo para el lienzo entero, y cinética proporciona una manera fácil de recuperar la única partícula que se hizo clic en. Esto hace extremadamente rápido (como la lona va de todos modos), incluso con 20.000 objetos en pantalla a la vez. Usted puede hacer esto:
... y registrará casi tan rápido como si hubiera sólo un nodo en la pantalla.
Cinética fue genial para nosotros llegar a la versión 1.0 de este proyecto, pero finalmente hemos desechado totalmente. ¿El problema? Rendimiento. No en el lugar esperaba realmente: era brillante y no brillante de las estrellas que fueron seleccionados. Sencillo, pero ineficaz. Hubo otros problemas con 1.0 que mina: utilicé una serie de palabras de "relación" que la gente encuentra confusa, y hubo alguna pregunta si la galaxia era de Instructables en todos. Demasiado había jugado abajo de los proyectos.
Que, y noahw pensó que necesitábamos más whiz-bang. Movimiento, 3D, caminar hasta la pantalla y meter en él violentamente con el dedo gordo, ese tipo de cosa. Esto condujo en última instancia en el mundo de ThreeJS que hizo la pantalla mucho más atención que ase. En muchas maneras, versión 1 ha sido más pura y, para mí, mejor. Haga clic en el Check out la versión Kinetic. Tenga en cuenta que esta versión del proyecto no fue nunca web optimizada en todos. Ese vínculo se convierte en modo de depuración, que le da un pequeño conjunto de datos y deja el cursor visible; todavía es una descarga de 10mb. El modo de pantalla táctil es de casi 60 mb y no hay ningún cargador, así emptor de la advertencia.