Skip to content
张郭璐 edited this page Jun 20, 2017 · 4 revisions

本文档部分参数备注:

  1. previewWidth: 预览窗口的大小
  2. actualSize: 以多大的浏览器窗口大小作为基础缩放
  3. scaleSize: 缩放比例
  4. winWidth: 浏览器窗口大小
  5. 以1200px作为对比参数的原因:BootStrap将大桌面显示器大小定义为1200px,.container 等类的定义根据媒体查询的结果直接设置宽度,所以actualSize需要和winWidth处于BootStrap媒体查询的同一阶段内,防止页面显示出问题。

需求

  1. 缩放的几种模式:适合宽度、实际大小、百分比显示
  2. 适合宽度:预览窗在适合宽度(没有滚动条)的情况下还能看清字,方便编辑
  3. 实际大小:网页的实际浏览效果,和在新窗口打开时一样
  4. 百分比

特殊按钮(缩小、放大、自适应)逻辑需求(假设下拉选择比例的有30%、50%、70%、100%、实际大小、适合宽度这几种):

  1. 缩小按钮:若当前比例为70%,则缩小按钮点了一次后比例为50%;若当前为实际大小(实际比例为100%),则缩小按钮点了一次后比例为70%;若当前为适合宽度(假设算出来其缩小比例为60%),这缩小按钮点了一次后的比例为50%;若当前比例为30%,则禁用缩小按钮
  2. 放大按钮:若当前比例为70%,则放大按钮点了一次后比例为100%;若当前为实际大小(实际比例为100%),则禁用放大按钮;若当前为适合宽度(假设算出来其缩小比例为60%),这放大按钮点了一次后的比例为70%;若当前比例为100%,同样禁用放大按钮
  3. 自适应按钮:整个界面刚好充满预览窗口(没有横向滚动条)

实际大小以及缩放比的规则:

  1. 若 previewWidth >= 1200px,则 actualSize=previewWidth, scaleSize=previewWidth/actualSize=1
  2. 若 previewWidth < 1200px && winWidth < 1200px,则 actualSize=winWidth, scaleSize=previewWidth/actualSize < 1
  3. 若 previewWidth < 1200px && winWidth >= 1200px,则 actualSize=1200px,scaleSize=prevewWidth/1200 < 1

和缩放比相关的函数:

  1. function resizeMod(val,scaleItem): val为缩放比,scaleItem为当前选择的缩放比的对象
  2. function getScaleSize(scroll):scroll为是否是滚动事件中加入,防止滚动过程重新修改适合宽度的实际大小
  3. function resizeResult(resultWidth):resultWidth为实际大小,给.result-html宽度设置为实际的显示大小,即可通过修改缩放比控制显示效果
  4. function getResultSize(winWidth,boxWidth):winWidth为浏览器窗口的大小,boxWidth为预览窗口大小,然后根据规则计算实际大小
  5. function findSize(larger,nowSize):这个函数当前缩放比例下再点击放大或缩小按钮时该显示的放大或者缩小的比例。larger用于判断是放大还是缩小,nowSize为当前缩放比例
Clone this wiki locally