次の JavaScript 関数があります。これを使用して、HTML5 キャンバスの周りに画像をドラッグ アンド ドロップできるようにします。
function canvasState(myGameCanvas){
var bounding_box = myGameCanvas.getBoundingClientRect();
//var mouseX = (mouse_event.clientX-bounding_box.left) * (myGameCanvas.width/bouding_box.width);
//var mouseY = (mouse_event.clientY-bounding_box.top) * (myGameCanvas.height/bounding_box.height);
//var pixels = context.getImageData(mouseX, mouseY, 1, 1);
this.valid = false; /*When set to true, the canvas will redraw everything */
this.allImagesArray; /*This is the array holding all of the images to be drawn */
this.dragging = false; /*Keep track of when the current selected object is being dragged */
this.selection = null;
this.dragOffX = 0; /*See mousedown and mousemove events for explanation */
this.dragOffY = 0;
this.interval = 30; /*This variable will be used to determine how often the draw method is called. */
/*Save a reference to the canvasState so that I'm still using this particular canvasState. */
var myState = this;
/*This stops double clicking on the canvas selecting text on the canvas */
myGameCanvas.addEventListener('selectstart', function(e) {e.preventDefault(); return false; }, false);
console.log("Event Listener 'selectstart' added to canvas.");
/*Up, down and move are for dragging */
myGameCanvas.addEventListener('mousedown', function(e){
console.log("Event Listener 'mousedown' added to canvas");
//var mouse = myState.getMouse(e);
var mX = e.clientX;
var mY = e.clientY;
console.log("ClientX = " + mX + "clientY = " +mY);
var allImages = myState.allImagesArray;
var NoOfImages = allImages.length;
for (var i = 1-1; i >= 0; i--){
/*At the moment this is looking for coordinates in the array. It should
be looking for images at that position. I want to get coordinates for
all images in the array, and calculate whether the click is on one of those.*/
if(allImages[i].contains(mX, mY)){
var mySelection = allImages[i];
/*Keep track of where in the object was clicked, so that it can be
moved smoothly (see mousemove) */
alert("test");
myState.dragOffX = mX - mySelection.x;
myState.dragOffY = mY - mySelection.y;
myState.dragging = true;
myState.selection = mySelection;
myState.valid = false;
return;
}
}
/*If the code hasn't returned, it means that nothing has been selected.
If there was an object selected, then deselect it. */
if (myState.selection){
myState.selection = null;
myState.valid = false; /*Need to clear the old selection border */
}
}, true);
/*This event checks to see if the dragging flag has been set to true. If it has, it gets the
current mouse position and moves the selected object to that position, remembering the offset
where it was selected. If the dragging flag is false, the event does nothing. */
myGameCanvas.addEventListener('mousemove', function(e){
console.log("Event listener 'mousemove' added to canvas.");
if(myState.dragging){
var mouse = myState.getMouse(e);
/*I don't want to drag the object by its top left corner, I want to drag from where the
object was clicked. That's why I saved the offset and use it here. */
myState.selection.x = e.clientX - myState.dragOffX;
myState.selection.y = e.clientY - myState.dragOffY;
myState.valid = false; /*Something's dragging, so I must redraw */
}
}, true);
/*All the mouseup event has to do is update the canvas state so that it is no longer dragging.
So, once the mouse button is lifted, the mousemove event should be back to doing nothing. */
myGameCanvas.addEventListener('mouseup', function(e){
console.log("Event listener 'mouseup' added to canvas.");
myState.dragging = false;
}, true);
//setInterval(function(){ myState.draw(); }, myState.interval);
canvasState.prototype.draw = function(){
/*If the state is invalid,redraw and validate. */
if (!this.valid){
var context = this.context;
var images = this.images;
this.clear();
/*Redraw the game elements here */
drawLevelOneElements();
}
}
}
しかし、なぜか自分のWebページをブラウザで見ると、キャンバスに画像は全部表示されているのに、クリックするとキャンバス上のカーソルの位置がコンソールログに表示されるのに、なぜか行が
selectedImage.draggable = "true";
画像をドラッグ可能にしていないようです。ここで私が間違っていることを誰かが見ることができますか?
06-12-2012 @ 10:40 を編集して、変更されたコードを表示します
開始ボタンをクリックすると、すべての画像がキャンバスに表示されたままになります。コンソールに 0 から始まる出力があり、配列からキャンバスに画像が描画されるたびに 1 ずつインクリメントされます。
すべての画像がキャンバスに描画されると (配列には 34 個の画像があるため、印刷出力は 33 に達します)、「イベント リスナー 'mousemove' がキャンバスに追加されました」という行が表示されます。コンソールを数回 (おそらく約 30 回) 使用します。キャンバスをもう一度クリックすると、そのループが再び呼び出され、その行がさらに 30 回ほど印刷されます。どの画像もドラッグできません。何か案は？