javascript / jquery / processing.js - 如何最有效地创建和动画画布元素答案

【问题标题】：javascript / jquery / processing.js - how to most effectively create and animate canvas elementsjavascript / jquery / processing.js - 如何最有效地创建和动画画布元素
【发布时间】：2011-10-31 21:38:05
【问题描述】：

我正在尝试构建一个应用程序，该应用程序基于各种用户交互，允许将各种基于椭圆的视觉效果添加到舞台上，然后非常简单地制作动画。我目前有一个基本的演示设置，其中 javascript / jquery 与 processing.js 通信，但它看起来真的是低效的代码，因为处理依赖于运行一个连续的循环来绘制到屏幕上。我想知道，第一，我的做法是否会在更大范围内有效，第二，是否有更好的技术或方法可以使用。我来自 Flash 背景，除非触发一个函数告诉它动画，否则屏幕上的任何内容都不会更改或绘制/动画，这似乎是明智的。无论如何，这是我的代码：

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

【问题讨论】：

你有没有看过更简单的画布库，比如fabric.js？ Fabric 为您提供了一个对象模型来处理画布上的对象（+动画、svg 解析等）。而且都是 JS，所以不需要学习新语法。

标签： javascript jquery canvas processing processing.js

【解决方案1】：

如果您想控制 Processing.js 何时绘制到画布上，您有两种选择。在这两种情况下，您要做的第一件事就是访问处理实例：

var p = Processing.instances[0];

现在您可以通过 JavaScript 进行所有您想要的处理 API 调用。您可以在草图的 setup() 函数中调用 noLoop()，然后在 jQuery 动画循环中调用 p.redraw()，它将为一帧设置动画。

在 Processing.js 中，我们将所有函数附加到 Processing 实例。所以另一种选择是在草图中创建自己的函数，并调用它：

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

您甚至可以在函数参数中将数据传递给它，从而无需 windows.Processing.data。

【讨论】：

谢谢 - 这是有道理的，但我无法检测到使用此代码的任何处理实例。我需要在我的处理代码中做些什么来使它可用吗？
这……很奇怪。如果我在网页中运行一个草图，我可以打开我的控制台，Processing.instances 将返回一个当前活动的处理草图的数组。如果您仍然遇到问题，请访问 IRC：irc.mozilla.org #processingjs。
谢谢 - 我认为问题在于我将新代码与旧的处理实例混合在一起，否则您的解决方案是正确的。

【解决方案2】：

对于您想做的事情，您可能更喜欢使用其他库，例如 paperjs http://paperjs.org/

【讨论】：

是的，我认为你是对的。我切换到 raphael.js - 但 paperjs 也很酷。