解决PDF居中放大且不被剪切的问题

在需求中遇到这样一个场景，想要对页面加载的PDF进行放大缩小，并且想要横向居中放大，以方便阅读。

由于加载PDF使用的是canvas方法，如果每次放大缩小都重新渲染一遍canvas来实现，那么会非常损耗性能。 并且我们为了保证PDF在各种尺寸下都保持清晰的文字显示效果，在canvas的外层包裹了一层div

<div class='pdf-wrapper'>
    <canvas id='pdf-1'></canvas>
</div>

.pdf-wrapper的样式特征为宽度width=screenWidth

为了解决放大缩小问题，我们在类pdf-wrapper的外层又包裹一层元素

<div id='pdf-scale'>
    <div class='pdf-wrapper'>
        <canvas id='pdf-1'></canvas>
    </div>
</div>

通过对#pdf-scale元素的样式进行transform scale的操作来实现PDF的放大缩小，并且要求是从中间进行放大，样式CSS代码如下：

transform: scale(2);
transform-origin: center top;

但是这样的写法遇到了一个问题 居中放大之后左边的部分被切掉了

为了解决这个问题，我们在#pdf-wrapper的外层再包裹一层作为滚动条的控制

<div class='pdf-scroll'>
    <div id='pdf-scale'>
        <div class='pdf-wrapper'>
            <canvas id='pdf-1'></canvas>
        </div>
    </div>
</div>

通过js控制.pdf-scroll的scrollLeft来达到水平居中放大，并且左边部分可以滑动（不被剪切）的效果

滑动距离的计算scrollLeft = （放大之后的宽度-原来的宽度）/2