在图像上绘制对象并拖动图像答案

【问题标题】：Draw object on image and drag image在图像上绘制对象并拖动图像
【发布时间】：2013-04-02 13:33:40
【问题描述】：

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

【问题讨论】：

标签： jquery html canvas html5-canvas

【解决方案1】：

我看到您正在查看 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>

【讨论】：

我不反对你的回答，但我不能在火箭上画太阳或任何东西。我想要火箭作为背景，它可以拖动，我可以在里面画任何东西

【解决方案2】：

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

在 mousedown 时获取鼠标坐标，使其相对于画布，测试它们是否在您在画布上绘制的图像内（框内点）。
如果鼠标在图像内：在 mouseup 时，根据 mousedown 坐标和 mouseup 坐标之间的差值在画布上重绘图像。

【讨论】：