javascript/jquery/processing.js-如何最有效地创建画布元素并设置其动画_Javascript_Jquery_Canvas_Processing_Processing.js

javascript/jquery/processing.js-如何最有效地创建画布元素并设置其动画

javascript jquery canvas processing

javascript/jquery/processing.js-如何最有效地创建画布元素并设置其动画,javascript,jquery,canvas,processing,processing.js,Javascript,Jquery,Canvas,Processing,Processing.js,我正在尝试构建一个基于各种用户交互的应用程序，允许将各种基于椭圆的视觉效果添加到舞台上，然后非常简单地设置动画。我目前已经建立了一个基本的演示程序，其中javascript/jquery与processing.js进行通信，但这似乎是非常低效的代码，因为处理依赖于运行一个连续的循环来绘制屏幕。我想知道，第一，我现在的做法是否能在更大范围内有效，第二，是否有更好的技术或方法可以使用。我来自一个flash背景，屏幕上没有任何东西被改变或绘制/动画，除非触发一个函数，告诉它动画，这似乎是明智的。无论如

我正在尝试构建一个基于各种用户交互的应用程序，允许将各种基于椭圆的视觉效果添加到舞台上，然后非常简单地设置动画。我目前已经建立了一个基本的演示程序，其中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何时绘制到画布，有两个选项。在这两种情况下，您要做的第一件事是访问处理实例：

var p = Processing.instances[0];

现在，您可以从JavaScript进行所有需要的处理API调用。您可以在sketch的setup（）函数中调用noLoop（），然后在jQuery动画循环中调用p.redraw（），这将为一帧设置动画

在Processing.js中，我们将所有函数附加到处理实例。因此，另一个选项是在草图中创建自己的函数，并使用以下命令调用它：

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

您甚至可以在函数参数中将数据传递给它，这样就不需要windows.Processing.data。

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

var p = Processing.instances[0];

在Processing.js中，我们将所有函数附加到处理实例。因此，另一个选项是在草图中创建自己的函数，并使用以下命令调用它：

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

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

对于您想要做的事情，您可能更喜欢使用另一个库，如paperjs

谢谢-这很有意义，但我无法检测到任何使用此代码的处理实例。我需要在我的处理代码中做些什么才能使它可用吗？那就是。。。奇怪的如果在网页中运行草图，我可以打开控制台并进行处理。实例将返回当前活动的处理草图数组。如果您仍然遇到问题，请访问我们的IRC:IRC.mozilla.org#processingjs。谢谢-我认为问题在于我将新代码与旧的处理实例混合在一起，否则您的解决方案是正确的。谢谢-这很有意义，但我无法检测到任何使用此代码的处理实例。我需要在我的处理代码中做些什么才能使它可用吗？那就是。。。奇怪的如果在网页中运行草图，我可以打开控制台并进行处理。实例将返回当前活动的处理草图数组。如果您仍然遇到问题，请访问我们的IRC:IRC.mozilla.org#processingjs。谢谢-我认为问题在于我将新代码与旧的处理实例混合在一起，否则您的解决方案是正确的。您看过更简单的画布库吗，如？Fabric为您提供了一个对象模型来处理画布上的对象（+动画、svg解析等）。而且都是JS，所以不需要学习新语法。你看过更简单的画布库吗，比如？Fabric为您提供了一个对象模型来处理画布上的对象（+动画、svg解析等）。而且都是JS，所以不需要学习新语法。是的，我想你是对的。我换了raphael.js，但是paperjs也很酷。是的，我想你是对的。我切换到raphael.js，但paperjs也很酷。