Arbor.js ile görüntülerin kullanılmasıyla ilgili performans sorunları

Question

Arbor.js'nin resimler kullanmak için uyarlanması üzerinde çalışıyorum. Ancak, sahip olduğum bir JS noob olmanın tamamen optimize edilmemiş olması.

Anlatabildiğim kadarıyla, kurduğum yol, her görüntü ve her kare için görüntü nesnesini yeniden oluşturmaktır, bu da ton titreme ile sonuçlanır.

Yeni Image() öğelerini, yeniden çizme işlevinden başlatmaya taşımak için herhangi bir yöntem önerilebilir mi? Bildiğim kadarıyla bu temel bir OOP sorunu, ama tamamen sıkışmış.

Teşekkürler! Ben çıkış komut

Current status üzerine kadar değilim nerede

Pastebin.

Answer 1

Özür dilerim! Birkaç adım var. Temel aşamaları vurgulayacağım, gerisi öğreticiden.

Birincisi, örneğin, JSON ilgili bilgileri ekleyin:

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

Önbellek tüm görüntüleri şey yükler. Sonra

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

, kendilerini görüntüleri hareket ettirmek için ...

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