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

Tie slider events to knob rotation

Browse source
This commit is contained in:
lolabird 2023-11-11 17:30:17 -07:00
commit bf557942e4
1 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

30
script.js
View file

@ -51,6 +51,7 @@ function resetGrid() {
backColorPicker.value = "#ffffff"; backColorPicker.value = "#ffffff";
colorPicker.value = "#000000"; colorPicker.value = "#000000";
colorValue = "black"; colorValue = "black";
rangeKnob.style.transform = "rotate(0deg)";
getGridDimensions(); getGridDimensions();
} }
@ -63,23 +64,28 @@ function rotateKnob(e) {
y: knobBounds.top + knobBounds.height/2 y: knobBounds.top + knobBounds.height/2
}; };
let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI); let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI);
const degrees = angle * (180 / Math.PI);
const sliderValue = Math.round((degrees / 360) * (rangeKnob.max - rangeKnob.min) + parseFloat(rangeKnob.min));
rangeKnob.style.transform = `rotate(${angle}deg)`; rangeKnob.style.transform = `rotate(${angle}deg)`;
rangeKnob.value = sliderValue;
updateGridSlider(angle);
}
function updateGridSlider(angle) {
const maxRotation = 360;
const minSliderVal = gridSlider.min;
const maxSliderVal = gridSlider.max;
const sliderVal = (angle + maxRotation) % maxRotation;
const normalizedValue = (sliderVal / maxRotation) * (maxSliderVal - minSliderVal) + minSliderVal;
gridSlider.value = normalizedValue;
getGridDimensions(normalizedValue);
} }
function getGridDimensions() { function getGridDimensions(val) {
const min = gridSlider.min; //numGrid = gridSlider.value;
const max = gridSlider.max; numGrid = val;
const value = gridSlider.value;
const percentage = ((value - min) / (max - min)) * 100;
rangeKnob.style.transform = `rotate(${percentage}deg)`;
numGrid = gridSlider.value;
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.lastChild); container.removeChild(container.lastChild);