高效率种子填充算法

高效率种子填充算法

文章同时发布于:https://pengfeixc.com/blogs/minicode/react-paint-tool
最近写了一个画板小程序,为了实现画板的填充功能,研究了一下图形学填充算法。我在网上查找了大量的资料,最终找到了一个效率很高的填充算法。可以在minicode看到我的画板程序,测试下填充功能的速度。

下面我将讲述我的算法实现过程。

一. 种子填充算法(flood fill or seed fill)

网上有很多讲解种子填充算法的,大家一搜就知道有4联通的方式和8联通的方式。但是4联通和8联通的算法效率太低了,根本无法用来实现画板的填充功能。
4联通的算法,我简单描述一下:

  1. 从一个像素点出发,将其入栈。
  2. 处理栈顶的像素点,弹栈。
  3. 判断这个像素点的上、下、左、右的4个像素点是否满足填充要求,若满足将其染色,并入栈。
  4. 继续弹栈,重复2和3步骤,直至栈为空。

8联通算法与4联通算法同理。
至于它们的代码,比较简单,我就偷懒不写出来了。

二. 高效率的填充算法(efficient flood fill)

这个算法是我在一篇文章中看到的,我不知道这个算法是谁想出来的,但是它的效率经过我的实践确实很高,满足我的要求。
填充算法的目标是用新的填充颜色填充所有与起始像素相连的同颜色的像素。假设有如图3x4的像素块,填充起始点在(1,3)。创建一个栈,将起始点入栈。

flood-fill

var pixelStack = [[1, 3]];

接下来执行弹栈操作,栈顶元素为(1, 3),也就是起始点。我们从这个点开始向上走,直到走到边界或者与起始点颜色不同的像素点时停止。

flood-fill

然后再回头向下开始,填充颜色,首先将(1, 0)点填充为红色并设置两个布尔变量reachLeft和reachRight为false。

flood-fill

var reachLeft = false;
var reachRight = false;

这时判断其左边的像素点是否与起始点颜色相同,如果相同,将左侧像素点入栈并将reachLeft设置为true。因为此时右边为黑色,与起始点颜色不一样,所以不需要将右边的像素入栈。

flood-fill

reachLeft = true;

继续向下走,将下面一个像素染成红色。

flood-fill

此时因为reachLeft为true,reachRight为false,所以左侧不需要判断,只需要判右侧是否满足填充像素的要求,可以看到右侧像素点与起始点像素颜色相同,所以将其入栈,并将reachRight设置为true。

flood-fill

reachRight = true;

继续,此时左侧为黑色方块与起始点像素色颜色不同,我们将reachLeft重置为false。

flood-fill

reachLeft = false;

继续将下一个像素点染色。

flood-fill

此时,其左侧像素(0, 3)与起始颜色相同,并且reachLeft为false,所以将(0, 3)入栈。

flood-fill

继续染色,直到到达边界或者下一个像素点颜色与起始点颜色不同。

flood-fill

这样一轮染色就完成了,我们需要继续弹栈直至清空栈内元素,所以接下来从(0, 3)开始,重复上述过程。

flood-fill

下图是接下来所有的染色过程。

flood-fill

一个更复杂的例子:

flood-fill

三.代码

可以在我的画板程序中的colorFill.ts文件中找到我的实现代码。

画板:https://github.com/pengfeiw/react-paint

(完)

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
种子填充算法,自己写的,希望对大家有用 // 种子法View.cpp : implementation of the CMyView class // #include "stdafx.h" #include "种子法.h" #include "种子法Doc.h" #include "种子法View.h" #ifdef _DEBUG #define new DEBUG_NEW #undef THIS_FILE static char THIS_FILE[] = __FILE__; #endif struct point { int x; int y; }p[10]={200,100,100,200,150,100,200,300,250,100,300,200,-1}; point stack[1024000]; int top; void push(int x,int y) { if(top>1024000)exit(0); stack[top].x=x; stack[top].y=y; top++; } void pop(int &x,int &y) { if(top==0) exit(0); x=stack[top-1].x; y=stack[top-1].y; top--; } void gettop(int &x,int &y) { if(top==0) exit(0); x=stack[top-1].x; y=stack[top-1].y; } ///////////////////////////////////////////////////////////////////////////// // CMyView IMPLEMENT_DYNCREATE(CMyView, CView) BEGIN_MESSAGE_MAP(CMyView, CView) //{{AFX_MSG_MAP(CMyView) ON_WM_LBUTTONDOWN() //}}AFX_MSG_MAP // Standard printing commands ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint) ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint) ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview) END_MESSAGE_MAP() ///////////////////////////////////////////////////////////////////////////// // CMyView construction/destruction CMyView::CMyView() { // TODO: add construction code here } CMyView::~CMyView() { } BOOL CMyView::PreCreateWindow(CREATESTRUCT& cs) { // TODO: Modify the Window class or styles here by modifying // the CREATESTRUCT cs return CView::PreCreateWindow(cs); } ///////////////////////////////////////////////////////////////////////////// // CMyView drawing void CMyView::OnLButtonDown(UINT nFlags, CPoint point) { int x,y; CClientDC dc(this); // TODO: Add your message handler code here and/or call default origin=point; push(origin.x,origin.y); while(top!=0) { pop(x,y); if(dc.GetPixel(x-1,y)!=0)//不等于边界色 { dc.SetPixel(x-1,y,0);//染成黑色 push(x-1,y); //加入栈 } if(dc.GetPixel(x+1,y)!=0) { dc.SetPixel(x+1,y,0); push(x+1,y); } if(dc.GetPixel(x,y-1)!=0) { dc.SetPixel(x,y-1,0); push(x,y-1); } if(dc.GetPixel(x,y+1)!=0) { dc.SetPixel(x,y+1,0); push(x,y+1); } } CView::OnLButtonDown(nFlags, point); } void CMyView::OnDraw(CDC* pDC) { CClientDC dc(this); dc.TextOut(1,5,"请为每个区选种子,务必在图形内"); CMyDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); int i; for(i=0;p[i+1].x!=-1;i++) { dc.MoveTo(p[i].x,p[i].y); dc.LineTo(p[i+1].x,p[i+1].y); } dc.MoveTo(p[i].x,p[i].y); dc.LineTo(p[0].x,p[0].y); // TODO: add draw code for native data here } ///////////////////////////////////////////////////////////////////////////// // CMyView printing BOOL CMyView::OnPreparePrinting(CPrintInfo* pInfo) { // default preparation return DoPreparePrinting(pInfo); } void CMyView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/) { // TODO: add extra initialization before printing } void CMyView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/) { // TODO: add cleanup after printing } ///////////////////////////////////////////////////////////////////////////// // CMyView diagnostics #ifdef _DEBUG void CMyView::AssertValid() const { CView::AssertValid(); } void CMyView::Dump(CDumpContext& dc) const { CView::Dump(dc); } CMyDoc* CMyView::GetDocument() // non-debug version is inline { ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CMyDoc))); return (CMyDoc*)m_pDocument; } #endif //_DEBUG ///////////////////////////////////////////////////////////////////////////// // CMyView message handlers
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值