美文网首页
贴纸功能的各种操作

贴纸功能的各种操作

作者: 小螃蟹_5f4c | 来源:发表于2018-12-25 19:38 被阅读0次

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

移动:

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

移动 

缩放:

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

 缩放

翻转:

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

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

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

翻转 

旋转:

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

  旋转

粗俗的记录自己的东西~

来自很懒的小仙女~~

相关文章

  • 贴纸功能的各种操作

    接手一个项目就是主要就是对图片的各种操作,类似与我们平时玩的相机上的那种贴纸功能,我这里记录的主要有,单指缩放,,...

  • 2.4 手帐用贴纸

    和胶带功能类似的是贴纸,贴纸上是印制好的各种图案,能快速制作漂亮手帐。 贴纸主题 欧美品牌贴纸比较常见的是贺卡主题...

  • iOS 一款可绕指定点旋转、缩放的多功能贴纸

    iOS 一款可绕指定点旋转、缩放的多功能贴纸 支持双指手势操作,单指移动控制图操作,满足你所有需求 先上效果图: ...

  • 锦囊1【点问搜】Xmind

    第一【点】 各种按钮: 知道了如何新建笔记,子主题,添加符号和贴纸,自动平衡布局,更改颜色等基本功能。 有各种模版...

  • 简单有趣贴贴乐家庭便签打印真方便

    孩子们在学习中需要用到各种便签贴纸,家庭中也同样会遇到各种需要贴便签贴纸的地方。而传统的便签贴纸,都是固定画好边框...

  • 【iOS开发】制作一个简易的滤镜相机(四)

    上一篇我们实现了拍照功能。接下来我们可以加上贴纸功能。贴纸不是简单的加一个Image View(不然这篇文章没什么...

  • 简单-CPU的结功能构

    CPU功能:1.控制器功能 取指令 分析指令(指令控制) PC IR 执行指令,发出各种操作命令(操作控制)CU ...

  • 147.ProcessOn

    ProcessOn 功能有点简陋,正是因为简陋,所以操作简单,很容易上手,不会因为繁杂的操作项而眼花缭乱,各种功能...

  • 贴纸

    小时候特别喜欢收集各种各样的小贴纸,糖果纸,各种包装盒,包装袋。 长大了,最近开始做核酸,又开始集各种各样的贴纸,...

  • 我的电动牙刷

    今天妈妈给我买了一个电动牙刷,那个电动牙刷可以装的贴纸,那些贴纸各种各样,还有食物、眼镜和头饰,那些贴纸可...

网友评论

      本文标题:贴纸功能的各种操作

      本文链接:https://www.haomeiwen.com/subject/frhqlqtx.html