查看效果请到 http://philippica.github.io/  点击fill

这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!!被高大上名词骗了有木有

所以先设置一个阈值var threshold;它的含义和photoshop魔术棒中容差的含义相同,当它等于0时表现出来的功能就是画图的油漆桶

然后进行bfs,从鼠标按下的点开始做

唔,js里面shift unshift pop push这四个Array上的函数天然的让queue和stack这两种数据结构实现了啊有木有,只是不知道这些函数实现的时间复杂度

很low的代码:

    var dx = new Array(0, 0, -1, 1, -1, -1, 1, 1);
var dy = new Array(1, -1, 0, 0, -1, 1, -1, 1);
var threshold = 0;
$('#range').attr("value", 0);
$('#range').unbind();
$('#range').change(function()
{
threshold = parseInt($('#range').val()) * 4;
}); $('#myCanvas').unbind();
$('#myCanvas').click(function(e)
{
var ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
var fillR = 0;
var fillG = 255;
var fillB = 255;
var R = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4];
var G = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4 + 1];
var B = ppImgData.data[(mouseY * ppCanvasWidth + mouseX) * 4 + 2];
var ppQueue = new Array();
var ppVisit = new Array();
var ppField = dx.length;
ppQueue.push(new ppPoint(mouseX, mouseY));
while(ppQueue.length != 0)
{
var u = ppQueue.shift();
for(var i = 0; i < ppField; i++)
{
var X = u.x + dx[i];
var Y = u.y + dy[i];
if(X < 0 || Y < 0 || X > ppCanvasWidth || Y > ppCanvasHeight || ppVisit[Y * ppCanvasWidth + X])continue;
ppVisit[Y * ppCanvasWidth + X] = true;
if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4] - R) > threshold)continue;
if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 1] - G) > threshold)continue;
if(Math.abs(ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 2] - B) > threshold)continue;
ppImgData.data[(Y * ppCanvasWidth + X) * 4] = fillR;
ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 1] = fillG;
ppImgData.data[(Y * ppCanvasWidth + X) * 4 + 2] = fillB;
ppQueue.push(new ppPoint(X, Y));
}
}
context.putImageData(ppImgData, 0, 0);
});

[canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能的更多相关文章

  1. [canvas入坑2]模糊效果

    查看效果请到 http://philippica.github.io/  点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...

  2. [canvas入坑1]canvas 画布拖拽效果

    查看效果请到 http://philippica.github.io/  点击drag 和上一篇画图很像,所以有些部分做了省略 当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点 ...

  3. [canvas入坑0] Jquery + HTML5 做最简易的画板

    查看效果请到 http://philippica.github.io/  点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE h ...

  4. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  5. 入“坑”mybatis后如何挣脱?

    既然已经入"坑"mybatis了,你竟然还想着挣脱,我是不会让你挣脱的~ 当然我有一个算是挣脱的办法.那就是把它学会.理解透.这样我们也就不用在坑里一直徘徊,也算得上是一种挣脱吧! ...

  6. ps中图层混合模式、多图层叠加、不透明度、填充、图层样式详解

    图像领域中,通过进行一下想法的时候,都要通过用ps看下是不是合理,而ps中图层是必用的一个功能,下面详解一下图层有关的叠加原理. 基本顺序是图层从下往上继续, 先计算图层的填充,再计算样式.最后计算不 ...

  7. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  8. python函数中把列表(list)当参数时的"入坑"与"出坑"

    在Python函数中,传递的参数如果默认有一个为 列表(list),那么就要注意了,此处有坑!! 入坑 def f(x,li=[]): for i in range(x): li.append(i*i ...

  9. eclipse中导入外部包却无法查看对应源码或Javadoc的入坑指南

    eclipse中导入外部包却无法查看对应源码或Javadoc的 入坑指南 出现这个错误的原因是,你虽然导入了.jar包,但没有配置对应的Javadoc或源码路径,所以在编辑器中无法查看源 码和对应AP ...

随机推荐

  1. fdisk - Linux分区表操作工具软件

    总览 fdisk [-u]设备名 fdisk -l [-u] [设备名 ...] fdisk -s分区 ... fdisk -v 描述 硬盘可以被分成一个或多个逻辑磁盘,称为 分区. 这些分区信息都存 ...

  2. cd ..和cd -

    cd ..是返回上一层目录, cd -是返回到上一次的工作目录.

  3. Maven 虐我千百遍,我待 Maven 如初恋

    前言 在如今的互联网项目开发当中,特别是Java领域,可以说Maven随处可见.Maven的仓库管理.依赖管理.继承和聚合等特性为项目的构建提供了一整套完善的解决方案,可以说如果你搞不懂Maven,那 ...

  4. 基于CXF开发crm服务

    1 基于CXF开发crm服务 1.1 数据库环境搭建 1.2 web项目环境搭建 第一步:创建动态web项目 第二步:导入CXF相关jar包 第三步:配置web.xml <context-par ...

  5. quartz调度

    http://www.cnblogs.com/lzrabbit/archive/2012/04/14/2446942.html

  6. 十五、MySQL DELETE 语句

    MySQL DELETE 语句 你可以使用 SQL 的 DELETE FROM 命令来删除 MySQL 数据表中的记录. 你可以在 mysql> 命令提示符或 PHP 脚本中执行该命令. 语法 ...

  7. 【java】A local class access to local variables

    内部类参考 A local class has access to local variables. However, a local class can only access local vari ...

  8. SQLite3 of python

    SQLite3 of python 一.SQLite3 数据库 SQLite3 可使用 sqlite3 模块与 Python 进行集成,一般 python 2.5 以上版本默认自带了sqlite3模块 ...

  9. mysql密码正确却提示错误, 不输入密码反而能登录

    今天部署阿里云服务器, 发现之前可以连接的mysql服务器突然连接不上了, 密码我确认是正确的,但登录时就是显示密码错误, 很崩溃, 差点气得我就想重装mysql了. 好在经过几番苦寻找到了以下能解决 ...

  10. C++ vector 实例

    #include <string> #include <iostream> #include <vector> #include <algorithm> ...