mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
5f719fecde
Displays the last six selected colors. BUG= R=abarth@chromium.org Review URL: https://codereview.chromium.org/897683002
89 lines
2.2 KiB
Plaintext
89 lines
2.2 KiB
Plaintext
<!--
|
|
// Copyright 2015 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
|
|
<sky-element name="color-wheel"
|
|
attributes="color:string"
|
|
on-pointerdown="handlePointerDown">
|
|
<template>
|
|
<style>
|
|
img {
|
|
min-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
<img class="color-wheel-img" src="color-wheel.png">
|
|
</template>
|
|
<script>
|
|
function hsvToRgb(h, s, v) {
|
|
var i = Math.floor(h * 6);
|
|
var f = h * 6 - i;
|
|
var p = v * (1 - s);
|
|
var q = v * (1 - f * s);
|
|
var t = v * (1 - (1 - f) * s);
|
|
var r, g, b;
|
|
switch (i % 6) {
|
|
case 0: r = v, g = t, b = p; break;
|
|
case 1: r = q, g = v, b = p; break;
|
|
case 2: r = p, g = v, b = t; break;
|
|
case 3: r = p, g = q, b = v; break;
|
|
case 4: r = t, g = p, b = v; break;
|
|
case 5: r = v, g = p, b = q; break;
|
|
}
|
|
return {
|
|
r: Math.floor(r * 255),
|
|
g: Math.floor(g * 255),
|
|
b: Math.floor(b * 255)
|
|
};
|
|
}
|
|
|
|
function xyToRgb(x, y, radius) {
|
|
var rx = x - radius;
|
|
var ry = y - radius;
|
|
var d = radius * radius;
|
|
if (rx * rx + ry * ry > d)
|
|
return undefined;
|
|
var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
|
|
var s = Math.sqrt(d) / radius;
|
|
return hsvToRgb(h, s, 1);
|
|
}
|
|
|
|
function toHexString(n) {
|
|
var s = Number(n).toString(16).toUpperCase();
|
|
return (s.length == 1) ? "0" + s : s;
|
|
}
|
|
|
|
function rgbToString(rgb) {
|
|
return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b);
|
|
}
|
|
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
super.created();
|
|
this.color = "#xFF00FF";
|
|
this.colorChanged = function() {
|
|
this.dispatchEvent(new CustomEvent('color-change', {
|
|
bubbles: true,
|
|
detail: this.color,
|
|
}));
|
|
};
|
|
}
|
|
updateColor(event) {
|
|
var bounds = event.target.getBoundingClientRect();
|
|
var x = event.x - bounds.left;
|
|
var y = event.y - bounds.top;
|
|
var radius = Math.min(bounds.width, bounds.height) / 2.0;
|
|
var rgb = xyToRgb(x, y, radius);
|
|
if (rgb)
|
|
this.color = rgbToString(rgb);
|
|
}
|
|
handlePointerDown(event) {
|
|
this.updateColor(event);
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|