Question

我有一个总是指向鼠标方向的图像在某些时候，角度从180deg变为-180deg，如何让图像采用短角度而不是完整的圆圈？

// Find ship angle (Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;).
var mouseAngle = getAngle(FIREFLY.CENTER.X, FIREFLY.CENTER.Y, currentMousePos[0], currentMousePos[1]);

var turnDegrees = mouseAngle - FIREFLY.ANGLE;
var maxDegrees = 5;

console.log(mouseAngle + " " + FIREFLY.ANGLE);

if (turnDegrees > -5 && turnDegrees < 5) {
    // Do nothing.
} else if (turnDegrees < 0) {
    FIREFLY.ANGLE -= 5;
} else {
    FIREFLY.ANGLE += 5;
}

// Set ship direction.
FIREFLY.style.transform = 'rotate(' + (FIREFLY.ANGLE + 90) + 'deg)';

Fiddle

Answer 1

您可以关闭CSS变换，并自行进行插值。

尝试计算鼠标移动时的角度差异并将其添加到总角度，这样角度就不会被绑定到（-180,180）

Answer 2

角度是360度的模数，所以为了避免像359°这样的大转动你选择-1°并避免-359°选择1°

您可以执行类似

的操作

var turnDegrees = (mouseAngle - FIREFLY.ANGLE) ;
if(-540<turnDegrees&&turnDegrees <=-180) turnDegrees+=360;
else if(180<turnDegrees&&turnDegrees<=540) turnDegrees-=360;

但事实证明FIREFLY.ANGLE可以取大值，所以为了避免使用其他if子句，通用公式会更好。这是一个使用modulo

var turnDegrees =  mod(mouseAngle - FIREFLY.ANGLE +180, 360) -180;
function mod(x, value){ // Euclidean modulo
    return x>=0 ? x%value : value+ x%value;
}

plot test

小提琴更新：http://jsfiddle.net/ro9y95b5/5/

达到整圆时如何防止物体旋转360度？

2 个答案: