Question

我有一个redraw（）函数，用于暂停当前的draw（）循环，从DOM中检索新的初始化值，然后重新开始绘制，就好像值是那些值一样。

但onchange中的“redraw（）”无法看到Processing.js redraw（）函数，因此更改输入字段中的值无效。如果“redraw（）”更改为“alert（'changed！'）”，弹出窗口会显示“已更改！”，因此我们知道问题不是onchange，而是无法从中导入redraw（）函数Processing.js文件。

钨-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>

钨-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>

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

2 个答案: