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

Question

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

但是onchange中的“redraw()”是看不到Processing.js的redraw()函数的，所以改变输入域的值是没有效果的。如果“redraw()”更改为“alert('changed!')”，弹出窗口显示“changed!”，所以我们知道问题不是 onchange，而是无法从Processing.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-自动机.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() { ...