leaferjs随可视宽度变化垂直居中缩放画板

序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。

背景

我们在前面的文章中讲述到画布的一些东西（好像是说过的），今天我们就说说画布跟随可视窗口的大小修改画布垂直居中并且缩放大小。

大家可能会想到这个功能有什么用，其实很有用的；比如：我们的侧边栏缩放然后让画布垂直居中。可以给用户更好的体验效果。所以是很有必要的。

创建画布

我们先创建一个简单的画布，通过Frame进行画布创建；这个时候我们如果创建1920*1080的画布时；我们的页面肯定是装不下的，那么怎么办呢？肯定是缩放画布啊！请看下面的示例：查看源码dom

// 初始化画布
const workspaceInit = (app: App, size: IWorkspaceSize = workspaceSize.value) => {
    if (!app.width || !app.height) return;
    // 画布大小
    workspaceSize.value = size;
    // 保存app
    appLeafer.value = app;
    // 初始化画布
    workspace.value = new Frame({
      width: workspaceSize.value.width,
      height: workspaceSize.value.height,
      // overflow: 'hide',
      editable: false,
      lockRatio: true,
      x: 0,
      y: 0,
      id: 'workspace',
      resizeChildren: true,
    });
    // 添加画布到app
    app.tree.add(workspace.value);
}

缩放画板垂直居中

这儿的逻辑如下：

• App是指canvas（画布）
• workspaceSize 是需要创建画板的宽高
• workspaceScaledWidth = 画布的宽度减去100（100是左右的距离）然后除以画板的宽就得到一个比例
• workspaceScaledHeight = 跟以上逻辑相同
• 然后去最小的为缩放比例
• 根据画布和画板高宽缩放计算left和top的距离
• 得到left和top的距离以后获取现有的距离，然后用现有的距离减去画布的距离即可
• 最后用move移动画布即可。

// 画布缩放以及移动
const workspaceScale = (App?: App) => {
    const app = App || (appLeafer.value as App);
    if (!app.width || !app.height || !workspace.value) return;
    // 缩放比列
    const workspaceScaledWidth = (app.width - 100) / workspaceSize.value.width;
    const workspaceScaledHeight = (app.height - 100) / workspaceSize.value.height;
    // 画布缩放比例
    scaleRatio.value = workspaceScaledWidth < workspaceScaledHeight ? workspaceScaledWidth : workspaceScaledHeight;
    // 画布移动距离
    const moveLeft = app.width / 2 - (workspaceSize.value.width / 2) * scaleRatio.value;
    const moveTop = app.height / 2 - (workspaceSize.value.height / 2) * scaleRatio.value;
    // 画布缩放->自身缩放比例
    const scale = workspace.value.scale as number;
    // 画布缩放->缩放比列
    workspace.value.scaleOf('top-left', scaleRatio.value / scale);
    // 获取画布原始位置->移动距离
    const x = app.tree.x ? moveLeft - app.tree.x : moveLeft;
    const y = app.tree.y ? moveTop - app.tree.y : moveTop;
    // app.tree.moveWorld(0, 0);
    // 移动画布
    app.tree.move({ x: x + 10, y: y + 10 });
};

总结

今天的分享就到这儿了，如果大家有什么不懂的可以评论留言或者查看源码dom希望对大家有所帮助。我们下期待见...