Проблемы с производительностью с использованием изображений с arbor.js

Question

Я работаю над адаптацией arbor.js для использования изображений.

Однако, будучи относительным JS noob, у меня есть полностью не оптимизированный.

Насколько я могу судить, способ, которым я его настроил, - это воссоздание объекта изображения для каждого изображения и каждого кадра, что приводит к тонкости мерцания.

Может ли кто-нибудь предложить способ перемещения нового изображения() из функции перерисовки в инициирование? Насколько я знаю, это основная проблема ООП, но она полностью застряла.

Спасибо!

Pastebin, где я до на выходе скрипта

Current status.

Answer 1

Извините, все! Есть несколько шагов. Я расскажу о ключевых этапах, остальное - из учебника.

Во-первых, добавьте соответствующую информацию в вашем JSON, например:

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 все ваши изображения когда вещь загружает.

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

Затем для перемещения изображения сами ...

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