我正在使用 socket.io 和画布创建一个协作图像绘制应用程序。根据需要，画布必须经常刷新，目前大约每 50 毫秒刷新一次。我想在应用程序中添加一个填充工具，所以我用我有限的洪水填充知识来创建一个。因为必须传输所有这些数据，所以我将每个填充命令存储为一个简单对象
{
tool: 'fill',
coordinate: {
x: 5,
y: 5
}
fillcolor: '#000'
}
然后每个客户端的画布运行算法并使用“getImageData”和“putImageData”填充每个单独的像素。这是我的实现的（缩写）版本。
function floodfill (start,target_color,fill_color)
{
var pixelStack = [start]; //the stack of pixels to check
while (pixelStack.length > 0)
{
var current = pixelStack[pixelStack.length-1]; //check the last pixel of the pixelstack
pixelStack.pop(); //delete current from stack
if (isSameColor(current)) //matches our target color
{
var mydat = ctx.createImageData(1,1);
mydat.data = new Array();
mydat.data[0] = hexToRGB(fill_color).r; //red
mydat.data[1] = hexToRGB(fill_color).g; //green
mydat.data[2] = hexToRGB(fill_color).b; //blue
mydat.data[3] = 255;
ctx.putImageData(mydat,current.x,current.y);
pixelStack.push(bit(current.x+1,current.y)); //right
pixelStack.push(bit(current.x-1,current.y)); //left
pixelStack.push(bit(current.x,current.y+1)); //up
pixelStack.push(bit(current.x,current.y-1)); //down
}
}
function isSameColor (pixel)
{
var imgdat = ctx.getImageData(pixel.x,pixel.y,1,1).data;
if (imgdat[0]== hexToRGB(target_color).r && imgdat[1]== hexToRGB(target_color).g, imgdat[2]== hexToRGB(target_color).b)
{
return true;
}
else
{
return false;
}
}
function hexToRGB (hex)
{
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
rgb: parseInt(result[1], 16) + ", " + parseInt(result[2], 16) + ", " + parseInt(result[3], 16)
} : null;
}
}
不幸的是，一旦算法运行，画布绘制速度就会慢得离谱。由于我有所有绘画的鼠标坐标细节，我考虑尝试使用矢量来填充它，但我的数学背景还不够强大，无法在没有帮助的情况下完成。
我的应用程序的缓慢部分是什么？我该如何解决？
编辑：正如我在评论中提到的，我已经尝试过只使用一个大的 putImageData（非常慢）和使用 createImageData 而不是 getImageData（稍微快一点）。
EDIT2：每个画笔笔触都存储为一系列 xy 坐标，这些坐标在用户单击和拖动时记录下来。但是，它们不是封闭路径。相反，它们被绘制为一系列线条，当用户抬起鼠标时，它们会移动到。
更新代码以反映我当前的实现。