Javascript Kineticjs组图像拖动

我是

Kinetic

js新手，在解决如何阻止图像移动到边界之外的问题时遇到了问题，这样会产生一个空白

这是到目前为止我的代码

//photo layer
var photoGroup = new Kinetic.Group({ x: layout.photoGroup.x, y: layout.photoGroup.y, draggable: true });

var Photolayer = new Kinetic.Layer();

var cropArea = new Kinetic.Rect({
     x: layout.cropAreaRect.x,
     y: layout.cropAreaRect.y,
     width: layout.cropAreaRect.width,
     height: layout.cropAreaRect.height,
     fill: "white",
     listening: false
});

Photolayer.add(cropArea);
Photolayer.add(photoGroup);

stage.add(Photolayer);

---

下面是一个说明dragBoundFunc（）的工作代码段

黄金矩形是我们想要限制阻力的区域。蓝色矩形显示了我们计算的面积-与金色不同，因为我们使用拖拽表的左上角作为我们的数学基础，我们必须考虑其自身的宽度和高度。红色块可以是图像或任何Konvajs元素

拖动红色方块

//添加一个阶段
var s=新Konva.阶段({
容器：'容器'，
宽度：800，
身高：600
});
//添加一层
var l=新的Konva.Layer（）；
s、 加（l）；
//在图层上添加一个绿色矩形，以显示舞台的边界。
var green=new Konva.Rect（{stroke:'lime'，宽度：800，高度：600，x:0，y:0}）；
l、 添加（绿色）；
//在图层上添加一个金色矩形，只是为了在预期的阻力限制上提供一些视觉反馈
var gold=new Konva.Rect（{stroke:'gold'，宽度：400，高度：200，x:55，y:55}）；
l、 加（金）；
//添加一个红色矩形作为我们的拖动对象
var red=new Konva.Rect（{fill:'red'，stroke:'red'，宽度：40，高度：50，x:65，y:65，draggable:true，
dragBoundFunc:函数（位置）{
var newX=位置x；
如果（newXmaxX）{newX=maxX}；
var newY=位置y；
如果（newYmaxY）{newY=maxY}；
$（“#info”）.html（'info:Pos=（'+newX+'，'+newY+'）范围X='+minX+'-'+maxX+'Y='+minY+'-'+maxY）；
返回{
x:newX，
y:新的
}
}
});
l、 添加（红色）；
//计算一次拖动边界以获得性能-我们需要有可拖动的元素大小！
var goldPos=gold.getAbsolutePosition（）
var minX=goldPos.x；
var maxX=goldPos.x+gold.width（）-red.width（）；
var minY=goldPos.y；
var maxY=goldPos.y+gold.height（）-red.height（）；
//在图层上添加一个蓝色矩形，仅显示计算的阻力限制-注意从maxX&Y中减去可拖动的元素尺寸。注意1px调整是为了避免在演示中重叠黄金矩形，并且不需要实时调整。
var blue=new Konva.Rect（{stroke:'blue'，不透明度：0.2，宽度：399-red.width（），高度：199-red.height（），x:56，y:56}）；
l、 添加（蓝色）；
//把红色带回到顶部，这样我们可以拖动它
red.moveToTop（）；
l、 draw（）；//重新绘制它所在的图层。

#容器{
边框：1px实心#ccc；
}
#信息{
高度：20px；
边框底部：1px实心#ccc；
}
#暗示{
字体：斜体；
}

提示：绿色为舞台，金色为预期阻力极限，蓝色为计算阻力极限。
拖动红色方块！
信息：

作为dragBoundFunc的一个示例：

const dragRect = new Konva.Rect({
  x: window.innerWidth / 2 - 50,
  y: window.innerHeight / 2 - 50,
  width: 100,
  height: 100,
  fill: 'green',
  draggable: true,
  dragBoundFunc: (pos) => {
    const leftBound = cropRect.x();
    const rightBound = cropRect.x() + cropRect.width() - dragRect.width();
    pos.x = Math.max(leftBound, Math.min(rightBound, pos.x));

    const topBound = cropRect.y();
    const bottomBound = cropRect.y() + cropRect.height() - dragRect.height();
    pos.y = Math.max(topBound, Math.min(bottomBound, pos.y));
    return pos;
  }

});

---

演示：

您是否尝试使用

dragBoundFunc

？@lavrton我尝试过，但不确定如何决定

pos.x

和

pos.y

？你有什么建议吗？