Javascriptのヘルプキャンバスでのマウスの操作

私の入力ハンドラをJavascriptで動作させようとしています。Javascriptのヘルプキャンバスでのマウスの操作

this.Update = function() { 
    if (input.GetMousePressed()) { 
     console.log(input.GetMousePosition());    
    } 
}

そして、これが私のinputhandlerです：

function InputHandler(canvas) { 
    this.canvas = canvas; 
    this.mousePressed = false; 
    this.mouseDown = false; 
    this.mousePosition = new Position(0, 0); 

this.GetMousePosition = function() { 
    return this.mousePosition; 
} 

this.SetMousePosition = function(event) { 
    var rect = this.canvas.getBoundingClientRect(); 
    this.mousePosition = new Position(event.clientX - rect.left, event.clientY - rect.top); 
} 

this.GetMousePressed = function() { 
    return this.mousePressed; 
} 

this.canvas.onmousedown = function(event) { 
    input.mouseDown = true; 
    input.SetMousePosition(event); 
} 

this.canvas.onclick = function(event) { 
    input.mouseClicked = true; 
    input.SetMousePosition(event); 
} 


window.onmouseup = function(event) { 
    if (input.mouseDown == true) { 
     input.mousePressed = true; 
     input.mouseDown = false;    
    } 
}

最初の問題は、私はのmousePressedを処理する方法を知っているといけないということです私は現在、このコードを持っている私のGame.updateで何

falseに設定します。今は永遠に真実を保ちます。

私はJavascriptの新機能があります。このコードをより良くしたりより綺麗にするための変更や、悪い練習をしている場合は感謝しています。

私は通常のボタンを押すためにaddEventListenerを使用していますが、これを行うべきでしょうか？

出典

2017-11-22 indiehjaerta

なぜmousepressed/mouseupとclickイベントが必要かわかりません。成功したプレス/アップとclickの唯一の違いは、クリックターゲットが同じ要素であることです。

だから、私は最初のオプションを使うか、最後のオプションを使うかどちらかを使います。

mousePressedフラグはtrueに設定されています。これは、マウスを押すと真値が割り当てられるためです。あなたはある時点でそれをfalseに戻す必要があります。

通常、このフラグは、mousepressedイベントの中で必要な機能を起動するので、必要ありません。これが起こったという情報を保存する理由がわからない場合は、別の場所で使用しますか？

また、addEventListenerを使用している方が良いでしょう。

出典

2017-11-22 10:46:43

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     body { 
 
     background-color: black; 
 
     } 
 
     
 
     canvas { 
 
     position: absolute; 
 
     margin: auto; 
 
     left: 0; 
 
     right: 0; 
 
     border: solid 1px white; 
 
     border-radius: 10px; 
 
     } 
 
    </style> 
 
    </head> 
 
    
 
    <body> 
 
    <canvas id="canvas"></canvas> 
 
    <script type="application/javascript"> 
 
    
 
    var imageWidth = 180; 
 
    var imageHeight = 160; 
 
    var canvas = null; 
 
    var ctx = null; 
 
    
 
    var mouseDown = false; 
 
    var mouseX = 0; 
 
    var mouseY = 0; 
 
    var bounds = null; 
 
    
 
    function canvas_onmousedown(e) { 
 
     mouseDown = true; 
 
    } 
 
    
 
    function canvas_onmousemove(e) { 
 
     if (mouseDown) { 
 
     mouseX = e.clientX - bounds.left; 
 
     mouseY = e.clientY - bounds.top; 
 
     } 
 
    } 
 
    
 
    function canvas_onmouseup(e) { 
 
     mouseDown = false; 
 
    } 
 
    
 
    function loop() { 
 
     ctx.fillStyle = "gray"; 
 
     ctx.fillRect(0,0,imageWidth,imageHeight); 
 
     
 
     if (mouseDown) { 
 
     ctx.fillStyle = "yellow"; 
 
     } else { 
 
     ctx.fillStyle = "black"; 
 
     } 
 
     
 
     ctx.fillRect(mouseX - 25,mouseY - 25,50,50); 
 
     
 
     requestAnimationFrame(loop); 
 
    } 
 
    
 
    window.onload = function() { 
 
     canvas = document.getElementById("canvas"); 
 
     canvas.width = imageWidth; 
 
     canvas.height = imageHeight; 
 
     canvas.onmousedown = canvas_onmousedown; 
 
     canvas.onmousemove = canvas_onmousemove; 
 
     canvas.onmouseup = canvas_onmouseup; 
 
     
 
     ctx = canvas.getContext("2d"); 
 
     bounds = canvas.getBoundingClientRect(); 
 
     
 
     requestAnimationFrame(loop); 
 
    } 
 
    
 
    </script> 
 
    </body> 
 
</html>

出典

2017-11-24 17:34:41

Javascriptのヘルプキャンバスでのマウスの操作

答えて

関連する問題