Javascript 如何使用偏移和缩放确保边界框在Konva中始终完全可见？

我试图始终使用Konva显示边界框内的每个点

注意：我正在根据窗口的大小缩放所有内容，以尝试让所有内容都适合，无论窗口大小如何

我可以对正比例的图形执行此操作，如以下代码片段所示：

const points=[
[0, 0],
[100, 50],
[200, 200],
[-100, -100],
[-50, -50]
];
const xCoords=points.map（p=>p[0]）
constycoords=points.map（p=>p[1]）
常量边界框={
x1:Math.min（…xCoords），
x2:Math.max（…xCoords），
y1:Math.min（…yCoords），
y2:Math.max（…yCoords），
};
常量实际宽度=window.innerWidth*0.75；
常量实际高度=窗内高度*0.75；
const canvasWidth=boundingBox.x2-boundingBox.x1；
const canvasHeight=boundingBox.y2-boundingBox.y1；
const scale=Math.min(
实际宽度/画布宽度，
实际高度/画布高度
);
const stage=新Konva.stage({
容器：'容器'，
宽度：画布宽度，
高度：画布高度，
比例：{
x：比例，
y:比例，
},
偏移量：{
x:boundingBox.x1，
y：边界框。y1，
}
});
const layer=新的Konva.layer（）；
points.forEach（point=>{
const rect=新Konva.rect({
x:点[0]，
y:第[1]点，
宽度：10，
身高：10，
填充：每点（v=>v==0）？
“红色”：“绿色”，
});
const text=新Konva.text({
x:点[0]，
y:第[1]点，
文本：`（${point[0]}，${point[1]}）`，
填充：“黑色”，
尺寸：30，
fontFamily：“Calibri”，
});
层。添加（rect）；
图层。添加（文本）；
})
阶段。添加（层）
正文{
字体系列：arial；
}
我通过将偏移量更改为：

x: boundingBox.x1 + canvasWidth

这似乎在所有情况下都能解决问题


const points=[
[0, 0],
[100, 50],
[200, 200],
[-100, -100],
[-50, -50]
];
const xCoords=points.map（p=>p[0]）
constycoords=points.map（p=>p[1]）
常量边界框={
x1:Math.min（…xCoords），
x2:Math.max（…xCoords），
y1:Math.min（…yCoords），
y2:Math.max（…yCoords），
};
常量实际宽度=window.innerWidth*0.75；
常量实际高度=窗内高度*0.75；
const canvasWidth=boundingBox.x2-boundingBox.x1；
const canvasHeight=boundingBox.y2-boundingBox.y1；
const scale=Math.min(
实际宽度/画布宽度，
实际高度/画布高度
);
const stage=新Konva.stage({
容器：'容器'，
宽度：画布宽度，
高度：画布高度，
比例：{
x:-比例，
y:比例，
},
偏移量：{
x:boundingBox.x1+画布宽度，
y：边界框。y1，
}
});
const layer=新的Konva.layer（）；
points.forEach（point=>{
const rect=新Konva.rect({
x:点[0]，
y:第[1]点，
宽度：10，
身高：10，
填充：每点（v=>v==0）？
“红色”：“绿色”，
});
const text=新Konva.text({
x:点[0]，
y:第[1]点，
文本：`（${point[0]}，${point[1]}）`，
填充：“黑色”，
尺寸：30，
fontFamily：“Calibri”，
});
层。添加（rect）；
图层。添加（文本）；
})
阶段。添加（层）
正文{
字体系列：arial；
}