>

안녕하세요 html5를 사용하여 캔버스 안에 드래그 앤 드롭 기능을 배치 할 수 있습니까?

실제 요구 사항은 이미지를 캔버스 내부에서 수행해야하는 텍스트 상자로 드래그하는 것입니다 ... 아이디어를 공유하십시오 .. 드래그 앤 드롭을 배우는 데 사용한 다음 링크는 캔버스 내부에서 수행해야합니다 ..

http://www.w3schools.com/html5/tryit.asp? filename = tryhtml5_draganddrop


  • 답변 # 1

    이 튜토리얼에서 더 많은 정보를 얻을 수 있습니다 : http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

    질문에 대한 제한된 설명에서 항목을 캔버스 위로 드래그하는 것처럼 들리며이 자습서가 가장 적합 할 것입니다.

    파일에 붙여넣고 HTML5 호환 브라우저에서 열 수있는 실제 코드이며 다음과 같이 작동합니다.

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Canvas Drag and Drop Test</title>
    </head>
    <body>
    <section>
    <div>
    <canvas id="canvas" width="400" height="300">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>
    </div>
    <script type="text/javascript">
    var canvas;
    var ctx;
    var x = 75;
    var y = 50;
    var WIDTH = 400;
    var HEIGHT = 300;
    var dragok = false;
    function rect(x,y,w,h) {
     ctx.beginPath();
     ctx.rect(x,y,w,h);
     ctx.closePath();
     ctx.fill();
    }
    function clear() {
     ctx.clearRect(0, 0, WIDTH, HEIGHT);
    }
    function init() {
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     return setInterval(draw, 10);
    }
    function draw() {
     clear();
     ctx.fillStyle = "#FAF7F8";
     rect(0,0,WIDTH,HEIGHT);
     ctx.fillStyle = "#444444";
     rect(x - 15, y - 15, 30, 30);
    }
    function myMove(e){
     if (dragok){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
     }
    }
    function myDown(e){
     if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
     e.pageY > y -15 + canvas.offsetTop){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      dragok = true;
      canvas.onmousemove = myMove;
     }
    }
    function myUp(){
     dragok = false;
     canvas.onmousemove = null;
    }
    init();
    canvas.onmousedown = myDown;
    canvas.onmouseup = myUp;
    </script>
    </section>
    </body>
    </html>
    
    

  • 이전 c++ - 이 재귀 함수를 반복으로 변환
  • 다음 입력이 가변 arity의 함수 인 일반 스칼라 함수