Javascript KonvaJS-始终在画布中心缩放

我正在努力修改下面的代码，以便在滚动缩放时，图像始终在图像的中心进行缩放，而不取决于光标的位置（因此图像不会移动，只是放大/缩小并不重要，整个画布始终在中心进行缩放）

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

var-width=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度:高度,，
});
var layer=新Konva.layer（）；
阶段。添加（层）；
var circle=新Konva.circle({
x:stage.width（）/2，
y:舞台高度（）/2，
半径：50，
填充：“绿色”，
});
图层。添加（圆圈）；
layer.draw（）；
var scaleBy=1.01；
舞台上（‘轮子’，（e）=>{
e、 evt.preventDefault（）；
var oldScale=stage.scaleX（）；
var pointer=stage.getPointerPosition（）；
var mousepointo={
x:（pointer.x-stage.x（））/oldScale，
y：（pointer.y-stage.y（））/oldScale，
};
var新闻量表=
e、 evt.deltaY>0？旧比例*比例比：旧比例/比例比；
舞台音阶({
x：新闻级，
y:新音阶
});
var newPos={
x:pointer.x-mousepointo.x*新闻缩放，
y:pointer.y-mousepointo.y*新闻缩放，
};
舞台位置（newPos）；
stage.batchDraw（）；
});


var-width=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度:高度,，
});
var layer=新Konva.layer（）；
阶段。添加（层）；
var circle=新Konva.circle({
x:stage.width（）/2，
y:舞台高度（）/2，
半径：50，
填充：“绿色”，
});
图层。添加（圆圈）；
layer.draw（）；
var scaleBy=1.01；
舞台上（‘轮子’，（e）=>{
e、 evt.preventDefault（）；
var oldScale=stage.scaleX（）；
变量中心={
x:stage.width（）/2，
y:舞台高度（）/2，
};
var relatedTo={
x:（center.x-stage.x（））/oldScale，
y：（center.y-stage.y（））/oldScale，
};
var新闻量表=
e、 evt.deltaY>0？旧比例*比例比：旧比例/比例比；
舞台音阶({
x：新闻级，
y:新音阶
});
var newPos={
x:center.x-relatedTo.x*newScale，
y:center.y-related.y*newScale，
};
舞台位置（newPos）；
stage.batchDraw（）；
});
这是@lavrton答案的副本-将他的答案标记为正确，而不是这一个

@拉夫顿的解决方案按照您的要求工作。他的方法是在应用新的缩放之前注意舞台的中心，然后在应用缩放时将舞台的角偏移该量。因此，在概念上，舞台的左上角随着我们的放大而上下移动。我修改了他的答案，添加了一个矩形，用颜色填充舞台，这样你就可以在工作中看到这个概念

运行代码段并缩小。在缩放时，观察舞台左上角的移动

记住接受@lavrton的回答


var-width=window.innerWidth；
var height=window.innerHeight；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度:高度,，
});
var layer=新Konva.layer（）；
阶段。添加（层）；
//添加以说明舞台位置
var rect=新Konva.rect({
宽度：stage.width（），
高度：stage.height（），
填充：“洋红”
});
层。添加（rect）；
//添加结尾以说明舞台位置
var circle=新Konva.circle({
x:stage.width（）/2，
y:舞台高度（）/2，
半径：50，
填充：“绿色”，
});
图层。添加（圆圈）；
layer.draw（）；
var scaleBy=1.01；
舞台上（‘轮子’，（e）=>{
e、 evt.preventDefault（）；
var oldScale=stage.scaleX（）；
变量中心={
x:stage.width（）/2，
y:舞台高度（）/2，
};
var relatedTo={
x:（center.x-stage.x（））/oldScale，
y：（center.y-stage.y（））/oldScale，
};
var新闻量表=
e、 evt.deltaY>0？旧比例*比例比：旧比例/比例比；
舞台音阶({
x：新闻级，
y:新音阶
});
var newPos={
x:center.x-relatedTo.x*newScale，
y:center.y-related.y*newScale，
};
舞台位置（newPos）；
stage.batchDraw（）；
});

仅作检查-此问题通常以稍微不同的角度提出，即如何使用鼠标下的点缩放或点击保持在同一位置，这就是您的代码片段所做的。因此，为了澄清问题，您希望缩放的中心是什么？是特定的形状还是画布的中心？@VanquishedWombat谢谢您的评论。在画布的中央。因此，如果我移除滚动侦听器，使用带+/-的按钮，那么单击+和-将放大或缩小整个画布，始终在中间。您可以在上共享您的输入吗