正文
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 }
