javascript/jquery/processing.js - 如何最有效地創建和動畫畫布元素

我想建立一個應用程序，基於各種用戶交互，允許各種基於橢圓的視覺效果添加到舞臺上，然後動畫非常簡單。我目前已經設置了一個基本的演示，其中javascript/jquery與processing.js進行通信，但它看起來效率非常低，因爲處理依賴於運行連續循環才能繪製到屏幕。我想知道一個，如果我這樣做的方式將會在更大範圍內有效，如果有更好的技術或方法可以使用，那麼兩個。我來自閃光背景，屏幕上的任何內容都不會改變或繪製/動畫，除非觸發了一個函數告訴它動畫，這似乎是合理的。總之，這裏是我的代碼：javascript/jquery/processing.js - 如何最有效地創建和動畫畫布元素

HTML/JS：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Processing</title> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
     <script src="js/processing-1.3.6.min.js"></script> 
     <script src="processing/Tween.lib"></script> 
    </head> 

    <body> 
     <canvas id="circles" data-processing-sources="js/drawCircles.js"></canvas> 
     <div id="clicker">Click</div> 
     <script> 

     window.Processing.data = {}; 

     var dataRef = window.Processing.data; 
     var animInterval; 
     dataRef.circleArray = new Array(); 


     $('#clicker').click(function(){ 
      var circle = {}; 
      circle.radius = 50; 
      dataRef.circleArray.push(circle) 
      var from = {property: 50}; 
      var to = {property: 75}; 

      jQuery(from).animate(to, { 
       duration: 300, 
       step: function() { 
        for (var i in dataRef.circleArray){ 
         circle.radius = this.property; 
        } 
       } 
      }); 
     }) 

     </script> 
    </body> 
</html>

PROCESSING.JS

// Global variables 
float radius = 1.0; 
int X, Y; 
int nX, nY; 
int delay = 16; 

// Setup the Processing Canvas 
void setup(){ 
    // Fill canvas grey 
    background(100); 
    size(200, 200); 
    strokeWeight(10); 
    frameRate(15); 
    X = width/2; 
    Y = width/2; 
    nX = X; 
    nY = Y; 
} 

// Main draw loop 
void draw(){ 
    var dataRef = window.Processing.data; 
    for (var i in window.Processing.data.circleArray){ 
     radius = dataRef.circleArray[i].radius; 
     // Set fill-color to blue 
     fill(0, 121, 184); 
     // Set stroke-color white 
     stroke(255); 
     // Draw circle 
     ellipse(X+(i*10), Y, radius, radius); 
    }   
}

來源

2011-10-31 mheavers

你看着更簡單的帆布庫，如[fabric.js]（http://kangax.github.com/ fabric.js /）？結構爲您提供了一個對象模型來處理畫布上的對象（+動畫，svg解析等）。這都是JS，所以不需要學習新的語法。 – kangax

如果您想在Processing.js畫到畫布上進行控制，你有兩個選擇。在這兩種情況下，你會想要做的第一件事情就是訪問處理實例：

var p = Processing.instances[0];

現在你可以讓所有的處理API調用，可以通過JavaScript希望。你可以在你的草圖的setup（）函數中調用noLoop（），然後在你的jQuery動畫循環中調用p.redraw（），它將動畫一幀。

在Processing.js中，我們將所有函數都附加到Processing實例。因此，另一種選擇是創建草圖自己的函數，並與調用它：

var p = Processing.instances[0]; 
p.drawEllipses(radius);

你甚至可以將數據傳遞給它的函數參數，消除了對windows.Processing.data的需要。

來源

2011-11-01 02:53:55

謝謝 - 這是有道理的，但我無法檢測到使用此代碼的任何處理實例。在我的處理代碼中是否需要執行某些操作以使其可用？ – mheavers

這是...奇怪。如果我在網頁中運行草圖，我可以打開我的控制檯，Processing.instances將返回當前處於活動狀態草圖的數組。如果您仍然遇到問題，請訪問我們的IRC：irc.mozilla.org #processingjs。 –

謝謝 - 我認爲問題在於我將新代碼與舊的處理實例混合在一起，否則您的解決方案是正確的。 – mheavers

對於你想做什麼，你可能更喜歡使用第三方庫，如paperjs http://paperjs.org/

來源

2011-11-01 20:44:13 Sycren

是的，我認爲你是對的。我切換到raphael.js - 但paperjs也很酷。 – mheavers

javascript/jquery/processing.js - 如何最有效地創建和動畫畫布元素

回答

相關問題