Перетащите изображение в HTML5 Canvas с определенными границами - PullRequest
Новая
       36

Перетащите изображение в HTML5 Canvas с определенными границами

1 голос
/ 27 марта 2012

Я работаю над HTML5 Canvas 2D, есть ли какая-нибудь функция, которая может помочь сделать пример, приведенный в ссылке ниже -

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

Ответы [ 2 ]

0 голосов
/ 27 марта 2012

Если вам нужен чистый учебник о том, как сделать объекты перетаскиваемыми внутри HTML5-холста, я написал учебник с множеством объяснений здесь .

Для каждого создаваемого вами объекта, нарисованного на холсте, вы, вероятно, захотите также задать ему какие-то «предельные границы», такие как limitX, limitY, limitWidth, limitHeight и т. Д. Затем, когда вы перетаскиваете, вам нужно сделать уверен, что остается в этих пределах. Если он выходит за границы, вы просто заставляете его находиться на той стороне, с которой его пытались вытащить.

0 голосов
/ 27 марта 2012

Ниже ссылка и код. 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>
...