持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
前言
我们在【手摸手带你实现可视化系统（一）】如何实现编辑面板的动态缩放？ （后面简称《一》） 中实现了主舞台编辑面板的动态缩放，具体实现的效果如下：
主舞台尺寸会随着中心区域的变化而变化。
乍一看挺好，但是局和我们实际的使用场景会发现存在一定的使用局限。
例如：
通常我们会设定一个最终要呈现设备的分辨率尺寸作为屏幕尺寸，我们以常见的1920 * 1080为例
我们设定的尺寸直接展示这个尺寸的主舞台显然不太合适， 那么我们需要缩放来达到合适的布局效果， 但是当我们拖放了一些元素到舞台上，想要看下实际的效果，又需要调整到 1920 * 1080 来看。
所以，我们需要更灵活的方式来控制舞台的尺寸 --- 缩放滑块。
思路
- 首先我们会在主舞台的底部增加一个
slider滑块，用来手动调整主舞台的缩放比例。
- 当主舞台动态计算完当前缩放比例的时候，回传给slider组件
- 用户手动滑动滑块之后，触发事件调整scale 4.调整布局方式，使主舞台大小超出外层容器，外层容器出现滚动条（难点）
这一步相对来说比较关键，因为主舞台的尺寸就是根据外层容器获取的，当主舞台缩放之后，其外层容器尺寸如果不跟着动态修改，必定会出现一定面积空白区域。
具体实现
还记得我们在《一》中实现获取缩放大小的方法吗：
stageResize() {
//外层容器的宽高
const { width, height } =
this.$refs.parentNode.getBoundingClientRect();
this.scale = Math.min(
width / this.screen.width,
height / this.screen.height
);
// console.log("width", width, this.scale);
},
我们这里也同样可以使用它来获取当前应该缩放的比例。
不过我们应该把他移动到它的父级组件中，然后通过 prop或者事件传递给主舞台组件。
这样做的原因大概有两点： 1. 避免频繁的触发scale的向上传递； 2. 缩放和布局都在父组件中控制，从主舞台组件解耦逻辑更清晰。
当slider组件触发change事件时触发handleScaleChange
handleScaleChange(val) {
this.scale = val;
this.$refs["main-screen"].updateScale(this.scale);
// 通知主舞台更新scale
this.updateParentStyle(this.scale);
},
调整布局方式，使主舞台大小超出外层容器，外层容器出现滚动条（难点）
updateParentStyle(scale) {
const { width, height, whUnit = "" } = this.screen;
this.contentStyle["width"] = width * scale + whUnit;
this.contentStyle["height"] = height * scale + whUnit;
},
这个事件的调用时机是在主舞台更新样式数据之后（准确点是在获取到scale之后）。
最终实现的效果：
总结
以上就是编辑面板主舞台的动态缩放实现思路。
本篇文章也是 手摸手带你实现可视化系统 的系列文章的第四篇，后续会持续分享在实现中遇到的难点和解决思路。
专栏地址 前端可视化
写在最后
我是superman，一个热爱分享的前端开发者。如果觉得本文还不错，记得三连+关注 您的鼓励是我坚持下去的最大动力❤️。
