KonvaJS

Question

我正在努力修改下面的代码，因此当在滚动上缩放时，图像正在缩放总是在图像的中心，而不取决于光标位置（所以图像不会移动，它只是缩放 in/out 不管你的光标在哪里，整个 canvas 总是在中心缩放。

所以问题是 - 如何始终在中心缩放图像？谢谢！

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green',
});
layer.add(circle);

layer.draw();

var scaleBy = 1.01;
stage.on('wheel', (e) => {
  e.evt.preventDefault();
  var oldScale = stage.scaleX();

  var pointer = stage.getPointerPosition();

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

  var newScale =
    e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

  stage.scale({
    x: newScale,
    y: newScale
  });

  var newPos = {
    x: pointer.x - mousePointTo.x * newScale,
    y: pointer.y - mousePointTo.y * newScale,
  };
  
  stage.position(newPos);
  stage.batchDraw();
});

<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
<div id="container"></div>

Answer 1

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green',
});
layer.add(circle);

layer.draw();

var scaleBy = 1.01;
stage.on('wheel', (e) => {
  e.evt.preventDefault();
  var oldScale = stage.scaleX();

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

  var relatedTo = {
    x: (center.x - stage.x()) / oldScale,
    y: (center.y - stage.y()) / oldScale,
  };

  var newScale =
    e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

  stage.scale({
    x: newScale,
    y: newScale
  });

  var newPos = {
    x: center.x - relatedTo.x * newScale,
    y: center.y - relatedTo.y * newScale,
  };
  
  stage.position(newPos);
  stage.batchDraw();
});

<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
<div id="container"></div>

Answer 2

这是@lavrton 回答的副本 - 将他的回答标记为正确，而不是这个！

@lavrton 的解决方案按您的要求工作。他的方法是在应用新的缩放之前注意舞台的中心，然后在应用缩放的情况下将舞台的角落偏移该量。因此，从概念上讲，当我们放大时，舞台的左上角会向上和向左移动。我修改了他的答案，添加了一个用颜色填充舞台的矩形，这样您就可以看到这个概念在起作用。

运行片段并缩小。放大时观看舞台左上角移动。

记得采纳@lavrton的回答！

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

// Added to illustrate stage position
var rect = new Konva.Rect({
  width: stage.width(),
  height: stage.height(),
  fill: 'magenta'
});
layer.add(rect);
// End of Added to illustrate stage position

var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green',
});
layer.add(circle);

layer.draw();

var scaleBy = 1.01;
stage.on('wheel', (e) => {
  e.evt.preventDefault();
  var oldScale = stage.scaleX();

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

  var relatedTo = {
    x: (center.x - stage.x()) / oldScale,
    y: (center.y - stage.y()) / oldScale,
  };

  var newScale =
    e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

  stage.scale({
    x: newScale,
    y: newScale
  });

  var newPos = {
    x: center.x - relatedTo.x * newScale,
    y: center.y - relatedTo.y * newScale,
  };
  
  stage.position(newPos);
  stage.batchDraw();
});

<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
<div id="container"></div>

KonvaJS - 缩放始终在 canvas 的中心

KonvaJS - zoom always in center of canvas

javascript

css

canvas