移动端缩放平移panzoom.js的使用方法

天啦噜这百度推荐搜索简直坑死人。
来正确的来一波。
首先引用panzoom.js。官方下载太坑，咋用缩放都是失效的。
公开云盘大家自己取哈，用我盘里这个https://pan.baidu.com/s/1M3hnWZExIfYBH_PcRGeaxA
html：

image.png

js

缩放和平移的时候我们可以注意到是.panzoom元素中会出现
css:

    transform: matrix(1, 0, 0, 1, 0, 0);
    backface-visibility: hidden;
    transform-origin: 50% 50% 0px;
    cursor: move;

随着平移和缩放变化的是：

    transform: matrix(1, 0, 0, 1, 0, 0);

这一行

image.png

transform: matrix大家可以去百度是css中比较高级的，与矩阵有关的属性。好我们直接跳过原理解决问题
1.x轴的缩放比例
2.y轴的缩放比例
3.x轴平移距离
4.y轴平移距离
当然第二三个0，0是跟旋转角度有关，我这里暂时用不到这个以后再补充好吗
好了，大家赶紧干活吧
哈哈哈哈