Drag Image in HTML5 Canvas with defined Boundaries
I am working on HTML5 Canvas 2D, is there any function which can help to do like example given in below link -
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/
Below is the link and code. http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
<html>
<head>
</head>
<body>
<section>
<div>
<canvas id="canvas5" height="300" width="400"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
</div>
<script type="text/javascript">
var canvas5;
var ctx5;
var x5 = 75;
var y5 = 50;
var dx5 = 5;
var dy5 = 3;
var WIDTH5 = 400;
var HEIGHT5 = 300;
var dragok = false;
function rect(x,y,w,h) {
ctx5.beginPath();
ctx5.rect(x,y,w,h);
ctx5.closePath();
ctx5.fill();
}
function clear() {
ctx5.clearRect(0, 0, WIDTH5, HEIGHT5);
}
function init() {
canvas5 = document.getElementById("canvas5");
ctx5 = canvas5.getContext("2d");
return setInterval(draw5, 10);
}
function draw5() {
if(x5>10 && x5<350 && y5>10 && y5<350)
{
clear();
ctx5.fillStyle = "#FAF7F8";
rect(0,0,WIDTH5,HEIGHT5);
ctx5.fillStyle = "#444444";
rect(x5 - 15, y5 - 15, 30, 30);
}
}
function myMove(e){
if (dragok){
x5 = e.pageX - canvas5.offsetLeft;
y5 = e.pageY - canvas5.offsetTop;
}
}
function myDown(e){
if (e.pageX < x5 + 15 + canvas5.offsetLeft)
if (e.pageX > x5 - 15 + canvas5.offsetLeft)
if (e.pageY < y5 + 15 + canvas5.offsetTop)
if (e.pageY > y5 -15 + canvas5.offsetTop){
x5 = e.pageX - canvas5.offsetLeft;
y5 = e.pageY - canvas5.offsetTop;
dragok = true;
canvas5.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas5.onmousemove = null;
}
init();
canvas5.onmousedown = myDown;
canvas5.onmouseup = myUp;
</script>
</section>
</body>
</html>
If you want a clean tutorial on how to make objects draggable inside an HTML5 Canvas I've written a tutorial with a lot of explanation here.
For every object you create that is painted on the canvas you will probably want to also give it some kind of "limit bounds" such as limitX, limitY, limitWidth, limitHeight, etc. Then while you are dragging you need to make sure it remains within those bounds. If it is out of bounds you just force it to be on the closest side that it was attempted to be dragged out of.
链接地址: http://www.djcxy.com/p/63966.html上一篇: 在HTML5画布中拖放多个边界内的图像
下一篇: 使用定义的边界在HTML5画布中拖动图像