|
@@ -1,89 +0,0 @@
|
|
|
-function Control(el, {min=0,
|
|
|
- max=100,
|
|
|
- step=1,
|
|
|
- value=100,
|
|
|
- onChange,
|
|
|
- minAngle=0,
|
|
|
- wheelStepRatio=0.01,
|
|
|
- maxAngle=360,
|
|
|
- src='img/1@3x.png'} = {}){
|
|
|
-
|
|
|
- const img = document.createElement('img');
|
|
|
- el.appendChild(img);
|
|
|
- img.src = src;
|
|
|
- const angleRatio = (maxAngle - minAngle) / (max - min);
|
|
|
-
|
|
|
- const getAngle = () => {
|
|
|
- const offset = value - min;
|
|
|
- const angleOffset = offset * angleRatio;
|
|
|
- const angle = minAngle + angleOffset;
|
|
|
- return angle
|
|
|
- };
|
|
|
-
|
|
|
- const updateImg = (angle=getAngle()) => img.style.transform = `rotate(${angle}deg)`;
|
|
|
- updateImg();
|
|
|
-
|
|
|
- const updateValue = (st=step) => {
|
|
|
- value >= max ? value -= max : value < 0 ? value += max : value;
|
|
|
- value += st;
|
|
|
- updateImg();
|
|
|
- };
|
|
|
-
|
|
|
- img.onclick = (e) => {
|
|
|
- console.log(e);
|
|
|
- const {x: imgX, width: imgWidth } = img.getBoundingClientRect();
|
|
|
- const xOnImg = e.clientX - imgX;
|
|
|
- const st = xOnImg > imgWidth/2 ? step: -step;
|
|
|
- updateValue(st);
|
|
|
- };
|
|
|
-
|
|
|
- img.onmousewheel = e => {
|
|
|
- const st = e.deltaY*wheelStepRatio;
|
|
|
- updateValue(st);
|
|
|
- };
|
|
|
-
|
|
|
- const toDeg = rad => (360/(2*Math.PI))*rad;
|
|
|
- let start;
|
|
|
-
|
|
|
- const getAngleByCoords = (x, y) => {
|
|
|
- const {x: imgX, y: imgY, width, height} = img.getBoundingClientRect();
|
|
|
- const xOnImg = e.clientX - imgX - width/2;
|
|
|
- const yOnImg = e.clientY - imgY - height/2;
|
|
|
- return toDeg(Math.atan2(yOnImg, xOnImg));
|
|
|
- };
|
|
|
-
|
|
|
- img.onmousedown = e => {
|
|
|
- start = getAngleByCoords(e);
|
|
|
- e.preventDefault();
|
|
|
- };
|
|
|
- img.onmousemove = e => {
|
|
|
- if (e.buttons && start){
|
|
|
- const angleDiff = getAngleByCoords(e)- startAngle;
|
|
|
- const angle = getAngle();
|
|
|
- updateImg(angle + angleDiff);
|
|
|
- };
|
|
|
- };
|
|
|
- img.onmouseup = e => {
|
|
|
- let inValue = endAngle / ((maxAngle - minAngle) / (max - min))%100;
|
|
|
- value = inValue < 0 ? 75 + (25 + inValue) : inValue;
|
|
|
- updateImg(endAngle);
|
|
|
- };
|
|
|
- this.getValue = function () {
|
|
|
- return Math.floor(value);
|
|
|
- }
|
|
|
-}
|
|
|
-let controlRed = new Control(control1, max = 255);
|
|
|
-let controlGreen = new Control(control2, max = 255);
|
|
|
-let controlBlue = new Control(control3, max = 255);
|
|
|
-
|
|
|
-controlRed.setValue;
|
|
|
-controlGreen.setValue;
|
|
|
-controlBlue.setValue;
|
|
|
-
|
|
|
-let body = document.querySelector('body');
|
|
|
-body.onmousemove = () => { //я запутался и не понял как по другому
|
|
|
- control4.style = `background:rgba(${controlRed.getValue()},${controlGreen.getValue()},${controlBlue.getValue()},1);`;
|
|
|
- control1.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(${controlRed.getValue()},0,0);background:rgb(${controlRed.getValue()},0,0)`;
|
|
|
- control2.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(0,${controlGreen.getValue()},0);background:rgb(0,${controlGreen.getValue()},0)`;
|
|
|
- control3.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(0,0,${controlBlue.getValue()}); background:rgb(0,0,${controlBlue.getValue()});`;
|
|
|
-};
|