將表格數據發送到Canvas中的外部pjs草圖

Question

編輯 ：

我做了一些研究，並弄清楚了。 將html更改為：

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

（顯然，我也給了畫布一個ID）

將功能更改為：

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}

原始問題：

當您更改html表單時，我希望我的processing.js草圖中的體積發生變化。 不幸的是，表單無法識別我在畫布中使用的代碼。 我不擅長html，並且不知道該如何解決。

<canvas width="600" height="600" data-processing-sources="spacegame.pde"></canvas>
<!--Later on...-->
    Volume: 0%
<input type="range" min="0" max="1" step="0.01" value="1" onchange="changeVolume(this.value)">100%

在spacegame.pde我有此代碼來處理表單。

function changeVolume(slideAmount){
   volume = slideAmount;
   alert("Volume was changed to "+volume*100+"%");//for testing
}

我的輸入表單沒有看到我的pde文件，所以firebug給了我這個錯誤： ReferenceError: changeVolume is not defined

請告訴我如何使輸入標簽識別畫布代碼。 謝謝。

Answer 1

我解決了我的問題。

我做了一些研究，並弄清楚了。 將html更改為：

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

（顯然，我也給了畫布一個ID）

將功能更改為：

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}