OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 // Use of this source code is governed by a BSD-style license that can be |
| 4 // found in the LICENSE file. |
| 5 --> |
| 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
| 7 |
| 8 <sky-element name="color-wheel" |
| 9 attributes="color:string" |
| 10 on-pointerdown="handlePointerDown" |
| 11 on-pointermove="handlePointerMove"> |
| 12 <template> |
| 13 <style> |
| 14 img { |
| 15 min-width: 100%; |
| 16 height: auto; |
| 17 } |
| 18 </style> |
| 19 <img class="color-wheel-img" src="color-wheel.png"> |
| 20 </template> |
| 21 <script> |
| 22 function hsvToRgb(h, s, v) { |
| 23 var i = Math.floor(h * 6); |
| 24 var f = h * 6 - i; |
| 25 var p = v * (1 - s); |
| 26 var q = v * (1 - f * s); |
| 27 var t = v * (1 - (1 - f) * s); |
| 28 var r, g, b; |
| 29 switch (i % 6) { |
| 30 case 0: r = v, g = t, b = p; break; |
| 31 case 1: r = q, g = v, b = p; break; |
| 32 case 2: r = p, g = v, b = t; break; |
| 33 case 3: r = p, g = q, b = v; break; |
| 34 case 4: r = t, g = p, b = v; break; |
| 35 case 5: r = v, g = p, b = q; break; |
| 36 } |
| 37 return { |
| 38 r: Math.floor(r * 255), |
| 39 g: Math.floor(g * 255), |
| 40 b: Math.floor(b * 255) |
| 41 }; |
| 42 } |
| 43 |
| 44 function xyToRgb(x, y, radius) { |
| 45 var rx = x - radius; |
| 46 var ry = y - radius; |
| 47 var d = radius * radius; |
| 48 if (rx * rx + ry * ry > d) |
| 49 return undefined; |
| 50 var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI); |
| 51 var s = Math.sqrt(d) / radius; |
| 52 return hsvToRgb(h, s, 1); |
| 53 } |
| 54 |
| 55 function toHexString(n) { |
| 56 var s = Number(n).toString(16).toUpperCase(); |
| 57 return (s.length == 1) ? "0" + s : s; |
| 58 } |
| 59 |
| 60 function rgbToString(rgb) { |
| 61 return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b); |
| 62 } |
| 63 |
| 64 module.exports = class extends SkyElement { |
| 65 created() { |
| 66 super.created(); |
| 67 this.color = "#xFF00FF"; |
| 68 } |
| 69 updateColor(event) { |
| 70 var bounds = event.target.getBoundingClientRect(); |
| 71 var x = event.x - bounds.left; |
| 72 var y = event.y - bounds.top; |
| 73 var radius = Math.min(bounds.width, bounds.height) / 2.0; |
| 74 var rgb = xyToRgb(x, y, radius); |
| 75 if (rgb) |
| 76 this.color = rgbToString(rgb); |
| 77 } |
| 78 handlePointerDown(event) { |
| 79 this.updateColor(event); |
| 80 } |
| 81 handlePointerMove(event) { |
| 82 this.updateColor(event); |
| 83 } |
| 84 }.register(); |
| 85 </script> |
| 86 </sky-element> |
OLD | NEW |