可视化拖拽画布布局、标尺(3)

需求一：计算完成标尺前后位置，在缩放条件下要保持缩放总长度相同。

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,
    };
};