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 <template> | |
12 <style> | |
13 img { | |
14 min-width: 100%; | |
15 height: auto; | |
16 } | |
17 </style> | |
18 <img class="color-wheel-img" src="color-wheel.png"> | |
19 </template> | |
20 <script> | |
21 function hsvToRgb(h, s, v) { | |
22 var i = Math.floor(h * 6); | |
23 var f = h * 6 - i; | |
24 var p = v * (1 - s); | |
25 var q = v * (1 - f * s); | |
26 var t = v * (1 - (1 - f) * s); | |
27 var r, g, b; | |
28 switch (i % 6) { | |
29 case 0: r = v, g = t, b = p; break; | |
30 case 1: r = q, g = v, b = p; break; | |
31 case 2: r = p, g = v, b = t; break; | |
32 case 3: r = p, g = q, b = v; break; | |
33 case 4: r = t, g = p, b = v; break; | |
34 case 5: r = v, g = p, b = q; break; | |
35 } | |
36 return { | |
37 r: Math.floor(r * 255), | |
38 g: Math.floor(g * 255), | |
39 b: Math.floor(b * 255) | |
40 }; | |
41 } | |
42 | |
43 function xyToRgb(x, y, radius) { | |
44 var rx = x - radius; | |
45 var ry = y - radius; | |
46 var d = radius * radius; | |
47 if (rx * rx + ry * ry > d) | |
48 return undefined; | |
49 var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI); | |
50 var s = Math.sqrt(d) / radius; | |
51 return hsvToRgb(h, s, 1); | |
52 } | |
53 | |
54 function toHexString(n) { | |
55 var s = Number(n).toString(16).toUpperCase(); | |
56 return (s.length == 1) ? "0" + s : s; | |
57 } | |
58 | |
59 function rgbToString(rgb) { | |
60 return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b); | |
61 } | |
62 | |
63 module.exports = class extends SkyElement { | |
64 created() { | |
65 super.created(); | |
66 this.color = "#xFF00FF"; | |
67 this.colorChanged = function() { | |
68 this.dispatchEvent(new CustomEvent('color-change', { | |
69 bubbles: true, | |
70 detail: this.color, | |
71 })); | |
72 }; | |
73 } | |
74 updateColor(event) { | |
75 var bounds = event.target.getBoundingClientRect(); | |
76 var x = event.x - bounds.left; | |
77 var y = event.y - bounds.top; | |
78 var radius = Math.min(bounds.width, bounds.height) / 2.0; | |
79 var rgb = xyToRgb(x, y, radius); | |
80 if (rgb) | |
81 this.color = rgbToString(rgb); | |
82 } | |
83 handlePointerDown(event) { | |
84 this.updateColor(event); | |
85 } | |
86 }.register(); | |
87 </script> | |
88 </sky-element> | |
OLD | NEW |