3

我正在研究图像的拖放功能。我在这里以这个例子为导向： http ://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ 那里使用了 JS 框架 KineticJS。

在此示例中，和的属性（ x、y、width、height）设置为“正常”数值。Kinetic.GroupKinetic.Image

我的问题是我需要这个属性作为变量，因为我上传的图像有不同的值height，width等等。

我尝试为我自己的拖放 Web 应用程序更改示例中的代码，但它不能按我的意愿工作......我可以正确加载和显示图像，但我无法移动或调整它们的大小。使用, , 的数字值，它可以x工作。ywidthheight

以下是更改方法“ 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] 创建组+图像+锚点的函数：

    // 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 回答