-
Notifications
You must be signed in to change notification settings - Fork 18
编辑器缩放
张郭璐 edited this page Jun 20, 2017
·
4 revisions
- previewWidth: 预览窗口的大小
- actualSize: 以多大的浏览器窗口大小作为基础缩放
- scaleSize: 缩放比例
- winWidth: 浏览器窗口大小
- 以1200px作为对比参数的原因:BootStrap将大桌面显示器大小定义为1200px,.container 等类的定义根据媒体查询的结果直接设置宽度,所以actualSize需要和winWidth处于BootStrap媒体查询的同一阶段内,防止页面显示出问题。
- 缩放的几种模式:适合宽度、实际大小、百分比显示
- 适合宽度:预览窗在适合宽度(没有滚动条)的情况下还能看清字,方便编辑
- 实际大小:网页的实际浏览效果,和在新窗口打开时一样
- 百分比
- 缩小按钮:若当前比例为70%,则缩小按钮点了一次后比例为50%;若当前为实际大小(实际比例为100%),则缩小按钮点了一次后比例为70%;若当前为适合宽度(假设算出来其缩小比例为60%),这缩小按钮点了一次后的比例为50%;若当前比例为30%,则禁用缩小按钮
- 放大按钮:若当前比例为70%,则放大按钮点了一次后比例为100%;若当前为实际大小(实际比例为100%),则禁用放大按钮;若当前为适合宽度(假设算出来其缩小比例为60%),这放大按钮点了一次后的比例为70%;若当前比例为100%,同样禁用放大按钮
- 自适应按钮:整个界面刚好充满预览窗口(没有横向滚动条)
- 若 previewWidth >= 1200px,则 actualSize=previewWidth, scaleSize=previewWidth/actualSize=1
- 若 previewWidth < 1200px && winWidth < 1200px,则 actualSize=winWidth, scaleSize=previewWidth/actualSize < 1
- 若 previewWidth < 1200px && winWidth >= 1200px,则 actualSize=1200px,scaleSize=prevewWidth/1200 < 1
- function resizeMod(val,scaleItem): val为缩放比,scaleItem为当前选择的缩放比的对象
- function getScaleSize(scroll):scroll为是否是滚动事件中加入,防止滚动过程重新修改适合宽度的实际大小
- function resizeResult(resultWidth):resultWidth为实际大小,给.result-html宽度设置为实际的显示大小,即可通过修改缩放比控制显示效果
- function getResultSize(winWidth,boxWidth):winWidth为浏览器窗口的大小,boxWidth为预览窗口大小,然后根据规则计算实际大小
- function findSize(larger,nowSize):这个函数当前缩放比例下再点击放大或缩小按钮时该显示的放大或者缩小的比例。larger用于判断是放大还是缩小,nowSize为当前缩放比例