js颜色调试器
1 /* ColorTestViewer 颜色调试器
2
3 attribute:
4 onchange: Function; //颜色改变回调; 默认null
5
6 //以下属性不建议直接修改
7 rgb: RGBColor; //rgb模式颜色
8 hsv: Object{h,s,v}; //hsv模式颜色
9 alpha: Number; //透明度
10
11 method:
12 update(): undefined; //更新控件视图 (通常控件被唤出时调用此方法, 前提是在唤出前控件颜色发生了改变)
13 setValue(r, g, b, a): this; //设置控件的颜色
14
15 demo:
16 const ctv = new ColorTestViewer({width: 200})
17 .setValue(0, 0, 255, 1).update(false)
18 .pos(100, 100).render();
19
20 ctv.onchange = v => console.log(v);
21
22 */
23 class ColorTestViewer extends CanvasAnimateRender{
24
25 get value(){
26 return this.rgb.getRGBA(Math.floor(this.alpha * 1000) / 1000);
27 }
28
29 constructor(option = {}){
30 super(option);
31
32 this.rgb = new RGBColor(255);
33 this.hsv = this.rgb.getHSV();
34 this.alpha = 1;
35 this.cae = null;
36 this.onchange = null;
37
38 this.viewSVColor = null;
39 this.viewSVsv = null;
40 this.viewSVCursor = null;
41
42 this.viewHValueBG = null;
43 this.viewHValue = null;
44 this.viewHScroll = null;
45 this.viewHCursor = null;
46
47 this.viewAScroll = null;
48 this.viewACursor = null;
49
50 this.viewColorInfo = null;
51
52 //默认样式
53 if(option.canvas === undefined){
54 const width = option.width || 200, height = option.height || (width * 0.8), margin = 2,
55 h5 = height * 0.5, h1 = height * 0.1, h3 = height * 0.3;
56
57 this.size(width + margin * 2, height + margin * 5);
58
59 this.initViewSVColor(width, h5);
60 this.initViewHScroll(width, h1);
61 this.initViewAScroll(width, h1);
62 this.initViewHValue(h3, h3);
63 this.initViewColorInfo(width - h3, h3);
64
65 this.setViewSVPos(margin, margin);
66 this.setViewHScrollPos(margin, h5 + margin * 2);
67 this.setViewAScrollPos(margin, h5 + h1 + margin * 3);
68 this.setViewHValuePos(margin, h5 + h1 * 2 + margin * 4);
69 this.viewColorInfo.pos(this.viewHValue.box.maxX(), this.viewHValue.box.y);
70
71 this.initList();
72 this.initEvent();
73
74 }
75
76 }
77
78 update(u){
79 if(this.viewSVColor !== null){
80 this.updateViewSVCursor();
81 this.updateViewSVColor();
82 this.updateViewHValue();
83 this.updateViewHCursor();
84 this.updateViewACursor();
85 this.updateViewColorInfo();
86 if(u === true) this.redraw();
87 }
88
89 return this;
90 }
91
92 setValue(r, g, b, a){
93 this.rgb.r = r;
94 this.rgb.g = g;
95 this.rgb.b = b;
96 this.alpha = a;
97 this.rgb.getHSV(this.hsv);
98
99 return this;
100 }
101
102 setValueString(color){
103 if(typeof color !== "string") return this;
104 var _color = this.getColor(color);
105
106 if(_color[0] === "#"){
107 const len = _color.length;
108 if(len === 4){
109 _color = _color.slice(1);
110 this.rgb.setFormHex(parseInt("0x"+_color + "" + _color));
111 }
112 else if(len === 7) this.rgb.setFormHex(parseInt("0x"+_color.slice(1)));
113 this.alpha = 1;
114 this.rgb.getHSV(this.hsv);
115
116 }
117
118 else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
119 const arr = [];
120 for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
121
122 if(is === true){
123 if(_color[k] === "," || _color[k] === ")"){
124 arr.push(parseFloat(v));
125 v = "";
126 }
127 else v += _color[k];
128
129 }
130
131 else if(_color[k] === "(") is = true;
132
133 }
134
135 this.setValue(arr[0], arr[1], arr[2], arr[3] === undefined ? 1 : arr[3]);
136
137 }
138
139 return this;
140 }
141
142 getColor(str){ //检测 str 是否是颜色类型(16进制, rgb, rgba, 英文); 如果是则返回去除掉空格后的字符串颜色(英文则返回对应16进制颜色)
143 var _color = "";
144 for(let k = 0, len = str.length; k < len; k++){
145 if(str[k] === " ") continue;
146 _color += str[k];
147 }
148
149 if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;
150 else{
151 for(let k = 0, len = ColorRefTable.length; k < len; k++){
152 str = ColorRefTable[k];
153 if(str[0] === _color) return str[1];
154 }
155 }
156
157 return "";
158 }
159
160 exit(){
161 if(this.cae){
162 this.onUpSV();
163 this.onUpH();
164 this.onUpA();
165 }
166
167 if(this.domElement.parentElement) this.domElement.parentElement.removeChild(this.domElement);
168
169 }
170
171
172 //event
173 initEvent(){
174
175 const cae = new CanvasAnimateEvent(this);
176
177 //SV
178 const setSV = (pageX, pageY) => {
179 pageX = (pageX - this.domElementRect.x - this.viewSVColor.box.x) / this.viewSVColor.box.w * 100;
180 pageY = (1 - (pageY - this.domElementRect.y - this.viewSVColor.box.y) / this.viewSVColor.box.h) * 100;
181 if(pageX < 0) pageX = 0;
182 else if(pageX > 100) pageX = 100;
183 if(pageY < 0) pageY = 0;
184 else if(pageY > 100) pageY = 100;
185 if(this.hsv.s !== pageX || this.hsv.v !== pageY){
186 this.hsv.s = pageX;
187 this.hsv.v = pageY;
188 this.rgb.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
189 if(typeof this.onchange === "function") this.onchange(this.value);
190 this.updateViewHValue();
191 this.updateViewColorInfo();
192 this.updateViewSVCursor();
193 this.redraw();
194 }
195
196 },
197
198 onMoveSV = event => {
199 setSV(event.pageX, event.pageY);
200 },
201
202 onUpSV = () => {
203 document.body.removeEventListener("pointerup", onUpSV);
204 document.body.removeEventListener("pointermove", onMoveSV);
205 cae.remove(this.viewSVCursor, 'up', onUpSV);
206 cae.remove(this.viewSVCursor, 'move', onMoveSV);
207
208 },
209
210 onDownSV = event => {
211 setSV(event.pageX, event.pageY);
212 cae.add(this.viewSVCursor, "up", onUpSV);
213 cae.add(this.viewSVCursor, "move", onMoveSV);
214 document.body.addEventListener("pointerup", onUpSV);
215 document.body.addEventListener("pointermove", onMoveSV);
216
217 }
218
219 cae.add(this.viewSVColor, "down", onDownSV);
220 cae.add(this.viewSVCursor, "down", onDownSV);
221 this.onUpSV = onUpSV;
222
223
224 //H
225 const setH = (pageX) => {
226 pageX = (pageX - this.domElementRect.x - this.viewHScroll.box.x) / this.viewHScroll.box.w * 360;
227 if(pageX < 0) pageX = 0;
228 else if(pageX > 360) pageX = 360;
229 if(this.hsv.h !== pageX){
230 this.hsv.h = pageX;
231 this.rgb.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
232 if(typeof this.onchange === "function") this.onchange(this.value);
233 this.updateViewHValue();
234 this.updateViewColorInfo();
235 this.updateViewSVColor();
236 this.updateViewHCursor();
237 this.redraw();
238 }
239
240 },
241
242 onMoveH = event => {
243 setH(event.pageX);
244 },
245
246 onUpH = () => {
247 document.body.removeEventListener("pointerup", onUpH);
248 document.body.removeEventListener("pointermove", onMoveH);
249 cae.remove(this.viewHCursor, 'up', onUpH);
250 cae.remove(this.viewHCursor, 'move', onMoveH);
251
252 },
253
254 onDownH = event => {
255 setH(event.pageX);
256 cae.add(this.viewHCursor, "up", onUpH);
257 cae.add(this.viewHCursor, "move", onMoveH);
258 document.body.addEventListener("pointerup", onUpH);
259 document.body.addEventListener("pointermove", onMoveH);
260
261 }
262
263 cae.add(this.viewHScroll, "down", onDownH);
264 cae.add(this.viewHCursor, "down", onDownH);
265 this.onUpH = onUpH;
266
267
268
269 //A
270 const setA = (pageX) => {
271 pageX = (pageX - this.domElementRect.x - this.viewAScroll.box.x) / this.viewAScroll.box.w;
272 if(pageX < 0) pageX = 0;
273 else if(pageX > 1) pageX = 1;
274 if(this.alpha !== pageX){
275 this.alpha = pageX;
276 if(typeof this.onchange === "function") this.onchange(this.value);
277 this.updateViewColorInfo();
278 this.updateViewHValue();
279 this.updateViewACursor();
280 this.redraw();
281 }
282
283 },
284
285 onMoveA = event => {
286 setA(event.pageX);
287 },
288
289 onUpA = () => {
290 document.body.removeEventListener("pointerup", onUpA);
291 document.body.removeEventListener("pointermove", onMoveA);
292 cae.remove(this.viewACursor, 'up', onUpA);
293 cae.remove(this.viewACursor, 'move', onMoveA);
294
295 },
296
297 onDownA = event => {
298 setA(event.pageX);
299 cae.add(this.viewACursor, "up", onUpA);
300 cae.add(this.viewACursor, "move", onMoveA);
301 document.body.addEventListener("pointerup", onUpA);
302 document.body.addEventListener("pointermove", onMoveA);
303
304 }
305
306 cae.add(this.viewAScroll, "down", onDownA);
307 cae.add(this.viewACursor, "down", onDownA);
308 this.onUpA = onUpA;
309
310 this.cae = cae;
311
312 }
313
314
315 //SV 明度 与 灰度
316 updateViewSVCursor(){
317 this.viewSVCursor.pos(this.hsv.s / 100 * this.viewSVColor.box.w + this.viewSVColor.box.x - this.viewSVCursor.circle.r, (1 - this.hsv.v / 100) * this.viewSVColor.box.h + this.viewSVColor.box.y - this.viewSVCursor.circle.r);
318 }
319
320 updateViewSVColor(){
321 this.viewSVColor.clear().fill(ColorTestViewer.emptyColor.setFormHSV(this.hsv.h, 100, 100).getHexString());
322
323 }
324
325 setViewSVPos(x, y){
326 this.viewSVColor.pos(x, y);
327 this.viewSVsv.pos(x, y);
328 this.updateViewSVCursor();
329 }
330
331 initViewSVColor(width, height){ //*3
332 this.viewSVColor = new CanvasAnimateCustom().size(width, height).rect();
333
334 this.viewSVsv = new CanvasAnimateCustom().size(width, height);
335 const gradientS = this.viewSVsv.linearGradient(0, height, width, height, ColorTestViewer.colorS, true),
336 gradientV = this.viewSVsv.linearGradient(width, height, width, 0, ColorTestViewer.colorV, true);
337 this.viewSVsv.rect().fill(gradientS).fill(gradientV);
338
339 this.viewSVCursor = new CanvasAnimateCustom().size(10, 10);
340 this.viewSVCursor.computeCircle();
341 this.viewSVCursor.arc().stroke("#fff");
342
343 this.list.push(this.viewSVColor, this.viewSVsv, this.viewSVCursor);
344
345 this.setViewSVPos(0, 0);
346 this.updateViewSVColor();
347
348 }
349
350
351 //H 颜色
352 updateViewHValue(){
353 this.viewHValue.clear().fill(this.rgb.getRGBA(this.alpha));
354
355 }
356
357 setViewHValuePos(x, y){
358 this.viewHValueBG.pos(x, y);
359 this.viewHValue.pos(x, y);
360
361 }
362
363 initViewHValue(width, height){ //*2
364 this.viewHValueBG = new CanvasAnimateCustom().size(width, height)
365 .drawTransparentBG(5, 0, 0, width, height);
366
367 this.viewHValue = new CanvasAnimateCustom().size(width, height)
368 .rect();
369
370 this.list.push(this.viewHValueBG, this.viewHValue);
371 this.updateViewHValue();
372
373 }
374
375 updateViewHCursor(){
376 this.viewHCursor.pos(this.hsv.h / 360 * this.viewHScroll.box.w + this.viewHScroll.box.x - this.viewHCursor.circle.r, this.viewHScroll.box.y);
377
378 }
379
380 setViewHScrollPos(x, y){
381 this.viewHScroll.pos(x, y);
382 this.updateViewHCursor();
383 }
384
385 initViewHScroll(width, height){ //*2
386 this.viewHScroll = new CanvasAnimateCustom().size(width, height).rect();
387 this.viewHScroll.fill(this.viewHScroll.linearGradient(0, height, width, height, ColorTestViewer.colorH, true));
388
389 const size = Math.min(width, height);
390 this.viewHCursor = new CanvasAnimateCustom().size(size, size);
391 this.viewHCursor.computeCircle();
392 this.viewHCursor.arc().stroke("#fff");
393
394 this.list.push(this.viewHScroll, this.viewHCursor);
395 this.setViewHScrollPos(0, 0);
396
397 }
398
399
400 //A 透明度
401 updateViewACursor(){
402 this.viewACursor.pos(this.alpha * this.viewAScroll.box.w + this.viewAScroll.box.x - this.viewACursor.circle.r, this.viewAScroll.box.y);
403
404 }
405
406 setViewAScrollPos(x, y){
407 this.viewAScroll.pos(x, y);
408 this.updateViewACursor();
409 }
410
411 initViewAScroll(width, height){ //*2
412 this.viewAScroll = new CanvasAnimateCustom().size(width, height)
413 .drawTransparentBG(5, 0, 0, width, height).rect();
414 this.viewAScroll.fill(this.viewAScroll.linearGradient(0, height, width, height, ColorTestViewer.colorA));
415
416 const size = Math.min(width, height);
417 this.viewACursor = new CanvasAnimateCustom().size(size, size);
418 this.viewACursor.computeCircle();
419 this.viewACursor.arc().stroke("rgb(0,160,255)");
420
421 this.list.push(this.viewAScroll, this.viewACursor);
422 this.setViewAScrollPos(0, 0);
423
424 }
425
426
427 //color text
428 updateViewColorInfo(){
429
430 this.viewColorInfo.clear().text(this.value, "#000000", 12, "center", "center");
431
432 }
433
434 initViewColorInfo(width, height){ //*1
435 this.viewColorInfo = new CanvasAnimateCustom().size(width, height);
436 this.list.push(this.viewColorInfo);
437 this.updateViewColorInfo();
438 }
439
440
441
442 static emptyColor = new RGBColor();
443
444 static colorH = function (){ //颜色渐变
445 const result = [], color = ColorTestViewer.emptyColor;
446 for(let h = 0; h < 6; h++){
447 color.setFormHSV(h/6*360, 100, 100);
448 result.push(color.getHexString());
449 }
450
451 return result;
452 }();
453
454 static colorS = function (){ //饱和度的渐变
455 const result = [];
456 for(let s = 0; s < 100; s++) result.push('rgba(255,255,255,' + (1 - s / 100) + ")");
457 return result;
458 }();
459
460 static colorV = function (){ //明度渐变
461 const result = [];
462 for(let s = 0; s < 100; s++) result.push('rgba(0,0,0,' + (1 - s / 100) + ")");
463 return result;
464 }();
465
466 static colorA = function (){ //透明度渐变
467 const result = [];
468 for(let a = 0; a <= 10; a++) result.push('rgba(0,0,0,' + (a / 10) + ")");
469 return result;
470 }();
471
472 }
部分代码
类API说明
attribute:
onchange: Function(color); //颜色改变回调; 默认null
//以下属性不建议直接修改
rgb: RGBColor; //rgb模式颜色
hsv: Object{h,s,v}; //hsv模式颜色
alpha: Number; //透明度
method:
update(): undefined; //更新控件视图 (通常控件被唤出时调用此方法, 前提是在唤出前控件颜色发生了改变)
setValue(r, g, b, a): this; //设置控件的颜色
demo:
1 const ctv = new ColorTestViewer({width: 200})
2
3 //设置调试器的颜色
4 .setValue(0, 0, 255, 1)
5
6 //更新调试器
7 .update(false)
8
9 //设置元素位置, 渲染画布, 添加到body
10 .pos(100, 100).render();
11
12 //监听调试器的变动
13 ctv.onchange = v => console.log(v);
提取地址: https://pan.baidu.com/s/1TV1j5BeZ7ZhidCq7aQXePA
提取码: 1111
js颜色调试器的更多相关文章
- node.js之调试器
node.js之调试器 1.在命令行窗口中,可以使用"node debug" 命令来启用调试器,代码如下: node debug<需要被执行的脚本文件名> 接下来根据一 ...
- js颜色拾取器
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- firebug调试js时提示调试器未激活处理办法
firebug是web开发中最常用的分析调试软件,不过我今天使用在调试百度在线编辑器UEditor时一直提示调试器未激活. 从使用经验来看不应该啊,我都下了断点了为什么会提示调试器未激活呢!多次载入网 ...
- Node.js 调试器
稳定性: 3 - 稳定 V8 提供了强大的调试工具,可以通过 TCP protocol 从外部访问.Node 内置这个调试工具客户端.要使用这个调试器,以debug参数启动 Node,出现提示: % ...
- 一个不错的在线的js调试器
一个不错的在线的js调试器,可见即可得: http://jsbin.com/
- zend stuido 12.5的插件安装和xdebug调试器的配置和和配置注意
参考: zend stuido 12.5的插件安装 zend 12.5 安装插件是按类别进行分类了的, 而且是在欢迎 界面就可以直接安装, 安装后,要重启zend才能生效 版式设计的一个基本点就是: ...
- iOS LLDB调试器和断点调试
技巧一:运行时修改变量的值 你以前怎么验证是不是某个变量的值导致整段程序不能正常工作?修改代码中的变量的值,然后cmd+r重新启动app?现在你不需要这么做了,只需要设置一个断点,当程序在这进入调试模 ...
- iOS LLDB调试器
随着Xcode 5的发布,LLDB调试器已经取代了GDB,成为了Xcode工程中默认的调试器.它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.LLDB为Xcode提供了底层调试环 ...
- Visual Studio图形调试器详细使用教程(基于DirectX11)
前言 对于DirectX程序开发者来说,学会使用Visual Studio Graphics Debugger(图形调试器)可以帮助你全面了解渲染管线绑定的资源和运行状态,从而确认问题所在.现在就以我 ...
随机推荐
- 2022DASCTF X SU 三月春季挑战赛 Calc
查看代码 #coding=utf-8 from flask import Flask,render_template,url_for,render_template_string,redirect,r ...
- Python窗口学习之监听窗口变化触发函数
在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...
- java中为什么把Checked Exception翻译成受检的异常？
6.Checked Exception(受检的异常) 马克-to-win:为什么我大胆的把Checked Exception翻译成受检的异常?因为这类异常,编译器检查发现到它后会强令你catch它或t ...
- 大数据学习之路之ambari的安装
之前按照正常方式安装的hbase不能插入数据 所以今天来尝试下ambari能不能行 已经打了快照 如果不能还能恢复之前的样子
- java重载时自动转换咋回事？举例说明
当一个重载的方法被调用时,Java在调用方法的参数和方法的自变量之间寻找匹配. 但是,这种匹配并不总是精确的.只有在找不到精确匹配时,Java的自动转换才会起作用. (如果定义了test(int ...
- Hyperledger Fabric无系统通道启动及通道的创建和删除
前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织,但目前为止,我们启动 orderer 节点的方式都是通过系统通道的方式,这样自带系 ...
- MySql创建分区
一.Mysql分区类型 1.RANGE 分区:基于属于一个给定连续区间的列值,把多行分配给分区. 2.HASH分区:基于用户定义的表达式的返回值来进行选择的分区,该表达式使用将要插入到表中的这些行的列 ...
- android软件简约记账app开发day09-主页面模块，收支记账信息的展示
android软件简约记账app开发day09-主页面模块,收支记账信息的展示 我们第一天已经绘制了记账条目的界面,也在主界面设置了LietView来展示记账条目,今天来实现记账后再主界面的展示效果 ...
- vue--vuex 中 Modules 详解
前言 在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理.于是Vuex中就存在了另 ...
- js 修改页面样式的两种方式
1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...