blob: c33ded812a3a8728a86f0381a400f2ba336cfbb6 (
plain)
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
|
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Wadsworth/Wheatstone</title>
<style>
.pointer {
transform: none;
transform-origin: 50% 50%;
}
.pointer path, .pointer circle {
stroke: black;
stroke-width: 1px;
}
.pointer circle {
fill: transparent;
}
</style>
<script>
let dragging = null;
let svg = null;
function start(element) { dragging = element; }
function stop() { dragging = null; }
function update(element, angle) {
element.dataset.angle = angle;
element.style.transform = `rotate(${Math.floor(angle)}deg)`;
}
function onmove(event) {
if (dragging) {
const rect = svg.getBoundingClientRect();
const x = event.clientX - (rect.left + rect.width / 2);
const y = event.clientY - (rect.top + rect.height / 2);
let theta = Math.atan2(y, x);
theta = theta > 0 ? theta : theta + Math.PI * 2;
let angle = theta * 180.0 / Math.PI;
const current = Number(dragging.dataset.angle);
const diff = (angle - current) % 360.0;
update(dragging, current + diff);
svg.querySelectorAll(".pointer").forEach((x) => {
if (x != dragging) {
const ratio = Number(dragging.dataset.ratio) / Number(x.dataset.ratio);
update(x, Number(x.dataset.angle) + diff * ratio);
}
});
}
}
</script>
<svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
<g data-angle="0" data-ratio="4" class="pointer">
<path d="M49 50 L80 50 Z"/>
<circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
</g>
<g data-angle="0" data-ratio="-1" class="pointer">
<path d="M49 50 L70 50 Z"/>
<circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
</g>
</svg>
|
