Question

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

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

我的问题是我需要将此属性作为变量，因为我上传的图片具有height，width等不同的值。

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

以下是更改方法“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”。）

有人有想法，我怎么能解决这个问题？我很感激任何帮助！

Answer 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>

JS框架：KineticJS。怎么可能这样设置变量属性？

1 个答案: