直线移动旋转的箭头

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

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

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

来源

2017-10-14 Suerg

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

来源

2017-10-14 20:51:25 Hallsville3

注意：考虑单位圆以及正向角度是如何逆时针旋转的，从直接指向裂缝开始。 – Hallsville3

我已经改变它来消除rotateNumber，它仍然无法正常工作。如果完全指向左侧，它会起作用，否则它会向错误的方向移动。例如，在没有旋转的情况下，它会直接向右移动而不是直线移动。 – Suerg

在你的坐标系统中，左上角是（0,0） – Hallsville3

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

来源

2017-10-14 22:17:41 Suerg

太棒了！我想知道这是否与翻译被Webgl一路上的某些事情搞砸了。我很高兴你得到它的工作 – Hallsville3

旋转之后或之前应用翻译是实现变革的两个重要途径。但在第一种情况下（旋转后翻译：T * R），它执行我们称之为局部空间中的平移，所以说：沿着矩阵轴，由旋转修改的轴。这有时非常有用。 – 2017-10-15 14:04:01

直线移动旋转的箭头

回答

相关问题