贴纸功能的各种操作

接手一个项目就是主要就是对图片的各种操作，类似与我们平时玩的相机上的那种贴纸功能，我这里记录的主要有，单指缩放，，移动，翻转，旋转的操作，图片的四周一边一个icon，点击或者拖动实现操作。

移动：

移动还是比较简单(这里只移动了水平位置)

移动 

缩放：

缩放做的不管图片怎么旋转，手指往图片里面拉动是缩小，往外面拉是放大，所以旋转的思路是：在触摸开始的时候记录下触摸点到图片中心的距离，在移动的过程中计算触摸点到图片中心的距离和上一次的触摸点到图片中心的距离的变化，如果变大则是往外拉，即放大，如果变小 即是往里面拉 即缩小。图片每次变化的距离就是这次触摸点和上次触摸点的变变化值。图片宽度加上这个值，图片高度按比例变化即可（关键移动代码）；

 缩放

翻转：

翻转就是在朝着Y轴旋转180度，因为既有旋转又有翻转 ，所以为了不影响好像就用了rotate3d 参数链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate3d 使用的时候用两个变量记录分别的度数。transform的时候写上两个就行

这里我遇到一个问题 就是使用transform之后导致z-index失效 

经典问题 我的解决办法是在父元素加了overflow：hidden 原因可百度

翻转 

旋转：

旋转是好像通过斜率计算的 ，具体的我得再看看

  旋转

粗俗的记录自己的东西～

来自很懒的小仙女～～