3

私は画像のドラッグ&ドロップ機能に取り組んでいます。ここでこの例を参考にしました: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ JS フレームワークの KineticJS が使用されています。

この例では、 と のプロパティ ( 、xywidth)heightが「通常の」数値で設定されています。Kinetic.GroupKinetic.Image

私の問題は、アップロードした画像がなどの値が異なるためheight、このプロパティを変数として必要とすることです。width

独自のドラッグ アンド ドロップ Web アプリケーションの例からコードを変更しようとしましたが、思いどおりに動作しません... 画像を正しく読み込んで表示することはできますが、移動したりサイズを変更したりすることはできません。xy、の数値を使用するとwidthheightすべて機能します。

以下は、変更されたメソッド " initStage()" のコードです (他のメソッドは変更されていません)。

function initStage(images) {
  stage = new Kinetic.Stage({
    container: 'wb_dropzone',
    width: 500,
    height: 400
  });

  var imageGroups = new Array();
  var imageInstances = new Array();
  var layer = new Kinetic.Layer();

  for(var i=0; i<Object.size(images); i++)
  {
    imageGroups[i] = new Kinetic.Group({
        x: fileInfos[i][2][0]/*0*/,
        y: fileInfos[i][2][1]/*0*/,
        draggable: true
    });
    layer.add(imageGroups[i]);

    imageInstances[i] = new Kinetic.Image({
        x: 0/*fileInfos[i][2][0]*/,
        y: 0/*fileInfos[i][2][1]*/,
        image: images[i],
        width: fileInfos[i][1][0],
        height: fileInfos[i][1][1],
        name: 'image',
        stroke: 'black',
        strokeWidth: 2,
        dashArray: [10, 2]
    });

    imageGroups[i].add(imageInstances[i]);
    addAnchor(imageGroups[i], 0, 0, 'topLeft');
    addAnchor(imageGroups[i], fileInfos[i][1][0], 0, 'topRight');
    addAnchor(imageGroups[i], fileInfos[i][1][0], fileInfos[i][1][1], 'bottomRight');
    addAnchor(imageGroups[i], 0, fileInfos[i][1][1], 'bottomLeft');

    imageGroups[i].on('dragstart', function() {
        this.moveToTop();
    });
  }

  stage.add(layer);
  stage.draw();
}

" " に関する詳細情報fileInfos:

[imagePath, [width, height], [X-pos., Y-pos.]]

(ドロップされたすべての画像はフォルダーにアップロードされます。各画像のプロパティはデータベースに保存されます。デフォルトの x および y 位置は「0」です。)

どうすればこの問題を解決できますか?どんな助けにも感謝します!

4

1 に答える 1

1

fileInfos から読み込まれるドラッグ可能/サイズ変更可能な画像を作成する方法

fileInfos[i] に基づいて group+image+anchors を作成する関数を呼び出します。

    // pull info supplied by fileInfos for this “i”

    var imgWidth=fileInfos[i][1][0];
    var imgHeight=fileInfos[i][1][1];
    var groupX=fileInfos[i][2][0];
    var groupY=fileInfos[i][2][1];

    // call a function that creates the draggable/resizable group

    addImageGroup( images[i], imgWidth,imgHeight, groupX,groupY );

ドラッグ可能/サイズ変更可能なグループ要素を作成する関数は次のとおりです。

  function addImageGroup(image,imageWidth,imageHeight,groupX,groupY){

      // width and height are based on the images width/height
      var w=imageWidth;
      var h=imageHeight;

      var kGroup = new Kinetic.Group({
          x:groupX,
          y:groupY,
          width:w+20,   // must allow 10+10=20 for anchors
          height:h+20,
          draggable:true
      });
      layer.add(kGroup);

      kGroup.on('dragstart', function() {
          this.moveToTop();
      });

      var kImage = new Kinetic.Image({
          x: 0,
          y: 0,
          image: image,
          width: w,
          height: h,
          name: 'image',
          stroke: 'black',
          strokeWidth: 2,
          dashArray: [10, 2]
      });
      kGroup.add(kImage);

      addAnchor(kGroup, 0, 0, 'topLeft');
      addAnchor(kGroup, w, 0, 'topRight');
      addAnchor(kGroup, w, h, 'bottomRight');
      addAnchor(kGroup, 0, h, 'bottomLeft');

  }

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/buCzH/

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

      // create the stage
      var stage = new Kinetic.Stage({
          container: 'container',
          width: 350,
          height: 350
      });
      var layer=new Kinetic.Layer();
      stage.add(layer);

      // build a test fileInfos array
      // width/height will be gotten from actual images, so leave width/height==0
      var fileInfos=[];
      function addFile(x,y,w,h,imgURL){
          fileInfos.push([imgURL,[w,h],[x,y]]);
      }
      addFile(30,100,102,102,"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
      addFile(200,100,102,102,"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");

      // load all the images
      var images=[];
      loadAllImages();

      function loadAllImages(){
          var imagesOK=0;
          for (var i = 0; i < fileInfos.length; i++) {
              var img = new Image();
              images.push(img);
              img.onload = function(){ 
                  if (++imagesOK==fileInfos.length ) {

                      // all images are loaded, so build the groups
                      for(var i=0;i<fileInfos.length;i++){
                          var imgWidth=fileInfos[i][1][0];
                          var imgHeight=fileInfos[i][1][1];
                          var groupX=fileInfos[i][2][0];
                          var groupY=fileInfos[i][2][1];
                          addImageGroup( images[i], imgWidth,imgHeight, groupX,groupY );
                      }
                      layer.draw();
                  }
              }; 
              img.src = fileInfos[i][0];
          }      
      }


      function addImageGroup(image,imageWidth,imageHeight,groupX,groupY){

          // width and height are based on the images width/height
          var w=imageWidth;
          var h=imageHeight;

          var kGroup = new Kinetic.Group({
              x:groupX,
              y:groupY,
              width:w+20,   // must allow 10+10=20 for anchors
              height:h+20,
              draggable:true
          });
          layer.add(kGroup);

          kGroup.on('dragstart', function() {
              this.moveToTop();
          });

          var kImage = new Kinetic.Image({
              x: 0,
              y: 0,
              image: image,
              width: w,
              height: h,
              name: 'image',
              stroke: 'black',
              strokeWidth: 2,
              dashArray: [10, 2]
          });
          kGroup.add(kImage);

          addAnchor(kGroup, 0, 0, 'topLeft');
          addAnchor(kGroup, w, 0, 'topRight');
          addAnchor(kGroup, w, h, 'bottomRight');
          addAnchor(kGroup, 0, h, 'bottomLeft');

      }


      function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('.image')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
          case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
          case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.setY(anchorY);
            topRight.setX(anchorX); 
            break;
          case 'bottomLeft':
            bottomRight.setY(anchorY);
            topLeft.setX(anchorX); 
            break;
        }

        image.setPosition(topLeft.getPosition());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if(width && height) {
          image.setSize(width, height);
        }
      }


      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false
        });

        anchor.on('dragmove', function() {
          update(this);
          layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
          group.setDraggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function() {
          group.setDraggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'pointer';
          this.setStrokeWidth(4);
          layer.draw();
        });
        anchor.on('mouseout', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'default';
          this.setStrokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }

    </script>

  </body>
</html>
于 2013-08-13T20:10:11.393 に答える