[canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能
查看效果请到 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中魔术棒或者画图中油漆桶的功能的更多相关文章
- [canvas入坑2]模糊效果
查看效果请到 http://philippica.github.io/ 点击blur 模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算 ...
- [canvas入坑1]canvas 画布拖拽效果
查看效果请到 http://philippica.github.io/ 点击drag 和上一篇画图很像,所以有些部分做了省略 当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点 ...
- [canvas入坑0] Jquery + HTML5 做最简易的画板
查看效果请到 http://philippica.github.io/ 点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE h ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 入“坑”mybatis后如何挣脱?
既然已经入"坑"mybatis了,你竟然还想着挣脱,我是不会让你挣脱的~ 当然我有一个算是挣脱的办法.那就是把它学会.理解透.这样我们也就不用在坑里一直徘徊,也算得上是一种挣脱吧! ...
- ps中图层混合模式、多图层叠加、不透明度、填充、图层样式详解
图像领域中,通过进行一下想法的时候,都要通过用ps看下是不是合理,而ps中图层是必用的一个功能,下面详解一下图层有关的叠加原理. 基本顺序是图层从下往上继续, 先计算图层的填充,再计算样式.最后计算不 ...
- 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
- python函数中把列表(list)当参数时的"入坑"与"出坑"
在Python函数中,传递的参数如果默认有一个为 列表(list),那么就要注意了,此处有坑!! 入坑 def f(x,li=[]): for i in range(x): li.append(i*i ...
- eclipse中导入外部包却无法查看对应源码或Javadoc的入坑指南
eclipse中导入外部包却无法查看对应源码或Javadoc的 入坑指南 出现这个错误的原因是,你虽然导入了.jar包,但没有配置对应的Javadoc或源码路径,所以在编辑器中无法查看源 码和对应AP ...
随机推荐
- fdisk - Linux分区表操作工具软件
总览 fdisk [-u]设备名 fdisk -l [-u] [设备名 ...] fdisk -s分区 ... fdisk -v 描述 硬盘可以被分成一个或多个逻辑磁盘,称为 分区. 这些分区信息都存 ...
- cd ..和cd -
cd ..是返回上一层目录, cd -是返回到上一次的工作目录.
- Maven 虐我千百遍,我待 Maven 如初恋
前言 在如今的互联网项目开发当中,特别是Java领域,可以说Maven随处可见.Maven的仓库管理.依赖管理.继承和聚合等特性为项目的构建提供了一整套完善的解决方案,可以说如果你搞不懂Maven,那 ...
- 基于CXF开发crm服务
1 基于CXF开发crm服务 1.1 数据库环境搭建 1.2 web项目环境搭建 第一步:创建动态web项目 第二步:导入CXF相关jar包 第三步:配置web.xml <context-par ...
- quartz调度
http://www.cnblogs.com/lzrabbit/archive/2012/04/14/2446942.html
- 十五、MySQL DELETE 语句
MySQL DELETE 语句 你可以使用 SQL 的 DELETE FROM 命令来删除 MySQL 数据表中的记录. 你可以在 mysql> 命令提示符或 PHP 脚本中执行该命令. 语法 ...
- 【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 ...
- SQLite3 of python
SQLite3 of python 一.SQLite3 数据库 SQLite3 可使用 sqlite3 模块与 Python 进行集成,一般 python 2.5 以上版本默认自带了sqlite3模块 ...
- mysql密码正确却提示错误, 不输入密码反而能登录
今天部署阿里云服务器, 发现之前可以连接的mysql服务器突然连接不上了, 密码我确认是正确的,但登录时就是显示密码错误, 很崩溃, 差点气得我就想重装mysql了. 好在经过几番苦寻找到了以下能解决 ...
- C++ vector 实例
#include <string> #include <iostream> #include <vector> #include <algorithm> ...