Problemy z wydajnością za pomocą obrazów z plikiem arbor.js

Question

Pracuję nad dostosowaniem arbor.js do korzystania z obrazów.

Jednak bycie względnym JS noobem jest całkowicie niezoptymalizowane.

O ile wiem, sposób, w jaki to skonfigurowałem, odtwarza obiekt obrazu dla każdego obrazu i każdej klatki, powodując tony migotania.

Czy ktoś może zaproponować sposób przeniesienia nowych elementów Image() z funkcji przerysowywania do inicjacji? O ile mi wiadomo, jest to podstawowy problem OOP, ale całkowicie zablokowany.

Dzięki!

Pastebin z którym jestem do nad scenariuszem wyjściowym

Current status.

Answer 1

Przepraszam! Jest kilka kroków. Podkreślę kluczowe etapy, reszta jest z samouczka.

pierwsze, dodać odpowiednie informacje do JSON, na przykład:

nodes:{ 
    innovation:{ 'color':colour.darkblue, 
        'shape':'dot', 
        'radius':30, 
        'image': 'innovation.png', 
        'image_w':130, 
        'image_h':24, 
        'alpha':1 }, 
    participation:{ 'color':colour.purple, 
        'shape':'dot', 
        'radius':40, 
        'image':'participation.png', 
        'image_w':130, 
        'image_h':24, 
        'alpha':1 }, 
    ... 

Cache wszystkie swoje obrazy po załadowaniu rzeczy.

init:function(system){ 

    // Normal initialisation 
    particleSystem = system 
    particleSystem.screenSize(canvas.width, canvas.height) 
    particleSystem.screenPadding(25, 50) 
    that.initMouseHandling() 

    // Preload all images into the node object 
    particleSystem.eachNode(function(node, pt) { 
     if(node.data.image) { 
      node.data.imageob = new Image() 
      node.data.imageob.src = imagepath + node.data.image 
     } 
    }) 
... 

Następnie do przenoszenia obrazów siebie ...

particleSystem.eachNode(function(node, pt){ 
    ...  
    // Image info from JSON 
    var imageob = node.data.imageob 
    var imageH = node.data.image_h 
    var imageW = node.data.image_w 
    ... 
    // Draw the object   
    if (node.data.shape=='dot'){ 
     // Check if it's a dot 
     gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle, alpha:node.data.alpha}) 
     nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w] 
     // Does it have an image?  
     if (imageob){ 
      // Images are drawn from cache 
      ctx.drawImage(imageob, pt.x-(imageW/2), pt.y+radius/2, imageW, imageH) 
     } 
    }else { 
     // If none of the above, draw a rectangle 
     gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle, alpha:node.data.alpha}) 
     nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22] 
    } 
    ...