Question

我正在使用Processing.js处理Paint App。基本上，拖动鼠标时，mouseX和mouseY会保存在名为data[]的对象数组中。之后，paint()函数将运行一个循环，访问data[]数组的每个对象，并在相应的color(data[i].R,data[i].G,data[i].B)坐标之间绘制一行data[i].T和厚度data[i].mouseX and data[i].mouseY 。问题是数组越大，绘制越多，在我的情况下，当data[]数组的长度达到~800个元素时，它将开始滞后，并且随着绘制的越多，数据越来越差。是否有任何调整可以解决滞后问题，还是我必须完全重新考虑该程序？

<!DOCTYPE HTML>
<html>
	<head>
	<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) {
		    strokeWeight(data[i].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);
			fill(0,0,0);
			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>
	<center>
        <canvas id="targetcanvas"width="649" height="600" " style="border: 3px solid black; margin-top=100px;"></canvas>
	</center>
    </body>
</html>

Answer 1

这是Processing.js还是P5.js？无论哪种方式，答案都是一样的。

你基本上有一系列的选择：

没有数据结构，没有撤消：只需在用户执行某些操作时将其直接绘制到画布上，而不是将形状和诸如此类的内容存储在数据结构中。您可以使用PGraphics画布，或者如果您取消对background()的调用，则可以直接绘制到屏幕上。那你就不需要任何数据结构了。这样做的缺点是，一旦它们被绘制，你就无法移除它们。

有些数据结构，有些是撤消：如果您需要撤消某些形状，而不是所有形状，您可以混合使用上述方法和当前方法。您只需存储最后1-10个左右的形状，而不是将所有内容存储在数据结构中。其余形状将直接绘制到PGraphics缓冲区。

大量数据结构，大量撤消：如果您确实需要撤消所有形状，那么您仍然可以使用PGraphics方法，但只能重新绘制所有形状什么东西被删除后的形状。

如何为Paint App优化此Javascript代码？

1 个答案: