이미지에 객체 그리기 및 이미지 드래그

작은지도와 같은 이미지가 있습니다.

나는 그런 일을하려고 (이미지 드래그하는 동안 이미지에 첨부 된 객체) 이미지 : 나는 (선, 점과 같은) 어떤 객체를 그릴
1. 드래그 그것을
2 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/처럼 같은 것을하고 싶어 http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-label-tutorial/ 등을 사용합니다. 이미지를 드래그하면 이미지가 첨부되지 않습니다.

이미지에 객체 그리기 및 이미지 드래그

출처

2013-04-01 DeLe

나는 당신이 KineticJS 예를보고있는 것을 본다.

다음은 KineticJS에서지도와 포인트 및 선을 수행하는 방법의 예입니다. 이 라이브러리를 사용하면 캔버스만으로 드래그하는 복잡함을 배우는 대신 시작하는 것이 더 간단 할 수 있습니다.

이 예제 코드에서 img1.src = "yourMap.jpg"대신 맵에 URL을 넣어야합니다.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body {margin: 0px;padding: 0px;} 
     canvas{border:1px solid red;} 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script> 
    <script> 

     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 500, 
     height: 500 
     }); 
     var layer = new Kinetic.Layer(); 

     var img1=new Image(); 
     img1.onload=function(){ 
      createDragMap(); 
     } 
     img1.src="yourMap.jpg"; 

     function createDragMap(){ 

      var map = new Kinetic.Shape({ 
       drawFunc: function(canvas) { 
       var context = canvas.getContext(); 

       // draw the map and a border around the map 
       context.drawImage(img1,0,0); 
       context.beginPath(); 
       context.rect(0,0,img1.width,img1.height); 
       context.stroke(this); 

       // add your points to the map here 
       // for example... 
       context.rect(23,67, 4,4);   
       context.rect(153,87, 4,4); 
       context.moveTo(23,67); 
       context.lineTo(153,87);   

       // fill and stroke must be done last! 
       canvas.fillStroke(this); 
       }, 
       width: img1.width, 
       height: img1.height, 
       stroke:"blue", 
       strokeWidth: 2, 
       draggable:true 
      }); 
      layer.add(map); 
      stage.add(layer); 
     } 
    </script> 
    </body> 
</html>

출처

2013-04-01 17:20:06 markE

답장을하지 않겠지 만 태양이나 로켓을 그릴 수는 없습니다. 나는 로켓을 끌 수있는 배경으로 로켓을 원하고 그 안에 무엇이든 그릴 수있다. – DeLe

캔버스에서 mousedown 및 mouseup 이벤트를 추적해야합니다.

mousedown에서 마우스 좌표를 가져 와서 캔버스를 기준으로 상대 좌표를 지정하고 캔버스에서 그린 이미지 (포인트 인 박스)에 있는지 테스트합니다.
마우스가 이미지 안에있는 경우 : mouseup시 마우스 위치 좌표와 마우스 업 좌표 간의 델타를 기준으로 이미지를 캔버스에 다시 그립니다.

출처

2013-04-01 15:54:04

예를 들어 답하십시오 : – DeLe

이미지에 객체 그리기 및 이미지 드래그

답변

관련 문제