JavaScriptを使用してペイントのようなWebアプリケーションを構築しようとしています。ユーザーは、ピクセルのグリッド上にマウスで図形を描くことができるはずです。 DOMのイベントリスナーを使用してこれを動作させるにはどうすればよいですか？このラインとJavaScriptでのマウスイベントの組み合わせ
ユーザーは、単一のピクセルを一つずつ設定することができる：
td.addEventlistener("click", setpixel);
だから私は、私は1つのEventListenerでマウスダウンとマウスオーバーを結合しなければならないと思います。それは可能ですか？
イベントリスナー自体を組み合わせることはできません。しかし、あなたはすることができますは、複数のリスナを使用してカーソルの状態を追跡します。
var mouseIsDown = false
el.addEventListener('mousedown', function(){mouseIsDown = true})
el.addEventListener('mouseup', function(){mouseIsDown = false})
マウスが動いているときに何をすべきかを決定する必要があります。
el.addEventListener('mousemove', function(){
if(mouseIsDown){
// implement drawing logic here
}
})
この質問は徹底的に答えるには広すぎますが、これが役立つことを願っています。
それはすべてあなたがコード化する方法に依存します.... – epascarello
それはあなたの言いたくないことに依存します。ユーザーがマウスを保持し、マウスの位置にいくつかの「ピクセル」をペイントしますか？あなたは形状や形状について話しているので、DOMのシミュレートされたピクセルよりも複雑です。 Canvasを使用できませんか？ここにはその素晴らしい例がありますhttp://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ – gonxalo