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

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-01T17:20:06.413 に答える