1

有人可以为我提供一个简单而干净的方法，通过将图像拖出画布框架来从画布中删除图像。

这是我能想到的http://jsfiddle.net/n4w44/50/：

我将舞台设置为 400 像素，并通过实现dragBoundFunc.

  var image = new Kinetic.Image({
       draggable : true,
        x: 175,
        y:175,
        width: 50,
        height: 50,
        draggable: true,
         dragBoundFunc: function(pos) {
            var stage_width = stage.getWidth();
            if (pos.x > 300 || pos.x < 100 || pos.y > 300 || pos.y < 100)
            {
              this.hide();
            }
            return {
              x: pos.x,
              y: pos.y
            };
          }
    });

但是很高兴看到以下替代解决方案：

  • 图像退出时让它看起来更干净
  • 请允许我避免对容器进行一些难看的偏移（当我将它嵌入页面时我需要这样做）。
4

1 回答 1

2

您使用旧版本的 KineticJS (4.4.3) 有什么原因吗？我问的原因是因为从 KineticJS 4.5.1 开始（现在我们在 4.6.0 上，您可以在KineticJS 网站上获得）添加了Tween类以支持Transition类。

KineticJS 4.5.1 更新日志

无论如何，我通过添加一些代码解决了你的问题dragBoundFunc

    var image = new Kinetic.Image({
             draggable: true,
             x: 175,
             y: 175,
             width: 50,
             height: 50,
             draggable: true,
             dragBoundFunc: function (pos) {
                 var thisImg = this;
                 if (pos.x > (frame.getWidth() + frame.getX() - thisImg.getWidth()) || pos.x < frame.getX() || pos.y > (frame.getHeight() + frame.getY()  - thisImg.getHeight()) || pos.y < frame.getY()) {
                     var tween = new Kinetic.Tween({
                         node: thisImg,
                         duration: 0.1,
                         opacity: 0,
                         onFinish: function () {
                             thisImg.hide();
                             thisImg.setOpacity(1);
                         }
                     });
                     this.stopDrag();
                     tween.play();
                 }
                 return {
                     x: pos.x,
                     y: pos.y
                 };
             }
         });

为了使图像退出更平滑，我使用 Tween将不透明度补间为 0，使其看起来像快速淡入淡出效果。补间完成后，我隐藏图像并将不透明度设置回 1，以便稍后显示图像而不会出现任何复杂情况。.stopDrag()用于在播放 Tween 时停止拖动图像。

为了更动态，我们使用帧的x,y位置以及宽度和高度dragBoundFunc来计算边界，而不是使用静态数字，我们还需要从边界中减去图像的宽度和高度，以便考虑到图像的偏移量（默认情况下是左上角）。dragBoundFunc

JSFIDDLE 注意：在小提琴中，我用KineticJS 4.6.0替换了 KineticJS 4.4.3 版本（参见 HTML 代码）

是否可以升级 KineticJS 版本以使用 Tweens，或者坚持使用现有版本并使用 Transitions（您必须为其查找文档，我不确定它们是如何工作的），这取决于您。

于 2013-09-12T14:26:20.800 回答