查看效果请到 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. 在PHP中读取二进制文件

    很多时候,数据并不是用文本的方式保存的,这就需要将二进制数据读取出来,还原成我们需要的格式.PHP在二进制处理方面也提供了强大的支持. 任务 下面以读取并分析一个PNG图像的文件头为例,讲解如何使用P ...

  2. python_57_高阶函数

    变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. def add(a,b,f): return f(a)+f(b) res=add(-3,- ...

  3. shiro学习记录(二)

    1 在项目中应用shiro框架进行认证 第一步:引入shiro框架相关的jar <!-- 引入shiro框架的依赖 --> <dependency> <groupId&g ...

  4. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  5. Ubuntu 下使用虚拟串口进行开发测试

    1. python 工具 #coding = utf-8 import pty import os import select def mkpty(): master1, slave = pty.op ...

  6. 利用PHPExcel 实现excel数据的导入导出(源码实现)

    利用PHPExcel 实现excel数据的导入导出(源码实现) 在开发过程中,经常会遇到导入导出的需求,利用phpexcel类实现起来也是比较容易的,下面,我们一步一步实现 提前将phpexcel类下 ...

  7. Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法

    课程地址: https://study.163.com/course/courseMain.htm?courseId=1004711010 <!DOCTYPE html> <html ...

  8. Linux常见的系統进程

    前言 在日常运维工作中,经常会看到一些奇怪的系统进程占用资源比较高.而且总是会听到业务线同学询问“xxx这个是啥进程啊?咋开启了这么多?” 而这些系统级的内核进程都是会用中括号括起来的,它们会执行一些 ...

  9. Linux程序编辑器习题汇总

    简答题部分: 1.我用vi开启某个档案后,要在第34行向右移动15个字符,应该在一般模式中下达什么指令? (1)先按下34G到34行:(2)再按下[l5+向右键],或[l5l]亦可! 2.在vi开启的 ...

  10. Eclipse 读取config目录下文件

    最近在一个项目,在项目下新建了一个config配置文件夹,添加一个配置文件config.properties. 使用classpath:config.properties方式加载配置文件, 具体实现代 ...