使用带有 arbor.js 的图像的性能问题答案

【问题标题】：Performance issues using images with arbor.js使用带有 arbor.js 的图像的性能问题
【发布时间】：2012-04-07 05:58:18
【问题描述】：

我一直致力于调整 arbor.js 以使用图像。

但是，作为一个相对的 JS 菜鸟，我所拥有的完全没有经过优化。

据我所知，我设置它的方式是为每个图像和每个帧重新创建图像对象，从而导致大量闪烁。

谁能建议一种将新的 Image() 东西从重绘函数中移到启动中的方法？据我所知，这是一个基本的 OOP 问题，但完全卡住了。

谢谢！

Pastebin 我在输出脚本上的目标

Current status.

【问题讨论】：

哈！终于解决了这个问题。如果你想看看我是如何在 URL 上做的，新代码就出来了。
我是否可以建议将您的修复添加为问题的答案（并接受该答案），以便问题不会显示为未回答？ :)
我正要说“没有闪烁”，直到我阅读了 cmets。请添加您自己关于如何解决问题的答案。
@kimadactyl：自己在下面发布一个答案并将其标记为正确。
抱歉，好久没登录了！答案已添加，我希望它足够清楚。

标签： javascript jquery oop arbor.js

【解决方案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 },
   ...

加载时缓存所有图像。

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

【讨论】：