Javascriptとcanvasを使ってドラッグ&ドロップで複数のアイコンを別々に指定範囲内で動かせるようなものを作成したいです。
下記のサイトを参考にして四角形をドラッグ&ドロップで動かせるようにしました。
https://itecnote.com/tecnote/javascript-drag-and-drop-multiple-objects-in-html5-canvas/
サッカーのフォーメーションを自分で作るような仕様にしたいです。
下の画像のように四角形は並べて、自由にドラッグ&ドロップで動かせるようにしたのですが、この四角形をアイコン画像に置き換えたいです。
コードを書いてみたのですが、思ったように動かず、エラーが出ています
Javascript
window.onload=function(){ const path = require('path'); console.log(path); const board = document.getElementById("board"); const ctx=board.getContext("2d"); const chara = new Image(); chara.src="/images/uni.jpg"; chara.onload = ()=>{ ctx.drawImage(chara,0,0,100,100) var BB=board.getBoundingClientRect(); var offsetX=BB.left; var offsetY=BB.top; var WIDTH = board.width; var HEIGHT = board.height; var dragok = false; var startX; var startY; canvas.onmousedown = myDown; canvas.onmouseup = myUp; canvas.onmousemove = myMove; function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; chara(0,0,WIDTH,HEIGHT); // redraw each rects in the rects[] array for(var i=0;i<charas.length;i++){ var r=charas[i]; ctx.fillStyle=r.fill; chara(r.x,r.y,r.width,r.height); console.log("い"); } } }; function myDown(e){ e.preventDefault(); e.stopPropagation(); var mx=parseInt(e.clientX-offsetX); var my=parseInt(e.clientY-offsetY); dragok=false; for(var i=0;i<charas.length;i++){ var r=charas[i]; if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){ dragok=true; r.isDragging=true; } } startX=mx; startY=my; } function myUp(e){ e.preventDefault(); e.stopPropagation(); dragok = false; for(var i=0;i<charas.length;i++){ charas[i].isDragging=false; } } function myMove(e){ if (dragok){ e.preventDefault(); e.stopPropagation(); var mx=parseInt(e.clientX-offsetX); var my=parseInt(e.clientY-offsetY); var dx=mx-startX; var dy=my-startY; for(var i=0;i<charas.length;i++){ var r=charas[i]; if(r.isDragging){ r.x+=dx; r.y+=dy; } } draw(); startX=mx; startY=my; } } };
エラー内容は以下です。
uncaught ReferenceError: charas is not defined at HTMLCanvasElement.myUp(new.js:170:1)
Uncaught ReferenceError: dragok is not defined at HTMLCanvasElement.myMove (new.js:176:1)
現在はWebページにアイコン画像が一つだけ映っており、アイコンを動かそうとすると上記のエラーが出ます。
Javascriptを触り始めてから間もないため、解決方法に辿り着くまでの検索の仕方などもわかっておりません。
こちらに記載したコードのおかしな点がありましたらご教示いただけると幸いです。
まだ回答がついていません
会員登録して回答してみよう