mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
819d14cbd2
I haven't removed the JS color picker code yet. R=abarth@chromium.org Review URL: https://codereview.chromium.org/940233002
97 lines
2.4 KiB
Plaintext
97 lines
2.4 KiB
Plaintext
#!mojo mojo:sky_viewer
|
|
<!--
|
|
// 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.
|
|
-->
|
|
<sky>
|
|
<style>
|
|
#chooser {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 5%;
|
|
}
|
|
#color-wheel {
|
|
min-width: 100%;
|
|
height: auto;
|
|
}
|
|
#color-sample {
|
|
margin: 5%;
|
|
padding: 10%;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<div id="chooser">
|
|
<img id="color-wheel" src="color-wheel.png"/>
|
|
<h1 id="color-sample">Select Color</h1>
|
|
</div>
|
|
<script>
|
|
import 'dart:sky';
|
|
import 'dart:math';
|
|
|
|
class RGB {
|
|
final int r;
|
|
final int g;
|
|
final int b;
|
|
const RGB(this.r, this.g, this.b);
|
|
String toString() => "rgb($r, $g, $b)";
|
|
}
|
|
|
|
RGB hsvToRgb(double h, double s, double v) {
|
|
var i = (h * 6).floor();
|
|
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 new RGB((r * 255).floor(), (g * 255).floor(), (b * 255).floor());
|
|
}
|
|
|
|
RGB xyToRgb(x, y, radius) {
|
|
var rx = x - radius;
|
|
var ry = y - radius;
|
|
var d = radius * radius;
|
|
if (rx * rx + ry * ry > d)
|
|
return null;
|
|
var h = (atan2(ry, rx) + PI) / (2 * PI);
|
|
var s = sqrt(d) / radius;
|
|
return hsvToRgb(h, s, 1.0);
|
|
}
|
|
|
|
elt(String id) => document.getElementById(id);
|
|
|
|
void updateColor(event) {
|
|
var bounds = event.target.getBoundingClientRect();
|
|
var x = event.x - bounds.left;
|
|
var y = event.y - bounds.top;
|
|
var radius = min(bounds.width, bounds.height) / 2.0;
|
|
var rgb = xyToRgb(x, y, radius);
|
|
if (rgb != null) {
|
|
var ccsColor = rgb.toString();
|
|
elt("color-sample").style["background-color"] = ccsColor;
|
|
}
|
|
}
|
|
|
|
void selectColor(event) {
|
|
var ccsColor = elt("color-sample").style["background-color"];
|
|
print(ccsColor);
|
|
}
|
|
|
|
void main() {
|
|
elt("color-wheel").addEventListener("pointerdown", updateColor);
|
|
elt("color-sample").addEventListener("pointerdown", selectColor);
|
|
elt("color-sample").style["background-color"] = "rgb(0, 209, 255)";
|
|
}
|
|
</script>
|
|
</sky>
|