功能点
- pdf转canvas预览
- 手指移动 + 边界点的阻尼效果 + 回弹效果 + 移动中缓冲效果 + 滚动条 + 双指缩放
- 插件本身是点击按钮放大,每次放大会重新在原来的canvas上绘制,所占内存随着放大比例而增大,且是以坐标原点放大,如果用手势操作,增大width百分比,同时每页canvas的宽高相应增大,但是每个宿主浏览器对canvas的宽高,和总的内存占用都有限制要求,如果页数很多就直接白屏无法渲染,另体验很差,不流畅,每次缩放都重新绘制。考虑转成base64图片。
- 目前的放大会首先将canvas渲染成高像素,利用的是css3的scale(以对象的中心点放大,为保持缩放中心不变,需要同时将对象位移)
尚未解决的可优化项
- 跳转到下一个pdf时,先清除上个canvas,然后append下一个canvs,并不是插件中实现的效果(当前画布足够则仍旧用现有的canvas,不够再append)
- 这种方式需要清除保存在内存中的canvas,不明白插件是怎么实现清除canvas的
难点
- 以手指为中心的放大过程中计算位移
- 边界值的计算
<div class="list">
<div class="wrap" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<div class="pdf-canvas"></div>
</div>
<div class="load-more">下拉刷新</div>
<div class="scroll-bar-x"></div>
<div class="scroll-bar-y"></div>
</div>
.list {
position: relative;
overflow: hidden;
height: calc(80vh - 2.16rem);
.wrap{
position: relative;
z-index: 2;
min-height: calc(100% + 2px)
}
.load-more {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
.scroll-bar-x {
position: absolute;
top: 0;
right: 0;
width: 5px;
z-index: 5;
background: rgba(0, 0, 0, 0.6);
transition: 0,2s opacity;
border-radius: 8px;
}
}