drag-and-drop - 将img拖入矩形？

Question

在 Kineticjs 中，我想将一个 img 拖入一个矩形。

我想知道是否有人可以告诉我该怎么做？我知道如何拖动形状或图像，但我想将 img 拖动到形状中。

谢谢，

Answer 1

http://jsfiddle.net/Ps3TU/5/是朝着您想做的事情迈出的一步。

  darthVaderImg.on('dragmove', function () {
      var userPos = stage.getUserPosition();
      if(rectShape.intersects(userPos)){
            rectShape.setFillPatternImage(this.getImage());
            this.hide();
            rectShape.setFillPatternOffset(this.getWidth(), 70);
      }
  });

但你真正想做的是这样的：http: //jsfiddle.net/8Vdht/3/

darthVaderImg.on('dragmove', function () {
 var userPos = stage.getUserPosition();
  if(rectShape.intersects(userPos)){
    this.setX(rectShape.getX());
    this.setY(rectShape.getY());
    this.setWidth(rectShape.getWidth());
    this.setHeight(rectShape.getHeight());
  }
  else {
    this.setWidth(savedWidth);
    this.setHeight(savedHeight);
    this.setImage(imageObj);
  }
  layer.draw();
});

问题是，您不能（还）只将图像（内部）放置在一个矩形中，然后再轻松地提取它。所以你需要使用一个技巧，调整图像的大小，让它看起来像在矩形中。这固定了图像的位置，您可以将其移动到矩形之外。