前端手势控制图片插件书写三（将transform变化应用在图片和canvas画布上）

注意：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);
}