0
私はProcessing.jsを使用してペイントアプリケーションに取り組んでいます。基本的には、マウスをドラッグするとmouseXとmouseYがdata[]というオブジェクトの配列に保存されます。その後、paint()関数は、data[]配列のすべてのオブジェクトにアクセスするループを実行し、対応するdata[i].mouseX and data[i].mouseY座標の間にcolor(data[i].R,data[i].G,data[i].B)と厚さdata[i].Tの線を描画します。問題は、描画するほど配列が大きくなり続け、私の場合はdata[]配列の長さが〜800要素に達すると遅延が始まり、描画を続けるほど悪化し続けるということです。遅れを修正する微調整や、プログラムを完全に再考する必要はありますか？このJavascriptコードをペイントアプリケーションに最適化するにはどうすればよいですか？
<!DOCTYPE HTML>
<html>
\t <head>
\t <script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script type="text/processing" data-processing-target="targetcanvas">
void setup() {
size(649, 600);
}
background(255,255,255);
var r=0;
var g=0;
var b=0;
var data = [];
var mousex;
var mousey;
var thickness=31;
var painting = false;
var counter=0;
var x;
var paint = function() {
background(255, 255, 255);
for(var i=1;i<data.length;i++){
if (data[i-1].mousex && data[i].mousex) {
\t \t strokeWeight(data[i].T);
\t \t stroke(data[i].R, data[i].G, data[i].B);
line(data[i].mousex,data[i].mousey,data[i-1].mousex,data[i-1].mousey);
\t \t \t fill(0,0,0);
\t \t \t text(data.length,10,10);
}
};
};
mouseDragged = function(){
painting = true;
data.push({mousex: mouseX, mousey: mouseY, R:r, G:g, B:b, T:thickness});
paint();
counter++;
};
mouseReleased = function() {
x=counter;
counter=0;
if(painting) {
data.push({mousex: 0, mousey: 0});
}
painting = false;
};
mouseOut = function() {
data.push({mousex: 0, mousey: 0});
}
</script>
\t <center>
<canvas id="targetcanvas"width="649" height="600" " style="border: 3px solid black; margin-top=100px;"></canvas>
\t </center>
</body>
</html>
Chromeで開きます。 –
ドライブ上でリンクするだけでなく、コードを共有することもできます。http://jsbin.com/piraniyuzu/edit?html,output –
または、スニペットを作成します。私は他のユーザーのGoogleドライブ –