有没有办法使用 HTML Canvas 和 JavaScript 从一个点填充直到它到达边界？

Posted 2023-03-05

【中文标题】有没有办法使用 HTML Canvas 和 JavaScript 从一个点填充直到它到达边界？

【英文标题】：Is there a way to fill from a point till it hits a border using HTML Canvas and JavaScript?

【发布时间】：2016-03-20 17:21:49

【问题描述】：

我正在使用一些旧的基本代码。它是这样的：

PAINT (200, 200), 2, 10

这实质上意味着：从坐标 X 200 Y 200 开始用深绿色填充一个区域，直到该点达到浅绿色的边界颜色，然后停止填充。

这个想法是，可以使用一种颜色绘制轮廓（例如状态），然后用另一种颜色填充整个轮廓。它不会填满整个屏幕，因为轮廓是填充停止处的颜色。

【问题讨论】：

所以如果你要“填充整个轮廓”，它是在扫描动作中完成的吗？像一行一行？如果是，起点如何确定？它如何处理凹形？

How can I perform flood fill with html Canvas?的可能重复

【参考方案1】：

您可以使用Flood fill 填充区域。它以一个起点（或种子点）作为输入，并通过尝试填充其空邻居来递归地填充该区域。

一个简单的基于堆栈的 javascript 实现：

// Takes the seed point as input
var floodfill = function(point) 
    var stack = Array();
    stack.push(point); // Push the seed
    while(stack.length > 0) 
        var currPoint = stack.pop();
        if(isEmpty(currPoint))  // Check if the point is not filled
            setPixel(currPoint); // Fill the point with the foreground
            stack.push(currPoint.x + 1, currPoint.y); // Fill the east neighbour
            stack.push(currPoint.x, currPoint.y + 1); // Fill the south neighbour
            stack.push(currPoint.x - 1, currPoint.y); // Fill the west neighbour
            stack.push(currPoint.x, currPoint.y - 1); // Fill the north neighbour
        
    
;

isEmpty(point) 是测试点(x, y) 是否被边界颜色（在本例中为浅绿色）填充的函数。

setPixel(point) 用前景色填充点 (x, y)（在您的情况下为深绿色）。

implementation of these functions 是微不足道的，我把它留给你。

上面的实现使用4-connected 邻域。但它可以很容易地扩展到 6 或 8 个相连的社区。​​p>

【讨论】：

感谢您的帮助！有一点我有点困惑，我不明白这怎么知道边界颜色或前景色是什么？

您也可以将背景色和前景色传递给函数，并让您的isEmpty 和setPixel 使用相同的颜色。