Javascript 调整X轴和scaleXY，使画布在缩小后保持在中心位置

我想使用Konva js完成以下任务：

1-循环数据库中的数据，然后在画布上绘制组，组包含圆圈+文本

2-当形状增加时，缩小以使其保持在中间

我遇到的挑战是：

当形状超过层宽度时，我开始变焦，但我不能把它们放在中间。

如何根据形状计算层x轴以保持画布居中

我如何计算缩放以保持新形状的位置而不缩小太多

先谢谢你

---

请查找：

首先，我以前从未使用过

Konva

，因此可能还有其他比这更简单的解决方案

使用

getClientRect

stage的边界，比较其宽度和高度，找到合适的比例，然后将其平移到中心

const adjustStage=功能（阶段）{
let width=stage.width（）
让高度=舞台高度（）
设scaleX=stage.scaleX（）
设scaleY=stage.scaleY（）
设rect=stage.getClientRect（）
//计算每个轴上适合舞台的比例，然后选择较小的一个
让scale=Math.min(
宽度/矩形宽度，
高度/垂直高度
)
舞台音阶({
x:scaleX*比例，
y:scaleY*scale
})
//获取新的缩放矩形
rect=stage.getClientRect（）
//计算每个轴上两个中心之间的距离差。
舞台动作({
x:width/2-（矩形x+rect.width/2），
y:height/2-（矩形y+rect.height/2）
})
stage.draw（）
}

---

结果

首先，我以前从未使用过

Konva

，因此可能还有其他比这更简单的解决方案

使用

getClientRect

stage的边界，比较其宽度和高度，找到合适的比例，然后将其平移到中心

const adjustStage=功能（阶段）{
let width=stage.width（）
让高度=舞台高度（）
设scaleX=stage.scaleX（）
设scaleY=stage.scaleY（）
设rect=stage.getClientRect（）
//计算每个轴上适合舞台的比例，然后选择较小的一个
让scale=Math.min(
宽度/矩形宽度，
高度/垂直高度
)
舞台音阶({
x:scaleX*比例，
y:scaleY*scale
})
//获取新的缩放矩形
rect=stage.getClientRect（）
//计算每个轴上两个中心之间的距离差。
舞台动作({
x:width/2-（矩形x+rect.width/2），
y:height/2-（矩形y+rect.height/2）
})
stage.draw（）
}

---

结果

感谢您抽出时间回答！我很感激你给我的建议，它真的很有用！感谢您花时间回答！我很感激你给我的建议，它真的很有用！