Рисовать объект на изображении и перетащить изображение

У меня есть изображение, как маленькая карта. Я хочу сделать что-то вроде
1. перетащить его как http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/
2. нарисовать какой-нибудь объект (например: линии, точки) на изображении (объект прикрепленного с изображением в то время как изображение перетащить)

Я пытаюсь сделать что-то такое используя http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-label-tutorial/ и т. д. но он не привязан к изображению, когда я перетаскиваю изображение.

Рисовать объект на изображении и перетащить изображение

источник

2013-04-01 DeLe

Я вижу, что вы смотрите на примеры KineticJS.

Вот пример того, как сделать свою карту плюс точки и линии в KineticJS. Использование этой библиотеки может быть проще для начала, а не для изучения сложностей перетаскивания в холст.

В этом примере кода обязательно указывайте URL-адрес на карте вместо img1.src = "yourMap.jpg".

<!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

я не downvote вашего ответа, но я не могу нарисовать солнце или что-нибудь на ракете. Я хочу ракеты в качестве фона, который он может перетащить, и я могу нарисовать что-нибудь в нем – DeLe

Вы должны отслеживать события mousedown и mouseup на холсте.

На mousedown получить координаты мыши, сделать их относительно холста, проверить, находятся ли они внутри изображения, которое вы нарисовали на холсте (точка-в-окне).
Если мышь находится внутри изображения: на мыши перерисовать изображение на холсте на основе дельта между координатами mousedown и координатами mouseup.

источник

2013-04-01 15:54:04

может у меня пример :) – DeLe

Рисовать объект на изображении и перетащить изображение

ответ

Смежные вопросы