3

我在处理中编写了自己的草图,并使用 processingjs 和 ajax 将其插入页面,如下所示:

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);

    });
});

这是画布#sketch所指的:

<canvas data-processing-sources="first-sketch.pde" id='sketch'></canvas>

这可行,但是我也想使用 Javascript 与草图进行交互。当我在我的(萤火虫)控制台中输入这个时,一切都很好:

var sketch = Processing.getInstanceById('sketch');
sketch.addTweet(30, 30, 100);

(addTweet 是草图的一个功能,一旦加载草图就可用)但是当我把它放在 javascript 中时,如下所示:

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);


        var sketch = Processing.getInstanceById('sketch');
        sketch.addTweet(30, 30, 100);

    });
});

我得到错误:

Uncaught TypeError: Cannot call method 'addTweet' of undefined

我认为草图此时尚未加载,加载后是否有回调或运行代码的正确方法?

script在标签中包含 processingjs 库时,我收到相同的错误。并在 jQuery.ready 上运行代码。

4

2 回答 2

1

这是我为我的一个项目整理的东西。它不漂亮,但它完成了工作(现在)。

var timer = 0,
    timeout = 3000,
    mem = setInterval(function () {
        var sketch = Processing.getInstanceById("processingCanvas");
        if (sketch) {
            console.log("SKETCH HAS LOADED");
            clearInterval(mem);
        } else {
            timer += 10;
            if (timer > timeout) {
                console.log("FAILED TO LOAD SKETCH");
                clearInterval(mem);
            }
        }
    }, 10);
于 2012-08-24T05:13:05.333 回答
0

问题是 loadSketchFromSources 不是同步的。

loadSketchFromSources 函数中添加了一个回调(github,最新)。因此,您可以将代码编写为:

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')], function(sketch) {
          sketch.addTweet(30, 30, 100);
        });
    });
});

您也可以使用类而不是 id。在回调中抓取草图,您不需要使用getInstanceById.

于 2015-09-24T05:45:32.257 回答