pdf转canvas，双指缩放

功能点

1. pdf转canvas预览
2. 手指移动 + 边界点的阻尼效果 + 回弹效果 + 移动中缓冲效果 + 滚动条 + 双指缩放
3. 插件本身是点击按钮放大，每次放大会重新在原来的canvas上绘制，所占内存随着放大比例而增大，且是以坐标原点放大，如果用手势操作，体验很差，不流畅，每次缩放都重新绘制。
4. 目前的放大会首先将canvas渲染成高像素，利用的是css3的scale（以对象的中心点放大，为保持缩放中心不变，需要同时将对象位移）

尚未解决的可优化项

1. 跳转到下一个pdf时，先清除上个canvas，然后append下一个canvs，并不是插件中实现的效果（当前画布足够则仍旧用现有的canvas，不够再append）
2. 这种方式需要清除保存在内存中的canvas，不明白插件是怎么实现清除canvas的

难点

1. 以手指为中心的放大过程中计算位移
2. 边界值的计算

    <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;
    }
}
复制代码