Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Get knob functionality working with touch

Browse source
This commit is contained in:
lolabird 2023-11-13 10:10:39 -07:00
commit c5b19c5f5f
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
script.js
View file

@ -51,8 +51,8 @@ rangeKnob.addEventListener("pointerdown", (e) => {
}); });
rangeKnob.addEventListener("touchstart", (e) => { rangeKnob.addEventListener("touchstart", (e) => {
e.preventDefault(); e.preventDefault();
rangeKnob.addEventListener("touchmove", rotateKnob); document.addEventListener("touchmove", rotateKnob);
rangeKnob.addEventListener("touchend", () => { document.addEventListener("touchend", () => {
document.removeEventListener("touchmove", rotateKnob); document.removeEventListener("touchmove", rotateKnob);
}); });
}); });
@ -84,7 +84,15 @@ function rotateKnob(e) {
x: knobBounds.left + knobBounds.width / 2, x: knobBounds.left + knobBounds.width / 2,
y: knobBounds.top + knobBounds.height / 2 y: knobBounds.top + knobBounds.height / 2
}; };
let angle = Math.atan2(e.clientX - knobCenter.x, -(e.clientY - knobCenter.y)) * (180 / Math.PI); let angle //= Math.atan2(e.clientX - knobCenter.x, -(e.clientY - knobCenter.y)) * (180 / Math.PI);
if (e.clientX) {
// Pointer/mouse event
angle = Math.atan2(e.clientX - knobCenter.x, -(e.clientY - knobCenter.y)) * (180 / Math.PI);
} else if (e.touches[0].clientX) {
// Touch event
angle = Math.atan2(e.touches[0].clientX - knobCenter.x, -(e.touches[0].clientY - knobCenter.y)) * (180 / Math.PI);
}
rangeKnob.style.transform = `rotate(${angle}deg)`; rangeKnob.style.transform = `rotate(${angle}deg)`;