2

我有一个像小地图的图像。我想做类似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/等。但是当我拖动图像时它没有附加图像。




4

2 回答 2

0

您必须跟踪画布上的 mousedown 和 mouseup 事件。

  • 在 mousedown 上获取鼠标坐标，使它们相对于画布，测试它们是否在您在画布上绘制的图像内（框内点）。
  • 如果鼠标在图像内：在 mouseup 时，根据 mousedown 坐标和 mouseup 坐标之间的增量在画布上重绘图像。
于 2013-04-01T15:54:04.953 回答
0

我看到您正在查看 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-01T17:20:06.413 回答