直线移动旋转的箭头

Question

我试图将直线上的箭头可以旋转。我有一些困难提出使用正确的公式。我知道它应该可能涉及正弦和余弦，但我已经尝试过各种配置，并且无法获得可行的结果。

这里是我的场景用箭头图片和弓

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(); 
} 

Answer 1

你的代码看起来很正确，但你应该避免使用的rotateNumber。您可以使用正面和负面的角度进行旋转，而不是在这里我想象的是错误的原因。 Sin和Cos当然可以处理任何幅度的正面，负面或零角度。 祝你好运！

Answer 2

我想出了这个问题。在旋转之后，我需要翻译之前我正在翻译，因为旋转造成翻译错乱。