[英]CSS rotation animation issue: creating a smooth transition from 270 degrees to -90 degrees
[英]Why is it necessary to add 270 degrees to correct rotation?
計算兩點之間的角度似乎與 DOM 旋轉不一致
我已經編寫了代碼來計算兩點之間的角度。 我使用 HTML 畫布在點之間繪制一條線,我還顯示了一個帶有箭頭字符的 DOM 元素,我旋轉它以指示向量的方向。 我不清楚為什么需要添加 270 度來校正箭頭的位置。
請參閱下面的這一行: radians += (3 * Math.PI / 2); // why 270 degrees?
radians += (3 * Math.PI / 2); // why 270 degrees?
class Vector {
constructor(x=0, y=0) {
this.x = x;
this.y = y;
}
angleFromVectors(anchor, point) {
return Math.atan2(anchor.y - point.y, anchor.x - point.x);
}
draw(v1, v2) {
let canvas = document.getElementById('canvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.moveTo(v1.x, v1.y);
ctx.lineTo(v2.x, v2.y)
ctx.stroke();
}
}
rotateArrow(degrees) {
let arrow = document.getElementById('arrow');
arrow.style.webkitTransform = 'rotate('+ degrees + 'deg)';
}
}
let v1 = new Vector(180, 180);
let v2 = new Vector(100, 190);
let vector = new Vector();
let radians = vector.angleFromVectors(v1, v2);
radians += (3 * Math.PI / 2); // why 270 degrees?
let degrees = radians * (180 / Math.PI);
console.log(`radians: ${radians}, degrees: ${degrees}`);
vector.draw(v1, v2);
vector.rotateArrow(degrees);
Codepen在這里: https ://codepen.io/cjus/pen/bzKvwO
箭頭是字符⬆
。 由於它指向上,如果你想讓它指向左,你需要旋轉它。 你也可以旋轉它-90deg
。
順便說一下,您實際上是將它旋轉262.875deg
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.