Question

在BASIC中有一个名为PAINT的命令，如下所示：

PAINT (column, row), color, color-stop

它将x / y坐标作为起始位置并开始用颜色填充它和周围的像素，直到它达到颜色停止中定义的颜色。值的示例可能是：

PAINT (200, 400), 4, 6

QuickBasic使用0-15表示不同的颜色。这些颜色中的每一种都具有等效的十六进制值。

在PAINT之前的行中，通常会绘制不同（颜色停止）颜色的线条，圆圈等，这些颜色设置了PAINT命令实际可以使用的屏幕空间的边界。

关于如何在JavaScript中完成类似内容的任何想法？

Answer 1

我改编了一个我在这里找到的解决方案：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,startY,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,startColor,vram))
              {
                colorPixel(pixelPos,fcol,vram);

                if(x > 0)
                {
                  if(matchStartColor(pixelPos - 1,startColor,vram))
                  {
                    if(!reachLeft){
                      pixelStack.push([x - 1, y]);
                      reachLeft = true;
                    }
                  }
                  else if(reachLeft)
                  {
                    reachLeft = false;
                  }
                }

                if(x < canvasWidth-1)
                {
                  if(matchStartColor(pixelPos + 1,startColor,vram))
                  {
                    if(!reachRight)
                    {
                      pixelStack.push([x + 1, y]);
                      reachRight = true;
                    }
                  }
                  else if(reachRight)
                  {
                    reachRight = false;
                  }
                }

                pixelPos += canvasWidth;
              }
            }

            function matchStartColor(pixelPos,startColor,vram)
            {
              return (vram[pixelPos]==startColor);
            }

            function colorPixel(pixelPos,col,vram)
            {
              pset(pixelPos%320,Math.floor(pixelPos/320),col,vram)
            }
        }

如何用JavaScript编写这个基本的PAINT语句？

1 个答案: