arbor.jsで画像を使用する際のパフォーマンスの問題

Question

私は画像を使用するようにarbor.jsを調整しています。

しかし、私が持っているJSのnoobは完全に最適化されていません。

私が知る限り、私が設定した方法は、すべてのイメージとすべてのフレームのイメージオブジェクトを再作成して、ちらつきがたくさんあります。

誰でも、新しいイメージ（）を再描画機能から開始に移動する方法を提案できますか？私が知る限り、これは基本的なOOPの問題ですが、完全に固まっています。

ありがとうございます！私は、出力スクリプト

Current status上までだよどこの

Pastebin。

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

キャッシュをすべてのあなたのイメージのものがロードされます。その後

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