Problemi di prestazioni che utilizzano le immagini con arbor.js

Question

ho lavorato sull'adattamento arbor.js utilizzare immagini.

Tuttavia, essendo un parente niubbo JS ciò che ho è totalmente non ottimizzato.

Per quanto posso dire, il modo in cui ho impostato in su è ricreare l'oggetto immagine per ogni immagine e ogni fotogramma, con conseguente tonnellate di sfarfallio.

Qualcuno può suggerire un modo per spostare la nuova immagine() roba fuori della funzione di ridisegno nella iniziazione? Per quanto ne so, questo è un problema OOP di base, ma totalmente bloccato.

Grazie!

Pastebin di dove sono fino a sulla script di output

Current status.

Answer 1

Apologies tutti! Ci sono alcuni passaggi. Evidenzierò le fasi principali, il resto è dal tutorial.

In primo luogo, aggiungere le informazioni rilevanti per il vostro JSON, ad esempio:

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 tutte le immagini quando la cosa carica.

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 
     } 
    }) 
... 

Poi, per spostare le immagini stesse ...

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] 
    } 
    ...