- 判定宽度是否超出可视区域
/** * 获取文档显示高度与缩放比例. * @param documents * @param origin */protected getHeightAndScale( documents?: HTMLDivElement, origin?: any): { height: number; scale: number;} { documents = documents ?? this.getContainer() as HTMLDivElement; let wrapperHeight = 0, lastScale = 0; if (documents) {const size = this.files.speaker,// 所记录的主讲人的屏幕尺寸width = documents.offsetWidth,// 当前用户显示容器的可视宽度height = documents.offsetHeight; // 当前用户显示容器的可视高度let originWidth;/** 获取原始文档宽度 */if (!origin) {const pagination = this.getActivePagination();originWidth = pagination.originWidth;} else {originWidth = origin[2];}/*** 计算主讲人的缩放比.* 往下出现的 200 / 150 之类的常数, 为设定好的显示偏移量.*/const speakerRatio = Math.round((size.width - 200) / originWidth * 100) / 100;/** 非主讲人默认以高度为基准来计算文档显示的缩放比例 */lastScale = Math.round(speakerRatio / (size.height - 150) * (height - 100) * 100) / 100;/** 如果以高度为基准的情况下, 判定宽度是否超出可视区域 */const destWidth = Math.round(originWidth * lastScale * 100) / 100,offsetWidth = width - (this.isSpeaker() ? 200 : 120),diffWidth = destWidth - offsetWidth;if (diffWidth > 0) {/*** 如果超出可视区域, 重新设定缩放比,* 文档内容显示所在的DIV容器, 将进一步缩小,* 以保证宽度在正常的可视区域内*/wrapperHeight = (Math.round((offsetWidth * (size.height - 150)) / (size.width - 200) * 100) / 100);lastScale = Math.round(offsetWidth / originWidth * 100) / 100;} } return {height: wrapperHeight,scale: lastScale };}总结翻页控制的代码我就不贴出来了 ， 与请求分片中的判定类似 。 总的实现 ， 没有太大的难点 ， 理清思路之后就很好实现了 ， 上传速度快慢先不说 ， 秒传校验通过的情况下 ， 基本在 16ms 内完成 Content Download ， 直至页面渲染出来 ， 整个过程大概 1s 左右 ， 有个前提是我的实现是等 5 个分页都渲染完成后又进行了一系列的涂鸦初始化操作后的时间 ， 不做其它处理 ， 只做展示 ， 速度将会更快 。
