0

我有以下 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();
    }
}


}

但是，由于某种原因，当我在浏览器中查看我的网页时，尽管所有图像都显示在画布上，并且控制台日志显示当您单击时光标在画布上的位置，由于某种原因，该行

selectedImage.draggable = "true";

似乎没有使任何图像可拖动。谁能看到我在这里做错了什么？

编辑 06-12-2012 @ 10:40 以显示更改的代码

单击开始按钮时，所有图像仍显示在画布上 - 我在控制台中有一个从 0 开始的打印输出，并且每次从数组中将图像绘制到画布时递增 1。

一旦所有图像都被绘制到画布上（并且打印输出已达到 33 - 因为数组中有 34 个图像），然后我将“添加到画布的事件侦听器'mousemove'”这一行打印到控制台几次（可能大约 30 次）。如果我再次单击画布，则会再次调用该循环，再打印该行大约 30 次。也没有任何图像是可拖动的。有任何想法吗？

4

0 回答 0