Вращающийся поворотный круг: рассчитайте угол между двумя векторами, каждый раз перемещая опорную линию.
Я сделал приведенный ниже циферблат, используя popmotion.
const {
listen,
styler,
pointer,
value,
transform,
spring,
inertia,
calc
} = window.popmotion;
const { pipe } = transform;
const dial = document.querySelector(".dial");
const dialStyler = styler(dial);
const dialRotate = value(0, dialStyler.set('rotate'));
const dialRect = dial.getBoundingClientRect();
const dialY = dialRect.top + window.scrollY + (dialRect.height / 2);
const dialX = dialRect.left + window.scrollX + (dialRect.width / 2);
// console.log(dialX, dialY);
const pointA = {x: dialX, y: dialY};
// let pointB = {x: 0, y: 0};
// let angle = 0;
// let prevAngle = 90;
// Angle between origo and pointer
const pointerAngle = o => pointer( o ).pipe(v => {
const pointB = {x: v.x, y: v.y};
const angle = calc.angle(pointA, pointB) + 90;
// console.log('pointA: ', pointA);
// console.log('pointB: ', pointB);
// console.log('angle: ', angle);
// console.log('prevAngle: ', prevAngle);
// console.log('angle - prevAngle: ', angle - prevAngle);
return angle;
});
listen(dial, "mousedown touchstart").start(e => {
e.preventDefault();
// prevAngle = angle;
pointerAngle().start(dialRotate);
});
listen(document, "mouseup touchend").start(() => {
dialRotate.stop();
});
img {
width: 200px;
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<img class="dial" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png">
Как я могу заставить циферблат начинать в том же месте каждый раз, когда я отпускаю и повторно нажимаю?
Как это работает сейчас, при нажатии / касании он перемещается в положение курсора / пальца. Вместо этого я бы хотел начать с того места, где он находится в данный момент, и рассчитать угол оттуда.
Вероятно, это связано с тригонометрией, но я не смог понять это.
1 ответ
Я придумал следующее решение:
Обычно, atan2
(angle
от popmotion
в моем случае) вычисляет угол между двумя точками, предполагая, что горизонтальная ось х проходит через первую точку. Затем он вычисляет угол между осью X и вектором, проходящим через две точки. В конце концов, не имеет смысла говорить об угле между двумя точками, угол существует только между двумя векторами / линиями.
В нашем случае мы хотели, чтобы гипотетическая ось х перемещалась туда, куда мы щелкаем / касаемся, поэтому мы начинаем каждый раз под углом 0, прежде чем вращать циферблат. Очевидным решением было вычислить два atan2
один от начала циферблата до точки, когда мы впервые щелкаем, а другой от начала циферблата до любой точки, в которую перемещается указатель / палец. Тогда мы просто вычитаем первую остановку atan2
от того, который движется.
Вышеуказанное гарантирует, что мы всегда начинаем под углом 0 градусов, когда указываем указатель / палец вниз.
Наконец, мы просто добавляем старый угол к новому, чтобы начать с того места, где мы остановились ранее.
Ниже приведен окончательный код.
PS: В качестве бонуса я добавил инерцию к циферблату, чтобы он продолжал вращаться с пониженной скоростью, пока не остановится, когда мы его отпустим:
const {
listen,
styler,
pointer,
value,
transform,
spring,
inertia,
calc
} = window.popmotion;
const {
pipe
} = transform;
const dial = document.querySelector(".dial");
const dialStyler = styler(dial);
const dialRotate = value(0, dialStyler.set('rotate'));
// Get origin of dial graphic
const dialRect = dial.getBoundingClientRect();
const dialY = dialRect.top + window.scrollY + (dialRect.height / 2);
const dialX = dialRect.left + window.scrollX + (dialRect.width / 2);
// Angle between origo and pointer
const pointA = {
x: dialX,
y: dialY
};
let startSet = false;
let startPoint = {
x: 0,
y: 0
};
let combinedAngle = 0;
let prevAngle = 0;
const pointerAngle = o => pointer(o).pipe(v => {
// Capture exact coordinate click/touch event happens
// Used to calculate angle from that point and to where pointer is dragged
// Also, capture last rotate position, to add to new angle
// Ensures angle starts from where it previously stopped (not from 0 degrees)
if (!startSet) {
startPoint = {
x: v.x,
y: v.y
};
prevAngle = dialRotate.get();
startSet = true;
}
const startAngle = calc.angle(pointA, startPoint) + 90;
const pointB = {
x: v.x,
y: v.y
};
const mainAngle = calc.angle(pointA, pointB) + 90;
const newAngle = mainAngle - startAngle;
combinedAngle = newAngle + prevAngle;
return combinedAngle;
});
listen(dial, "mousedown touchstart").start(e => {
e.preventDefault();
pointerAngle().start(dialRotate);
});
listen(document, "mouseup touchend").start(() => {
startSet = false;
const angle = dialRotate.get();
inertia({
velocity: dialRotate.getVelocity(),
power: 0.8,
from: angle,
}).start(dialRotate);
});
img {
width: 200px;
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<img class="dial" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png">