Drag Bound with wiith Konva.Layer

Question

我在我的項目中使用KonvaJs。我需要實現綁定到Konva.Layer的拖動。我的圖層有很多其他形狀和圖像。我需要將層的運動限制到它的寬度和高度的50％。我在這裏完成的方式plunkr.當用戶使用鼠標滾輪放大或縮小圖層時，會出現問題。放大後，我不知道爲什麼拖動界限的行爲有所不同。似乎我無法正確地做數學。我需要具有相同的行爲，即當用戶不執行縮放時，層的移動方式受到限制。這是我在做什麼：

//... 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); 

Answer 1

在使用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); 
}); 

http://plnkr.co/edit/31MUmOjXBUVuaHVJsL3c?p=preview