Проблема перетаскивания изображения из области границы холста при панорамировании (KonvaJS Zoom / Pan) - PullRequest
Новая
       39

Проблема перетаскивания изображения из области границы холста при панорамировании (KonvaJS Zoom / Pan)

0 голосов
/ 07 ноября 2019

Репликация проблемы:

Я использую KonvaJS для реализации функции масштабирования / панорамирования. Как с увеличенными, так и с уменьшенными изображениями, панорамирование активно, и при панорамировании изображения оно перетаскивает границы холста.

Вы можете увидеть то, что я описал с помощью того, что я реализовал здесь: My-CodePen-Пример 

$('#zoomIn').on('click', function (e) {
e.preventDefault();
imgObj.draggable = true;

var oldScale = stage.scaleX();

var mousePointTo = {
  x: stage.width() / 2 / oldScale - stage.x() / oldScale,
  y: stage.height() / 2 / oldScale - stage.y() / oldScale
};

var newScale = oldScale * scaleBy;

stage.scale({ x: newScale, y: newScale });
var newPos = {
  x:
    -(mousePointTo.x - stage.width() / 2 / newScale) *
    newScale,
  y:
    -(mousePointTo.y - stage.height() / 2 / newScale) *
    newScale
};
stage.position(newPos);
stage.batchDraw();
})

Моя потребность как решенная проблема:

Однако мне нужна функция, чтобы активировать функцию панорамирования, только когда изображение увеличено итакже границы изображения остаются ограниченными холстом при панорамировании.

С тем, что я требую, чтобы KonvaJS применил его, вы можете ознакомиться здесь: PinchZoomer

...