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/

回答1:

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>

回答2:

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.

来源：https://stackoverflow.com/questions/9888107/drag-image-in-html5-canvas-with-defined-boundaries

标签

html5

canvas

constraints

drag

bounds