Étape 4: Kinetic.js : Hit-Performance avec 20 000 Points, rendus en toile
KineticJS n’est même pas ma bibliothèque préférée canvas 2D. Je l’ai choisi au départ sur les nombreux nombreux autres toile et options JavaScript SVG (chevalet, raphael, tissu, papier, traitement de la liste est longue) pour une seule raison : cette démo.
C’est juste un gif. Cliquez pour voir la démo complète !
Cinétique a délégation événement intégré pour les objets ajoutés à ses toiles. Vous enregistrez seulement un écouteur d’événement unique pour le canevas entier et cinétique fournit un moyen facile de récupérer la seule particule qui a été cliquée sur. Cela rend extrêmement rapide (comme toile va en tout cas), même avec 20 000 objets à l’écran à la fois. Vous pouvez faire ceci :
... et il enregistrera à peu près aussi vite comme s’il n’y a qu’un seul nœud à l’écran.
Cinétique a été formidable pour nous mènera vers la version 1.0 de ce projet, mais en fin de compte nous avons abandonné il entièrement. Le problème ? Performances. Pas en place, je m’attendais en fait : c’était le lumineux et non lumineux des étoiles comme elles ont été sélectionnées. Simple, mais inefficace. Autres problèmes avec 1.0 qui étaient les miens : J’ai utilisé une série de mots « relation » que les gens trouvent déroutants, et il y avait quelques question de savoir si la galaxie était sur Instructables du tout. J’avais minimisé les projets trop.
Que, et noahw pensé que nous avions besoin de plus de whiz-bang. Mouvement, 3D, remonter à l’écran et pousser à violemment avec un gros doigt, ce genre de chose. A finalement dans le monde de ThreeJS qui a fait l’affichage beaucoup plus accrocheur. À bien des égards, la version 1 était plus pur et, pour moi, mieux. Cliquez pour vérifier la version de cinétique. Veuillez noter que cette version du projet a été jamais web optimisé du tout. Ce lien active le mode debug, ce qui vous donne un petit ensemble de données et laisse le curseur de la souris visible ; C’est encore un téléchargement de 10Mo. Le mode de l’écran tactile est près de 60 Mo, et il n’y a pas de chargeur, alors caveat emptor.
