Question

我在网页上有2个画布，每个画布都会加载不同的图像。当我点击图像时，我希望能够拖放它。我已经这样做但是如何在我点击时检测哪个画布使用？

因为只有前面的图像会移动。有没有办法检测或检查正在绘制的活动画布或图像？

我做了一个JSFiddle任何帮助都会很棒。

<!DOCTYPE html>
<html>
<head>
<style>

#layer1,#layer2
{
    border:1px solid black;
    width:500px;
    height:500px;
} 




<!-- #mouseCanvas,#mouseCanvas2,
#canvasContainer
{   
    width:500px;
    height:500px;
}
#mouseCanvas
{
    border:9px solid black;
    position:absolute;
    left:0px;
    top:0px;
}

#mouseCanvas2
{
    border:12px red;
    position:absolute;
    left:0px;
    top:0px;
}

#mouseCanvas
{
    z-index=1;  
}

#mouseCanvas2
{
    z-index=2;  
} -->

</style>

<div id="canvasesdiv" style="position:relative; width:400px; height:300px">

<canvas id="layer1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<canvas id="layer2"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

</div>



<script>

var radius = 10;

function mouseClicked(e) 
{

}

function mouseDown(e) 
{

}

function mouseMove(e)
{
    if(window.event.which == 1)  // left mouse button
    {
        g.beginPath();
        g.arc(e.x, e.y, radius, 0, Math.PI * 2);
        g.fill();
        g.closePath(); 
    }
}


</script>
</head>
<body>




<script>
//basic setup use later

//globals
//*******************************************
var canvas,canvas2;
var g,g2;
var img = new Image();
var img2 = new Image();
//*******************************************

//*******************************************
//globals for draggable image
var size = 100;
var x = 250;
var y = 250;
//********************************************


//start up
//start up canvas
//*******************************************
initCanvas(500,500);

loadImage("https://pbs.twimg.com/profile_images/604644048/sign051.gif",img,190,80,150, 150,g);

loadImage("http://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg",img2, x - (size / 2), y - (size / 2), size, size,g2);

attachEvents();


//attach mouse wheel
//window.onmousewheel = document.onmousewheel = myMouseWheelFunction;






function initCanvas(w,h)
{
    /* Get the canvas id */
    canvas = document.getElementById("layer1");
    canvas2 = document.getElementById("layer2");

    /* Give the canvas a width and height */
    /* The width and height are in canvas logical units */
    canvas.width = w;     
    canvas.height = h;

    canvas2.width = w;     
    canvas2.height = h;

    /* Assign a graphics context to the canvas, so that we can draw on it */
    g = canvas.getContext("2d");
    g2 = canvas2.getContext("2d");  

}

function loadImage(myImageURL,imgObject,x,y,width,height,graphics)
{
   imgObject.src = myImageURL;  //"dkit.gif";

   imgObject.onload = function() 
   {
        /* The rest of the code draws onto the graphics context */
        //g.drawImage(img, 0, 0, canvas.width, canvas.height);

        //draggable code,centers image small in the middle
        //context.drawImage(img,x,y,width,height);
        //g.drawImage(imgObject, x - (size / 2), y - (size / 2), size, size);
        graphics.drawImage(imgObject, x,y,width,height);

        //imgObject.addEventListener('click', btnClick("loadImage 1"));
   }

}

function btnClick(sMessage)
{   
        alert(sMessage);
}

function attachEvents()
{
    //attach function to mouse click listener
    //canvas.addEventListener('click', getImageObject);

    //mouse move event
    canvas.addEventListener('mousemove', dragImageonClick);
    canvas2.addEventListener('mousemove', dragImageonClick);

    //image events  
    //img.addEventListener('click', btnClick("1"));
    //img2.addEventListener('click', btnClick("2"));
}


function myMouseWheelFunction(e) 
{
    unitChange = e.wheelDelta / 120;  // unitChange will be equal to either +1 or -1

    // code to use the unitChange value is placed below  

    alert("mouse is scrolling");
}



/*
//draw image where ever user clicks
function paintImageonClick(e)
{
   if(window.event.which == 1)  // left mouse button
   {
      g.clearRect(0, 0, canvas.width, canvas.height);
      g.drawImage(img, e.x - 50, e.y - 50, 100, 100);
   }
}
*/

function getImageObject(e)
{
    console.log(e);
}


//allow the image to draggable
function dragImageonClick(e)
{
if(window.event.which == 1)  // left mouse button
   {
      if(mouseIsInsideImage(e))
      {
         g.clearRect(0, 0, canvas.width, canvas.height);
         g2.clearRect(0, 0, canvas2.width, canvas2.height);

         //problem here has how do i know which image the user click on
         //**********************************************************************************
         g.drawImage(img, x - (size / 2), y - (size / 2), size, size);
         g2.drawImage(img2, x - (size / 2), y - (size / 2), size, size);
         //**********************************************************************************

         x = e.x;
         y = e.y;
      }
   }
}

//dragable helper function
function mouseIsInsideImage(e)
{
    // x
    if(e.x > x)
    {
        if((e.x - x) > (size / 2))
        {
            return false;
        }
    }
    else // x >= e.x
    {
        if((x - e.x) > (size / 2))
        {
            return false;
        }
    }
    // y
    if(e.y > y)
    {
        if((e.y - y) > (size / 2))
        {
            return false;
        }
    }
    else // y >= e.y
    {
        if((y - e.y) > (size / 2))
        {
            return false;
        }
    }   
    return true;
}


//dont know what this does
/*
img.onload = function()
{
   g.drawImage(img, x - (size / 2), y - (size / 2), size, size);
}
*/

</script>

</body>
</html>

Answer 1

要知道你点击了哪个画布，你可以使用：

e.currentTarget.id

这将获得画布的id。

HTML5 Canvas多个图像

1 个答案: