如何向 HTML 页面公开Processing.js 函数？

Question

我有一个 redraw() 函数，旨在停止当前的 draw() 循环，从 DOM 检索新的初始化值，然后恢复绘制，就好像这些值是最初的值一样。

但是onchange中的“redraw()”看不到Processing.js的redraw()函数，因此更改输入字段中的值没有任何效果。如果“redraw()”更改为“alert('changed!')”，则会弹出窗口显示“changed!”，因此我们知道问题不是 onchange，而是无法从处理.js 文件。

Wolfram-automata.html

<p>Rule: <input onchange="redraw()" id="rule" value="110" size="4" /></p>
<canvas id="sketch" data-processing-sources="wolfram-automata.pjs"></canvas>
<script src="processing-1.1.0.min.js"></script>

Wolfram-automata.pjs

processing.setup = function () {
    size(bounds, steps);
    background(white);

    rule = parseInt(document.getElementById("rule").value, 10);

    currentState = initState(bounds);
    rule = bits(rule);
}

processing.draw = function () {
    drawState(currentState, currentStep);
    currentState = step(currentState, rule);
    currentStep++;

    if (currentStep >= steps) { noLoop(); }
}

function redraw() {
    println("Redrawing");

    noLoop();

    currentState = [];
    currentStep;

    processing.setup();

    loop();
}

Answer 1

这可能是一个范围界定问题。尝试在窗口上显式设置重绘。

而不是：

function redraw() { ...

尝试：

window.redraw = function() { ...

Answer 2

也许您应该首先包含 processing-1.1.0.min.js，因为此时 processing 尚未在 wolfram-automata.pjs 内定义。

<script src="processing-1.1.0.min.js"></script>
<canvas data-processing-sources="wolfram-automata.pjs"></canvas>