需求一：计算完成标尺前后位置，在缩放条件下要保持缩放总长度相同。
scale = 0.57
scale=1.0
解决：
计算完成坐标数组
在渲染坐标数组时，{((x / props.store.scale) * 100).toFixed(0)} 对坐标数值除以缩放比，还原为真实数值。
需求二：实现标尺基准线和标线效果
image.png
image.png
基准标线的位置 = 屏幕位置 - 画布左上角坐标 + 滚动条位移
# (屏幕位置 - 画布左上角坐标 - 0点偏移量) 是画布上真实的长度数值，除以缩放比还原为真实数据
基准标线显示数值 = (屏幕位置 - 画布左上角坐标 - 0点偏移量) / 缩放比
# 存储标线的坐标位置时，按照基准标线显示数值计算逻辑，存储真实数值。
标线位置 = 真实数值 * 缩放比 + 0点偏移量 + padding width
标线显示数值 = 真实数值
需求三：当有画布元素超出画布宽高，重新计算画布宽度，和居中位置
当图表超出画布宽高时，应该按照画布元素最左顶点和画布最左边最小值，画布最右顶点和画布最右边最大值，计算画布宽度。
因为画布总是居中于中间层画布，需要对（新计算宽度 - 原始画布宽度）* 2，保证两边增加相同距离，画布对称。
image.png
// 最大宽高
export const getMaxWidgetsLength = (
canvas_width: number,
canvas_height: number,
widgets?: WidgetPC[],
) => {
const wrapper_padding = 200; // 边框
let max_left = 0,
max_right = canvas_width,
max_top = 0,
max_bottom = canvas_height;
if (widgets) {
widgets.map((w) => {
if (w.x) {
max_left = max_left < w.x ? max_left : w.x; // 最左边最小值
max_right = max_right < w.x + w.w ? w.x + w.w : max_right; // 最大值
max_top = max_top < w.y ? max_top : w.y; // 最上边最小值
max_bottom = max_bottom < w.y + w.h ? w.y + w.h : max_bottom; // 最大值
}
});
}
/* 因为画位于中间层画布的中心位置，所以添加宽度和高度的时候，需要增加两倍的大小 */
const offset_x = max_right - max_left - canvas_width;
const offset_y = max_bottom - max_top - canvas_height;
return {
calc_width: canvas_width + 2 * offset_x + wrapper_padding,
calc_height: canvas_height + 2 * offset_y + wrapper_padding,
};
};
