Javascript 拖动绑定到Konva。层

我正在我的项目中使用。我需要实现绑定到

Konva.Layer

的拖动。我的图层有很多其他形状和图像。我需要限制层的移动到其宽度和高度的50%。我在这方面的做法是，当用户使用鼠标滚轮放大或缩小图层时，问题就会出现。缩放之后，我不知道为什么拖动边界的行为会有所不同。看来我的数学算错了。我需要有相同的行为，即当用户不执行缩放时，限制层移动的方式。这就是我正在做的：

//... a helper object for zooming
var zoomHelper = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function(event) {
        event.preventDefault();
        var delta;
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }
        var evt = event.originalEvent,
            mx = evt.clientX - zoomHelper.stage.getX(),
            my = evt.clientY - zoomHelper.stage.getY(),
            zoom = (zoomHelper.zoomFactor - delta),
            newscale = zoomHelper.scale * zoom;
        zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
            .x - mx / newscale;
        zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
            .y - my / newscale;
        zoomHelper.stage.setOffset({
            x: zoomHelper.origin.x,
            y: zoomHelper.origin.y
        });
        zoomHelper.stage.setScale({
            x: newscale,
            y: newscale
        });
        zoomHelper.stage.draw();
        zoomHelper.scale *= zoom;
        preCalculation();
    }
};


// Code goes here
var w = window.innerWidth;
var h = window.innerHeight;
var height, minX, minY, maxX, maxY;
var stage = new Konva.Stage({
  container: 'container',
  width: w,
  height: h
});
zoomHelper.stage =stage;
var layer = new Konva.Layer({
  draggable: true,
  dragBoundFunc: function(pos) {
    console.log('called');
    var X = pos.x;
    var Y = pos.y;
    if (X < minX) {
      X = minX;
    }
    if (X > maxX) {
      X = maxX;
    }
    if (Y < minY) {
      Y = minY;
    }
    if (Y > maxY) {
      Y = maxY;
    }
    return ({
      x: X,
      y: Y
    });
  }
});

stage.add(layer);

function preCalculation(){
  // pre-calc some bounds so dragBoundFunc has less calc's to do
height = layer.getHeight();
minX = stage.getX() - layer.getWidth() / 2;
maxX = stage.getX() + stage.getWidth() - layer.getWidth() / 2;
minY = stage.getY() - layer.getHeight() / 2;
maxY = stage.getY() + stage.getHeight() - layer.getHeight() / 2;
console.log(height, minX, minY, maxX, maxY);
}
preCalculation();

var img = new Image();
img.onload = function() {
  var floorImage = new Konva.Image({
    image: img,
    width: w,
    height: h
  });
  layer.add(floorImage);
  layer.draw();
};
img.src = 'https://s.yimg.com/pw/images/coverphoto02_h.jpg.v3';

$(stage.container).on('mousewheel DOMMouseScroll', zoomHelper.zoom);

/。。。用于缩放的辅助对象
变量zoomHelper={
阶段：空，
比例：1，
zoomFactor:1.1，
来源：{
x:0,，
y:0
},
缩放：功能（事件）{
event.preventDefault（）；
var三角洲；
if（navigator.userAgent.toLowerCase（）.indexOf（'firefox'）>-1）{
如果（event.originalEvent.detail>0）{
//向下滚动
δ=0.2；
}否则{
//向上滚动
δ=0；
}
}否则{
if（event.originalEvent.wheelDelta<0）{
//向下滚动
δ=0.2；
}否则{
//向上滚动
δ=0；
}
}
var evt=event.originalEvent，
mx=evt.clientX-zoomHelper.stage.getX（），
my=evt.clientY-zoomHelper.stage.getY（），
zoom=（zoomHelper.zoomFactor-增量），
newscale=zoomHelper.scale*zoom；
zoomHelper.origin.x=mx/zoomHelper.scale+zoomHelper.origin
.x-mx/新闻级；
zoomHelper.origin.y=my/zoomHelper.scale+zoomHelper.origin
.y-我的/新闻量表；
zoomHelper.stage.setOffset({
x:zoomHelper.origin.x，
y:zoomHelper.origin.y
});
zoomHelper.stage.setScale({
x：新闻级，
y:新音阶
});
zoomHelper.stage.draw（）；
zoomHelper.scale*=缩放；
预计算（）；
}
};
//代码在这里
var w=窗内宽度；
var h=窗内高度；
变量高度，最小值，最小值，最大值，最大值；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：w，
身高：h
});
zoomHelper.stage=阶段；
var层=新Konva.layer({
真的，
dragBoundFunc:函数（位置）{
log（'called'）；
var X=位置X；
变量Y=位置Y；
if（XmaxX）{
X=最大X；
}
if（YmaxY）{
Y=最大值；
}
返回({
x:x，
y:y
});
}
});
阶段。添加（层）；
函数预计算（）{
//预先计算一些边界，这样dragBoundFunc要做的计算就更少了
高度=layer.getHeight（）；
minX=stage.getX（）-layer.getWidth（）/2；
maxX=stage.getX（）+stage.getWidth（）-layer.getWidth（）/2；
minY=stage.getY（）-layer.getHeight（）/2；
maxY=stage.getY（）+stage.getHeight（）-layer.getHeight（）/2；
console.log（高度、最小值、最小值、最大值、最大值）；
}
预计算（）；
var img=新图像（）；
img.onload=函数（）{
var floorImage=新Konva.Image({
图片：img，
宽度：w，
身高：h
});
图层。添加（楼板尺寸）；
layer.draw（）；
};
img.src=https://s.yimg.com/pw/images/coverphoto02_h.jpg.v3';
$（stage.container）.on（'mouseweel-DOMMouseScroll'，zoomHelper.zoom）；

使用

dragBoundFunc

时，必须返回图层的绝对位置。当您更改顶部节点（阶段）的属性时，很难保持绝对位置。因此，您可以尝试在“dragmove”事件中设置绑定函数：

layer.on('dragmove', function() {
  var x = Math.max(minX, Math.min(maxX, layer.x()));
  var y = Math.max(minY, Math.min(maxY, layer.y()));
  layer.x(x);
  layer.y(y);
});

---

使用

dragBoundFunc

时，必须返回图层的绝对位置。当您更改顶部节点（阶段）的属性时，很难保持绝对位置。因此，您可以尝试在“dragmove”事件中设置绑定函数：

layer.on('dragmove', function() {
  var x = Math.max(minX, Math.min(maxX, layer.x()));
  var y = Math.max(minY, Math.min(maxY, layer.y()));
  layer.x(x);
  layer.y(y);
});

---

谢谢你的回答，拉夫顿。你说过我应该像你那样在“dragmove”中设置绑定函数。没关系，我会的。但挑战在于，当缩放操作发生时，用户可以拖动的区域正在缩小。我需要限制拖动移动到层的宽度和高度的50%。如果图层被缩放，那么拖动区域应该相应地缩放。你说图层高度的50%是什么意思？是舞台的50%吗？或者是50%的图层内容（图像）？缩放后的高度是多少？图层内容是图像，在我的例子中，舞台和图像的高度和宽度是相同的。谢谢拉夫顿的回答。你说过我应该像你那样在“dragmove”中设置绑定函数。没关系，我会的。但挑战在于，当缩放操作发生时，用户可以拖动的区域正在缩小。我需要限制拖动移动到层的宽度和高度的50%。如果图层被缩放，那么拖动区域应该相应地缩放。你说图层高度的50%是什么意思？是舞台的50%吗？或者是50%的图层内容（图像）？缩放后的高度是多少？图层内容是图像，在我的例子中，舞台和图像的高度和宽度是相同的。