注意:transform的scale为负数时,图片会垂直翻转
一、在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量。在第一次移动过后。当进行第二次移动时,我们需要在第一次移动的位置基础上再次进行差量移动,所以首先需要创建一个公共变量来存储上次的位置。所以需要我们在每次touchstart的时候通过window.getComputedStyle(document.getElementById('div_bg_img'), null)
获取到当前图片的css属性,来获取到tranform当前的位置并赋值给公共对象。而且在touchmove的时候,每次赋值给图片transform属性时,需要在公共对象的基础上进行变化
$el.css('transform', `translate3d(${dragTrans.x + transform.x}px,${dragTrans.y + transform.y}px,0px) rotate(${dragTrans.rotate + transform.rotate}deg) scale(${dragTrans.scale * transform.scale})`);
 
二、canvas画布的transform
canvas的transform和图片tranform不一致,主要是canvas的transform永远以画布左上角原点为中心而csstransform可以以图片中心为原点。
所以canvas的图片缩放和旋转都需要做相应的调整。
eg:canvas实现中心旋转:
ctx.translate(width / 2, height / 2 );
ctx.rotate(angle * Math.PI / 180);
ctx.translate(-width / 2,-height / 2 ); eg:canvas实现中心缩放:
ctx.translate(width / 2 * (1 - scaleX), height / 2 * (1 - scaleY));
ctx.scale(scaleX, scaleY);
 
 
三、eg:截取部分我的代码(处理canvas画布旋转加缩放)
ctx.clearRect(0, 0, bg2.width * imageQuality, bg2.height * imageQuality);
let diagonalPointX = (width/2 + trans.x);
let diagonalPointY = (height/2 + trans.y);
preRotate = trans.rotate;
ctx.translate(diagonalPointX * imageQuality, diagonalPointY * imageQuality);
ctx.rotate(trans.rotate*Math.PI/180);
ctx.translate((-width / 2 + (1 - trans.scale) * width / 2) * imageQuality, (-height / 2 + (1 - trans.scale) * height / 2) * imageQuality );
ctx.scale(trans.scale, trans.scale);
if (orientation == 6){
ctx.rotate(90 * Math.PI / 180);
ctx.translate(0, -width * imageQuality);
ctx.drawImage(pure_img, 0, 0, height * imageQuality, width * imageQuality);
}
else{
ctx.drawImage(pure_img, 0, 0, width * imageQuality, height * imageQuality);
}
 
 

前端手势控制图片插件书写三(将transform变化应用在图片和canvas画布上)的更多相关文章

  1. 前端手势控制图片插件书写二(transform矩阵的原理)

    上次解释了如何使用代码识别双指和单指操作及放大和旋转拖动操作.这次解释下css3的transform原理 一.transform矩阵原理 transform: matrix(a,b,c,d,e,f) ...

  2. 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)

    1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...

  3. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  4. Swift实战-豆瓣电台(九)简单手势控制暂停播放(全文完)

    Swift实战-豆瓣电台(九)简单手势控制暂停播放 全屏清晰观看地址:http://www.tudou.com/programs/view/tANnovvxR8U/ 这节我们主要讲UITapGestu ...

  5. JQuery开发之Galleriffic图片插件介绍

    Galleriffic是一个用于创建快速展示相册中照片的jQuery插件.从图一中可以看成,图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看.Galleriffic还支持分页,从而使得它能够展示 ...

  6. Unity3D中使用Leap Motion进行手势控制

    Leap Motion作为一款手势识别设备,相比于Kniect,长处在于准确度. 在我的毕业设计<场景漫游器>的开发中.Leap Motion的手势控制作为重要的一个环节.以此,谈谈开发中 ...

  7. cropper(裁剪图片)插件使用(案例)

    公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

  8. Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin

    Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pag ...

  9. 猫猫学iOS之小知识之_xcode插件的删除方法_自己主动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自己主动提示,

    猫猫分享,必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:解决解决自己主动提示图片插件KSImageNamed有时不 ...

随机推荐

  1. Codeforces Round #590 (Div. 3)【D题:26棵树状数组维护字符出现次数】

    A题 题意:给你 n 个数 , 你需要改变这些数使得这 n 个数的值相等 , 并且要求改变后所有数的和需大于等于原来的所有数字的和 , 然后输出满足题意且改变后最小的数值. AC代码: #includ ...

  2. java web项目为什么我们要放弃jsp?(转)

    前戏: 以前的项目大多数都是java程序猿又当爹又当妈,又搞前端(ajax/jquery/js/html/css等等),又搞后端(java/mysql/Oracle等等). 随着时代的发展,渐渐的许多 ...

  3. Selenium高亮显示定位到的元素

    在调试Selenium脚本中,有时因为操作太快或操作不明显而不清楚是否定位到了正确的元素.我们可用通过执行js为定位到的元素添加样式,来高亮显示定位到的元素. 在Selenim Webdriver中, ...

  4. 前端逼死强迫症之css续集

    上节内容回顾 如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. 因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度.解决: < ...

  5. 常用SQL之日期格式化和查询重复数据

    本文列举一些工作中常用的SQL,以提升工作效率. 1 日期格式化 使用 DATE_FORMAT(get_date, '%Y-%m-%d') 函数进行格式化.其中:get_date 是需要被格式化的字段 ...

  6. nginx open_file_cache指令影响静态文件更新时间

    有这样的需求,客户上传图片,覆盖以前的图片,因为客户可能会频繁的换图片,上传覆盖完后,页面会自动请求刚才的图片,图片已经换掉,但是url并没有换,因为图片名字没改. 因为更新的图要及时显示所以这个目录 ...

  7. WIN7+QT5.2.0 连接oracle11g问题及解决方法

    用下面的代码建立连接之后,出现了几个问题 //连接数据库 QSqlDatabase db = QSqlDatabase::addDatabase("QOCI"); /**连接Ora ...

  8. golang sqlx查询时, struct字段冲突

    type TA struct { Id int64 `db:"id"` } type TB struct { Id int64 `db:"id"` } type ...

  9. centos7 设置 tomcat 开机自启

    1.创建文件 # vi /etc/systemd/system/tomcat.service [Unit] Description=Tomcat8540 After=syslog.target net ...

  10. 分组背包---P1757 通天之分组背包

    P1757 通天之分组背包 题解 分组背包板子题 k组物品,每组之间相互矛盾,也就是一组里面只能选一个或者不选 分组背包其实和01背包差不多,就是多加一维枚举组数 f[k][j] 前k组中,体积不超过 ...