Stap 4: Kinetic.js: Hit-prestaties met 20.000 punten, weergegeven in Canvas
KineticJS is niet eens mijn favoriete 2D canvas-bibliotheek. Ik koos het in eerste instantie over de vele vele andere doek en SVG JavaScript options (ezel, papier, verwerking, raphael, stof, de lijst gaat op) voor slechts een reden: deze demo.
Dit is gewoon een gif. Klik hier voor de volledige demo!
Kinetische heeft ingebouwde gebeurtenis delegatie voor objecten die zijn toegevoegd aan de doeken. U registreren alleen een enkele gebeurtenislistener voor het hele doek en kinetische biedt een makkelijke manier om op te halen van de één deeltje dat op is geklikt. Dit maakt het zeer snel (zoals doek toch gaat), zelfs met 20.000 objecten tegelijk op het scherm. U kunt dit doen:
stage.on("click",function(e){ var node = e.targetNode; console.log(node); // the individual object that was clicked! }); ... en het zal melden enkel ongeveer zo snel alsof er slechts één knooppunt op het scherm.
Kinetische was geweldig om ons naar versie 1.0 van dit project, maar uiteindelijk wij het geheel gesloopt. Naar de werkstuk? Prestaties. Niet in de plaats ik verwacht eigenlijk: het was de gloeiende en un-gloeiende van de sterren zoals ze waren geselecteerd. Eenvoudig, maar ineffectief. Er waren andere problemen met 1.0 die mij: Ik gebruikte een aantal "relatie" woorden die mensen verwarrend gevonden, en was er enige vraag of de Melkweg over Instructables helemaal was. Ik teveel gespeeld van de projecten.
Dat, en noahw dacht dat we meer whiz-bang nodig. Beweging, 3D, lopen naar het scherm en steken op het heftig met een dikke vinger, dat soort dingen. Dit leidde uiteindelijk tot de wereld van ThreeJS waardoor het scherm veel meer aandacht grijpen. In veel opzichten echter was versie 1 zuiverder en voor mij, beter. Klik op Check out de kinetische versie. Wees u ervan bewust dat deze versie van het project nooit web-helemaal geoptimaliseerde was. Die koppeling ingeschakeld in debug-modus, die geeft je een kleine dataset en laat de muiscursor zichtbaar; het is nog steeds een 10mb download. De touchscreen modus is bijna 60 mb, en er is geen lader, zo caveat emptor.
