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

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

6 голосов
/ 22 марта 2012

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

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

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

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

Спасибо!

Pastebin того места, где я нахожусь в сценарии вывода

Текущий статус .

1 Ответ

3 голосов
/ 03 апреля 2014

Приношу извинения всем! Там есть несколько шагов. Я выделю ключевые этапы, остальное из учебника.

Сначала добавьте соответствующую информацию в ваш 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 },
   ...

Кэшируйте все ваши изображения при загрузке. 

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