|
|
@@ -0,0 +1,89 @@
|
|
|
+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()});`;
|
|
|
+};
|
pavlovm503
