JS Zeigersperre

Ich habe Probleme mit der Zeigerverriegelung. Mein Code sieht in etwa so aus ...JS Zeigersperre

Canvas = document.createElement('canvas'); 
...(Parameters)... 
document.body.appendChild(Canvas); 

Canvas.requestPointerLock = Canvas.requestPointerLock || 
      element.mozRequestPointerLock || 
      element.webkitRequestPointerLock; 

Canvas.requestPointerLock();

Wenn ich meinen Code starte passiert nichts mit der Zeigersperre (alles andere läuft normal). Der Code, den ich zeigte, ist genau das, was ich für relevant halte, aber wenn mehr Code von meinem Programm benötigt wird, sag es mir einfach.

Quelle

2016-04-28 technik3k

'element.mozRequestPointerLock' usw. sollte wahrscheinlich' Canvas.mozRequestPointerLock' sein –

According to the WC3 Docs on pointerlock:

requestPointerLock

Wenn ein Benutzer pointer Sperre über die Standard Entsperren Benutzergeste ausgetreten ist, oder einen Zeiger Sperre wurde für dieses Dokument nicht zuvor eingegebenen, erzeugt ein Ereignis als Ergebnis eine Bestätigungsgeste muss in dem Dokument empfangen werden, bevor requestPointerLock erfolgreich ist.

It then talks about engagement gestures below.

Verpflichtungs Geste

Ein vom Benutzerprogramm als Ergebnis der Interaktion mit dem Benutzer erzeugtes Ereignis bestimmt, die mit der Seite zu interagieren. z.B. click, aber nicht mousemove. Interaktionsgesten sind alle Ereignisse, die in der Definition enthalten sind, dass ein Popup mit den Hinzufügungen keypress und keyup angezeigt werden darf.

So, um Ihren Code zu arbeiten, requestPointerLock sollte von einer Eingriff Geste, zum Beispiel eines click Event-Handler aufgerufen werden.

Quelle

2016-04-28 01:14:25 0xcaff

Wenn wir 'requestPointerLock()' in das click -Ereignis verschieben, funktioniert es einwandfrei. Teilen unter Beispielcode als Referenz.

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>Pointer lock</title> 

<style type="text/css"> 
html {font-size: 10px; font-family: sans-serif;} 
canvas {display: block; margin: 0 auto; border: 1px solid black;} 
</style> 
</head> 

<body> 
     <canvas width="640" height="360"> 
     Your browser does not support HTML5 canvas 
     </canvas> 
</body> 

<script type="text/javascript"> 
// setup of the canvas 

window.addEventListener('load', eventWindowLoaded, false); 
var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 

function eventWindowLoaded() { 
    canvasDraw(); 
} 

var x = 50; 
var y = 50; 

function canvasDraw() { 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,canvas.clientWidth,canvas.clientHeight); 
    ctx.fillStyle = "#f00"; 
    ctx.beginPath(); 
    ctx.arc(x,y,20,0,degToRad(360), true); 
    ctx.fill(); 
} 

// pointer lock object forking for cross browser 
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock; 
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock; 

canvas.onclick = function() { 
    canvas.requestPointerLock(); 
} 

// pointer lock event listeners 
// Hook pointer lock state change events for different browsers 
document.addEventListener('pointerlockchange', lockChangeAlert, false); 
document.addEventListener('mozpointerlockchange', lockChangeAlert, false); 

function lockChangeAlert() { 
    if(document.pointerLockElement === canvas || 
    document.mozPointerLockElement === canvas) { 
    console.log('The pointer lock status is now locked'); 
    document.addEventListener("mousemove", canvasLoop, false); 
    } else { 
    console.log('The pointer lock status is now unlocked'); 
    document.removeEventListener("mousemove", canvasLoop, false); 
    } 
} 


function canvasLoop(e) { 
    var movementX = e.movementX || e.mozMovementX || 0; 
    var movementY = e.movementY || e.mozMovementY || 0; 
    x += movementX; 
    y += movementY; 
    canvasDraw(); 
    console.log("X position: " + x + ', Y position: ' + y); 
} 

// helper function 
function degToRad(degrees) { 
    var result = Math.PI/180 * degrees; 
    return result; 
} 
</script> 
</html>

Quelle

2016-04-28 02:26:27

JS Zeigersperre

Antwort

Verwandte Themen