javascript - JavaScript 中的关键事件

Question

我正在开发一个四元数程序，该程序允许用户对右侧的图像进行 3D 旋转，以便它与左侧的图像匹配。 到目前为止，我有一个解决方案，允许用户使用按钮更新 HTML 文件中的 updateRotation():

<span class="rbText">X : </span><input type="button" id="xDn" class="btn" value="-" onclick="updateRotation( -5, 0, 0);" disabled/>
<span class="rbText">&nbsp;</span><input type="button" id="xUp" class="btn" value="+" onclick="updateRotation( 5, 0, 0);" disabled/></br>
<span class="rbText">Y : </span><input type="button" id="yDn" class="btn" value="-" onclick="updateRotation(  0,-5, 0);" disabled/>
<span class="rbText">&nbsp;</span><input type="button" id="yUp" class="btn" value="+" onclick="updateRotation( 0, 5, 0);" disabled/></br>

我知道想要允许用户使用按键输入来更新旋转。

这是我的 JS

var currentId=0;
var maxTrials = 6;
var dateStart, dateEnd;
var value;

//user clicks start to begin trial
function clickedStart(){
    //get the current pattern
    parsePattern(trialData[currentId],currentPattern);
    forceUpdate.right='show';
    forceUpdate.left='show';
    document.getElementById('btnStart').disabled = true; //disable start button
    getKeyInput();
    timerOperation(true); //start clock
}

function parsePattern(unparsedStr, patSet){
    var spl = unparsedStr.split("-");
    var i=0;
    patSet.pattern = spl[i++];
    patSet.xL = spl[i++];
    patSet.yL = spl[i++];
    patSet.zL = spl[i++];
    patSet.xR = spl[i++];
    patSet.yR = spl[i++];
    patSet.zR = spl[i++];
}

function getKeyInput(){
    document.getElementById('canvasRight').onkeyclick = function(e){
        e = e || event
        switch(e.keyCode) {
            case 37: // left
                updateRotation(0,0,5);
                return false
        case 38: // up
                updateRotation(0,5,0);
                return false
        case 39: // right
                updateRotation(5,0,0);
                return false
        case 40: // down
                updateRotation(0,-5,0);
                return false
        }
    }
}

//we apply global rotation and not local rotation
function updateRotation(xRot, yRot,zRot){
    //the rotation is in terms of absolute rotation, so note the quaternion rotation order
    var q = getQuaternion(xRot, yRot, zRot);// get rotation provided by current interaction

    q.multiply(t3DRQuat); //apply to existing orientation   
    q.normalize();        //keep the quaternion normalized... accrual of rounding errors causes drift
    t3DRQuat.copy(q);     //copy the new orientation into t3DRQuat

    t3DRight_shape.quaternion.copy(q);  //apply orientation to shape
    //if there has been one update, then we can enable the end button
    if(document.getElementById('btnEnd').disabled) document.getElementById('btnEnd').disabled = false;
}

还有我的 HTML 文件:

<div id="base" class="main">

<div id="topBand" class="div-band"></div>

<div id="canvasLeft" class="div-float-left">

</div>

<div id="canvasRight" class="div-float-right" tabindex = "0">

</div>

<div id="bottomBand" class="control-band">
    <span class = "controlHelp">Control Panel</span>
    <div id="startControl" class="startDoneTextBox">
        <button type="controlButton" onclick="clickedStart();" id="btnStart"><span class="btn" id="btnStartText">Start!</span></button></br>
        <dir></dir>
        <button type="controlButton" onclick="clickedEnd();" id="btnEnd" disabled><span class="btn" id="btnEndText">Done!</span></button></br>
    </div>

    <div>
    <span class = "guideHelp">Match the 3D shape on the left by rotating the shape on the right</span></br>
    <span class = "userHelp">1. Press Start to load the images</span></br>
    <span class = "userHelp">2. Press the image on the right and use the arrow keys to change position</span></br>
    <span class = "userHelp">3. Press Done, when you think the shapes are matched</span></br>
    </div>

  </div>
</div>

我的 updateRotation() 与按钮方法配合得很好。但当我尝试使用按键时，却什么也没有发生。我的 getKeyInput() 是问题的根源吗？

Answer 1

使用onkeydown或onkeypress或onkeyup而不是onkeyclick。