在BASIC中有一个名为PAINT的命令,如下所示:
PAINT (column,row),color,color-stop
它将x / y坐标作为起始位置,并开始用颜色填充它和周围的像素,直到它达到颜色停止中定义的颜色.值的示例可能是:
PAINT (200,400),4,6
QuickBasic使用0-15表示不同的颜色.这些颜色中的每一种都具有等效的十六进制值.
在PAINT之前的行中,通常有不同(颜色停止)颜色绘制的线条,圆形等,这些颜色设置了PAINT命令实际可以使用多少屏幕空间的边界.
关于如何在JavaScript中完成类似的任何想法?
解决方法
我改编了一个我在这里找到的解决方案:
http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
它的工作方式类似于扫描线,并创建节点,以便在路径被阻止时将扫描返回到不同的方向,这就是“pixelStack”.
一般来说,我所看到的所有好的解决方案都涉及创建一堆被阻止的位置来返回,填充算法的路径基本上是分叉的.
function fill(startX,startY,fcol,bcol,vram){ // This function adapted from code at: // http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/ // and https://github.com/williammalone/HTML5-Paint-Bucket-Tool/blob/master/html5-canvas-paint-bucket.js // copyright 2010 William Malone (www.williammalone.com) // // Thanks William,yours works better than mine did. :) // // Licensed under the Apache License,Version 2.0 (the "License"); // you may not use this fill function except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing,software // distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. // See the License for the specific language governing permissions and // limitations under the License. var pixelStack = [[startX,startY]]; var startColor = point(startX,vram); while(pixelStack.length) { var newPos,x,y,pixelPos,reachLeft,reachRight; newPos = pixelStack.pop(); x = newPos[0]; y = newPos[1]; pixelPos = (y*canvasWidth + x); while(y-- >= 25 && matchStartColor(pixelPos,startColor,vram)) { pixelPos -= canvasWidth; } pixelPos += canvasWidth; ++y; reachLeft = false; reachRight = false; while(y++ < canvasHeight-1 && matchStartColor(pixelPos,vram)) { colorPixel(pixelPos,vram); if(x > 0) { if(matchStartColor(pixelPos - 1,vram)) { if(!reachLeft){ pixelStack.push([x - 1,y]); reachLeft = true; } } else if(reachLeft) { reachLeft = false; } } if(x < canvasWidth-1) { if(matchStartColor(pixelPos + 1,vram)) { if(!reachRight) { pixelStack.push([x + 1,y]); reachRight = true; } } else if(reachRight) { reachRight = false; } } pixelPos += canvasWidth; } } function matchStartColor(pixelPos,vram) { return (vram[pixelPos]==startColor); } function colorPixel(pixelPos,col,vram) { pset(pixelPos%320,Math.floor(pixelPos/320),vram) } }