我試圖將直線上的箭頭可以旋轉。我有一些困難提出使用正確的公式。我知道它應該可能涉及正弦和餘弦,但我已經嘗試過各種配置,並且無法獲得可行的結果。直線移動旋轉的箭頭
rotateNumber就像-1一個整數(1個左旋轉),0(無旋轉),1(1個右旋轉)等
rotateAngle默認爲10度。
下面的代碼,將箭頭:
if (arrowMoving) {
var rAngle = rotateAngle * rotateNumber;
var angleInRad = rAngle * (Math.PI/180);
var stepSize = 1/20;
arrowX += stepSize * Math.cos(angleInRad);
arrowY += stepSize * Math.sin(angleInRad);
DrawArrowTranslate(arrowX, arrowY);
requestAnimFrame(render);
} else {
DrawArrow();
arrowX = 0;
arrowY = 0;
}
這裏的繪製和翻譯的箭頭,代碼:
function DrawArrowTranslate(tx, ty) {
modelViewStack.push(modelViewMatrix);
/*
var s = scale4(0.3, -0.7, 1);
var t = translate(0, -4, 0);
*/
var s = scale4(0.3, -0.7, 1);
var t = translate(0, -5, 0);
var t2 = translate(0 + tx, 1 + ty, 0)
// rotate takes angle in degrees
var rAngle = rotateAngle;
var r = rotate(rAngle, 0, 0, 1);
var m = mult(t, r);
var m = mult(m, t2);
modelViewMatrix = mat4();
modelViewMatrix = mult(modelViewMatrix, m);
modelViewMatrix = mult(modelViewMatrix, s);
/*
// update bounding box
arrowBoundingBox.translate(0, -5);
arrowBoundingBox.rotate(rAngle);
arrowBoundingBox.translate(0, 1);
arrowBoundingBox.scale(0.3, -0.7);
*/
gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));
gl.drawArrays(gl.LINE_STRIP, 1833, 4);
gl.drawArrays(gl.LINE_STRIP, 1837, 4);
modelViewMatrix = modelViewStack.pop();
}
注意:考慮單位圓以及正向角度是如何逆時針旋轉的,從直接指向裂縫開始。 – Hallsville3
我已經改變它來消除rotateNumber,它仍然無法正常工作。如果完全指向左側,它會起作用,否則它會向錯誤的方向移動。例如,在沒有旋轉的情況下,它會直接向右移動而不是直線移動。 – Suerg
在你的座標系統中,左上角是(0,0) – Hallsville3