Question

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

我制作舞台400px，并通过实施dragBoundFunc将画面放在200px x 200px尺寸的中心。

  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
            };
          }
    });

但是看到其他解决方案会很好：

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

Answer 1

你有没有理由使用旧版本的KineticJS（4.4.3）？我问的原因是因为从KineticJS 4.5.1开始（现在我们在4.6.0上可以获得KineticJS Website），添加了 Tween 类以支持过渡类。

KineticJS 4.5.1 Changelog

无论如何，我通过向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时停止拖动图像。

为了使dragBoundFunc更具动态性，我们使用框架的 x，y 位置以及宽度＆amp;高度来计算边界，我们还需要从边界中减去图像的宽度和高度，以便dragBoundFunc考虑图像的偏移（默认情况下是左上角））。

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

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

将图像拖出框架会将其从kineticjs阶段移除

1 个答案: