-
Notifications
You must be signed in to change notification settings - Fork 0
/
color.html
123 lines (110 loc) · 4.52 KB
/
color.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<title>Color Mixer</title>
<link rel="stylesheet" type="text/css" href="color.css">
</head>
<body>
<canvas id="picker" height=300 width=600
onmousemove="div_move()"
onmousedown="div_down()"
onmouseup="div_up()"></canvas>
<div>
<div class="myblock">
<div id="input1_block" class="color_block" onclick="click_block1()"></div>
<p id="input1_val">FFFFFF</p>
</div>
<span>+</span>
<div class="myblock">
<div id="input2_block" class="color_block" onclick="click_block2()"></div>
<p id="input2_val">FFFFFF</p>
</div>
<span>=</span>
<div class="myblock">
<div id="output_block" class="color_block"></div>
<p id="output_val">FFFFFF</p>
</div>
</div>
</body>
<script src="display.js"></script>
<script>
var canvas_element = document.getElementById("picker");
const canvas_width = canvas_element.width;
const canvas_height = canvas_element.height;
var canvas_context = canvas_element.getContext("2d");
var g_picker_img = canvas_context.createImageData(canvas_width, canvas_height);
var g_picking = 0;
var g_input1_color = [255, 255, 255];
var g_input2_color = [255, 255, 255];
var g_input1_pos = [0, 0];
var g_input2_pos = [0, 0];
var g_selected_block = 0;
document.getElementById("input1_block").classList.add("selected");
prepare_bg();
redraw(null);
function click_block1() {
var input1_block = document.getElementById("input1_block");
var input2_block = document.getElementById("input2_block");
g_selected_block = 0;
input1_block.classList.add("selected");
input2_block.classList.remove("selected");
}
function click_block2() {
var input1_block = document.getElementById("input1_block");
var input2_block = document.getElementById("input2_block");
g_selected_block = 1;
input2_block.classList.add("selected");
input1_block.classList.remove("selected");
}
function div_down() {
g_picking = true;
}
function div_up() {
update_pos();
g_picking = false;
}
function div_move() {
if (g_picking) {
update_pos();
}
}
function update_pos() {
div = document.getElementById("picker")
var pos = get_mouse_pos(div)
picker_on_click(pos);
redraw(pos);
pixel = get_pixel(pos[0], pos[1])
if (pixel) {
var input_block;
var input_val;
if (g_selected_block == 0) {
input_block = document.getElementById("input1_block");
input_val = document.getElementById("input1_val")
g_input1_color = pixel;
g_input1_pos = pos;
} else {
input_block = document.getElementById("input2_block");
input_val = document.getElementById("input2_val")
g_input2_color = pixel;
g_input2_pos = pos;
}
color_hex = rgb_to_hex(pixel[0], pixel[1], pixel[2])
input_block.style.backgroundColor = "#" + color_hex
input_val.innerText = color_hex
var mixed_pixel = mix_color(g_input1_color, g_input2_color);
var output_block = document.getElementById("output_block");
var output_val = document.getElementById("output_val");
color_hex = rgb_to_hex(mixed_pixel[0], mixed_pixel[1], mixed_pixel[2]);
output_block.style.backgroundColor = "#" + color_hex;
output_val.innerText = color_hex
}
}
function get_mouse_pos(object) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = event.offsetX || (e.pageX || e.clientX + scrollX) - object.offsetLeft;
var y = event.offsetY || (e.pageY || e.clientY + scrollY) - object.offsetTop;
return [x, y];
}
</script>
</html>