收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3574|回复: 1

JavaScript实战拾色器 模仿PhotoShop中的HSV模式 兼容IE6+,FireFox

[复制链接]
发表于 2010-9-14 00:49:49 | 显示全部楼层 |阅读模式
其实已经有很多很好用的拾色器工具了,但是作为程序员的我们肯定不满足于只是用别人的作品,同时作为PhotoShop的忠实拥护者,我决定模仿PhotoShop的设色器一步一步的实现一个页面中使用的拾色器工具。
当然这个拾色器说起来是一个不完善的拾色器,因为首先我只是模拟了HSV模式,而且只是提供一个直观的界面让你选择一种颜色,然后给出颜色的代码,实际上它并不能从屏幕的任意位置获取你想要的颜色。
点击查看Demo

首先确定一下目标

1.用过PhotoShop的同学肯定很清楚我们的目标:P
2.没用过PhotoShop的同学也不用担心,因为这个拾色器在功能不失强大的同时,使用也非常直观简单。
3.通过用户的点击选择,拾色器会计算出相应的HSV值,RGB值,以及网页上最常用的#XXXXXX十六进制RGB代码。

下面先来看一下拾色器的效果图:


基本目标清楚了,效果图也有了,下面我们要进行我们的第一步工作了,也就是构建我们的colorPicker的Dom结构。


通过这个图片我相信大家应该很清楚拾色器的Dom结构了吧。下面我们看一下拾色器对象的主体代码结构。


  1. var colorPicker = {
  2.         //当前的input对象
  3.         currentInput:null,
  4.         //颜色代码
  5.         colorCode:null,
  6.         //回调函数
  7.         callBackFuncs:[],
  8.         //hsv值
  9.         hsv:{h:0,s:0,v:1},
  10.         //rgb值
  11.         rgb:{r:255,g:255,b:255},
  12.         setInputs:function(inputs){
  13.                 //为传入的input注册点击事件,渲染拾色器
  14.         },
  15.         //初始化拾色器的参数
  16.         init:function(){},
  17.         //记录所有引用的Dom对象
  18.         pickerDoms:{},
  19.         //为创建拾色器Dom对象初始化引用,创建Dom元素是使用cloneNode方法,提高效率
  20.         eles:{},
  21.         //初始化拾色器Dom对象
  22.         initDom:function(){},
  23.         //初始化拾色器Dom对象的事件
  24.         initEvent:function(){},
  25.         //渲染拾色器对象,根据传入的left,top值确定对象的位置
  26.         render:function(left, top){},
  27.         //根据传入的hsv值获取rgb值
  28.         hsv2rgb:function(h, s, v){},
  29.         //获取页面中使用的颜色格式#XXXXXX
  30.         getColorCode:function(hsv){},
  31.         //设置input的值
  32.         setColorCode:function(){},
  33.         //回调的函数
  34.         excuteCallBack:function(){},
  35.         //确定按钮的事件
  36.         confirBtnEvent:function(e){},
  37.         //取消按钮的事件
  38.         cancelBtnEvent:function(e){},
  39.         //释放拾色器
  40.         dispose:function(){},
  41.         //设置饱和度,亮度指针的位置,得到当前选中的颜色
  42.         setSVPointer:function(e){},
  43.         //设置色相指针的位置,得到当前选中的颜色
  44.         setHPointer:function(e){},
  45.         //设置当前状态,颜色代码,背景色,字体色
  46.         setStatus:function(colorCode){}
  47. }
复制代码


根据给出的代码框架大家可以看出,整个拾色器中最重要的就是几个初始化函数,包括:
1.拾色器被重复使用之前要清空之前保存的信息;
2.初始化拾色器的Dom;
3.给Dom初始化事件,包括饱和度亮度指针事件,色相指针事件,确定和取消按钮的事件等。

拾色器的渲染方法(render),其实就是包含了上面提及的几个初始化方法,并最终将拾色器在期望的位置显示出来。

当然整个拾色器的根本hsv模式与rgb模式之间颜色值的转换也是非常重要的,想要进一步了解到同学可以到维基百科查找hsv或者点击这里查看。这里主要讲使用JavaScript的实现,对数学上的问题不做深入分析(水平有限也分析不好,嘿嘿)。

至于两个指针事件的具体实现,以及hsv如何获取以及计算得到这里就不细说了,相信各位同学应该是轻车熟路。

下面说一下饱和度和亮度选择容器中的颜色是如何实现的,其实这个完全可以用JavaScript操作canvas绘图得到,但是,一是当前的IE还没有支持的,另外效率方面也值得商榷,所以这里没有选用这种方法,而是通过使用一个半透明的图片遮罩覆盖在饱和度和亮度都为100%的颜色上实现的效果。请看示意图:


经过本人眼睛的仔细对比没有察觉出于PhotoShop中的区别,也不是很清楚这个方法是否科学,有了解的同学还请给予解答。

下面说一下与页面控件的集成,这个拾色器本身就集成了与页面控件中的type为text的input的集成,使用方法如下:

  1. colorPicker.setInputs(['inputId_1','inputId_2']);
复制代码


参数可以是input控件id的字符串数组,或者直接就是input控件dom引用的数组。

大家可以看到在给input注册点击事件时,设置了一个callBackFuncs的属性,对,这里就是通过这个属性,点击确定按钮时自动调用callBackFuncs数组中的方法,对input进行赋值。

这也就意味着我们辛辛苦苦实现的拾色器并不只是在跟input在一起的时候才能使用,其实它完全可以只通过调用render方法显示在页面中,当然你也可以通过设置callBackFuncs属性,来保证点击确定按钮后会执行你定义好的回调函数。举个例子:

  1. colorPicker.render(20,20);
  2. colorPicker.callBackFuncs.push(function(){
  3.         alert(colorPicker.colorCode);
  4. });
复制代码


这篇文章到这里也就结束了,当然大家肯定会有更好的想法,langmuir提出可以加入alpha控制透明度,其实dispose方法也可以进一步完善一下,这里我就做到这,抛砖引玉。欢迎批评指正。点击查看原文

[[i] 本帖最后由 xiaobaov2 于 2010-9-14 09:37 编辑 ]
发表于 2010-9-14 08:30:56 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-4 02:02 , Processed in 0.078902 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表