Javascriptとcanvasを使ってドラッグ&ドロップでアイコンを指定範囲内で自由に動かせるようにしたい

Question

Javascriptとcanvasを使ってドラッグ&ドロップで複数のアイコンを別々に指定範囲内で動かせるようなものを作成したいです。

下記のサイトを参考にして四角形をドラッグ&ドロップで動かせるようにしました。
https://itecnote.com/tecnote/javascript-drag-and-drop-multiple-objects-in-html5-canvas/

サッカーのフォーメーションを自分で作るような仕様にしたいです。
下の画像のように四角形は並べて、自由にドラッグ&ドロップで動かせるようにしたのですが、この四角形をアイコン画像に置き換えたいです。

コードを書いてみたのですが、思ったように動かず、エラーが出ています

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を触り始めてから間もないため、解決方法に辿り着くまでの検索の仕方などもわかっておりません。

こちらに記載したコードのおかしな点がありましたらご教示いただけると幸いです。

Answer 1

uncaught ReferenceError: charas is not defined at HTMLCanvasElement.myUp(new.js:170:1)

charas という変数が宣言されていません。質問文のコードには本当に charas という変数は宣言されていないので、どう直すのがよいのかは助言できません。

Uncaught ReferenceError: dragok is not defined at HTMLCanvasElement.myMove (new.js:176:1)

dragok は chara.onload に指定された関数の中で宣言されているので、その関数の外では利用できません。宣言をトップレベルに移動するか、dragok を利用したい関数を chara.onload の中に移動するか、です。
ソースコードのインデントをきちんとした方がこういうバグは少なくなります。

Comments

[mamakokoko]

ありがとうございます。とても参考になり、理解が一歩進みました。

個人的には参考にしたサイトの四角形を画像にするだけなので、四角形を表す式を変更していけばできると考えていました。

下記のコードのrectとrectsのところを画像用のコードに置き換えていけばできるんでしょうか？

<script>
window.onload=function(){

// get canvas related references
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;

// drag related variables
var dragok = false;
var startX;
var startY;

// an array of objects that define different rectangles
var rects=[];
rects.push({x:75-15,y:50-15,width:30,height:30,fill:"#444444",isDragging:false});
rects.push({x:75-25,y:50-25,width:30,height:30,fill:"#ff550d",isDragging:false});
rects.push({x:75-35,y:50-35,width:30,height:30,fill:"#800080",isDragging:false});
rects.push({x:75-45,y:50-45,width:30,height:30,fill:"#0c64e8",isDragging:false});

// listen for mouse events
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;

// call to draw the scene
draw();

// draw a single rect
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}

// clear the canvas
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

// redraw the scene
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
// redraw each rect in the rects[] array
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.fillStyle=r.fill;
rect(r.x,r.y,r.width,r.height);
}
}

// handle mousedown events
function myDown(e){

// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();

// get the current mouse position
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);

// test each rect to see if mouse is inside
dragok=false;
for(var i=0;i<rects.length;i++){
var r=rects[i];
if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){
// if yes, set that rects isDragging=true
dragok=true;
r.isDragging=true;
}
}
// save the current mouse position
startX=mx;
startY=my;
}

// handle mouseup events
function myUp(e){
// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();

// clear all the dragging flags
dragok = false;
for(var i=0;i<rects.length;i++){
rects[i].isDragging=false;
}
}

// handle mouse moves
function myMove(e){
// if we're dragging anything...
if (dragok){

// tell the browser we're handling this mouse event
e.preventDefault();
e.stopPropagation();

// get the current mouse position
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);

// calculate the distance the mouse has moved
// since the last mousemove
var dx=mx-startX;
var dy=my-startY;

// move each rect that isDragging
// by the distance the mouse has moved
// since the last mousemove
for(var i=0;i<rects.length;i++){
var r=rects[i];
if(r.isDragging){
r.x+=dx;
r.y+=dy;
}
}

// redraw the scene with the new rect positions
draw();

// reset the starting mouse position for the next mousemove
startX=mx;
startY=my;

}
}

}; // end $(function(){});
</script>

[int32_t]

> 下記のコードのrectとrectsのところを画像用のコードに置き換えていけばできるんでしょうか？

基本的にはそういうことですけども、四角の描画と画像の描画の違いをチキンと理解してないと達成するのは厳しいですよ。

自分ならこうするかな、というのをざくっと書いておきます。
・HTML中に、canvas描画に利用する画像を <img> で置いておき、id= を付ける。
・rectsの要素の設定は以下のように <img> を参照する
rects.push({x:75-15, y:50-15, width:30, height:30, img:document.getElementById(<img>のid属性値), isDragging:false});
・関数rect()のような画像描画用の関数を追加して、然るべきところで使用する