0
У меня есть 2 холста на веб-странице, каждый загружает другое изображение. Когда я нажимаю на изображение, я хочу, чтобы его можно было перетащить. Я сделал это, но как определить, какие canvas im использовать при нажатии?HTML5 Canvas multiple images
Поскольку только изображение впереди будет перемещаться. Есть ли способ обнаружить или проверить активный холст или изображение?
Ive сделал 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>
спасибо за это :) –