canvas 2d 贴图技术实践

　　最近在公司内部的技术协会论坛里闲逛的时候，无意中发现了一篇手淘前端大牛岑安两年前写的博文，讲述了canvas的2d贴图技术。看到后觉得相当神奇。于是就自己实现了一下。不过岑安前辈的那篇博文也只是大概讲述了一下实现思路，整个逻辑还是自己慢慢摸索出来的，过程还是挺心酸的，所以在此记录一下并且分享一下，让跟我一样喜欢canvas的人有所收获吧。

　　废话不说，先把demo贴出来，好歹让大伙看看我们要实现怎样的效果：

　　第一个demo： 图像拉扯变形demo_1

　　第二个demo： 图像3d变形demo_2

　　看完demo，是否觉得挺好玩的？

　　如果觉得好玩，那就继续看下去吧，接下来我将逐步分析整个实现逻辑。主要讲的就是第一个demo的实现逻辑，因为第二个就是在第一个的基础上实现的，只要理解了第一个的原理，第二个就变得很简单了。

　　第一个demo中，实现了对图像的拉扯，涉及到这种变形的，首先想到的就是transform，没错，就是canvas的2d绘图API中的transform啦。transform方法中传入的abcdef六个值就是变换矩阵的参数。也就是说，我们可以通过修改这六个值来实现对图片的变形操作。

　　transform() 允许您缩放、旋转、移动并倾斜当前的环境。如果对transform不是很了解的，可以看这篇博文：http://yehao.diandian.com/post/2012-12-30/40046242001 里面讲的还是很详细的。

　　


　　了解了transform之后，你会发现，transform能做的，好像就只有缩放、旋转、移动、倾斜这几个功能。但是demo1中可以拉扯成各种形状，感觉不像是用这几个就能实现的。但是其实，还真就是用这几个变换实现的。

　　demo1贴图右侧有个数值选择，当选择1，并且选择显示方框的时候，我们看到是这样一个画面：

　　


　　没错，这个是什么意思呢，说明这张图片其实分成了两块，左上角的三角形以及右下角的三角形，我们拖动一下图片，再看一下效果：

　　


　　为了方便理解，我加了辅助线，画了辅助线后，就变得很简单了，相当于分成了两块，上面正常的图片，一块是变成了由红色圈起来的，另一块则是变成了由黑色圈起来的，当用画笔补全后，两个三角形都其实是一个平行四边形，而从矩形变成平行四边形，transform就能做了，当变成我们需要的形状的时候，再通过canvas的clip方法，只截取一半的三角形，把两块三角形合并起来。就有了拉扯效果了。

　　而为了让拉扯效果更真实，就自然就需要使用更多的三角区域，当我把矩形分成20*20个小矩形，也就是20*20*2个三角形的时候，当鼠标拉扯时就出现了以下效果：

　　


　　以上，就是demo1的整个理论逻辑。

　　接下来就讲代码该如何实现：

　　首先是图片的变形效果，也就是用transform，要传入矩阵参数，起初我是用向量来做的，但是做到后面发现向量做起来会有好多其他问题。比如：图片拉扯过度的时候，图片翻转就出问题了，等等。。。

　　所以最后，还是选择了用代数法来实现，也就是要解三元一次方程！！！！

　　为啥说是三元一次方程呢？因为按照transform的矩阵运算的规则

　　　　　　　　　　　　 |a , b , 0|

　　[X,Y,1] = [x , y , 1] * |c , d , 0|

　　　　　　　　　　　　|e , f , 1|

　　解出来就是这样：X = ax + cy +e 和 Y = bx + dy + f ， 也就是，新的坐标的XY值就等于旧的坐标的xy值进行一些运算后可以得到。

　　相对的，也就是说，只要我们知道了平行四边形三个顶点变换前后的坐标值，我们就可以算出abcdef六个矩阵参数，然后我们先用transform改变绘制环境，再把图片绘制到平行四边形变换前的位置，就可以绘制出相应的倾斜效果了。

　　所以，首先我们要封装出一个解三元一次方程以及获取矩阵参数的方法：

　　先是解三元一次方程的方法，具体原理我就不讲了，百度一下就知道了，或者有琢磨精神的可以自己亲自拿笔算一下：

/**
* 解三元一次方程，需要传入三组方程参数
* @param arr1        第一组参数
* @param arr2        第二组参数
* @param arr3        第三组参数
* @returns {{x: number, y: number, z: number}}
*/
function equation(arr1 , arr2 , arr3){
var a1 = +arr1[0];
var b1 = +arr1[1];
var c1 = +arr1[2];
var d1 = +arr1[3];

var a2 = +arr2[0];
var b2 = +arr2[1];
var c2 = +arr2[2];
var d2 = +arr2[3];

var a3 = +arr3[0];
var b3 = +arr3[1];
var c3 = +arr3[2];
var d3 = +arr3[3];

//分离计算单元
var m1 = c1 - (b1 * c2 / b2);
var m2 = c2 - (b2 * c3 / b3);
var m3 = d2 - (b2 * d3 / b3);
var m4 = a2 - (b2 * a3 / b3);
var m5 = d1 - (b1 * d2 / b2);
var m6 = a1 - (b1 * a2 / b2);

//计算xyz
var x = ((m1 / m2) * m3 - m5)/((m1 / m2) * m4 - m6);
var z = (m3 - m4 * x) / m2;
var y = (d1 - a1 * x - c1 * z) / b1;

return {
x : x,
y : y,
z : z
}
}

　　然后就是获取矩阵，其实就是将各个参数整理一下，传入解方程的方法中，进行处理：　

/**
* 根据变化前后的点坐标，计算矩阵
* @param arg_1     变化前坐标1
* @param _arg_1    变化后坐标1
* @param arg_2     变化前坐标2
* @param _arg_2    变化后坐标2
* @param arg_3     变化前坐标3
* @param _arg_3    变化后坐标3
* @returns {{a: number, b: number, c: number, d: number, e: number, f: number}}
*/
function getMatrix(arg_1 , _arg_1 , arg_2 , _arg_2 , arg_3 , _arg_3){
//传入x值解第一个方程 即  X = ax + cy + e 求ace
//传入的四个参数，对应三元一次方程：ax+by+cz=d的四个参数：a、b、c、d，跟矩阵方程对比c为1
var arr1 = [arg_1.x , arg_1.y , 1 , _arg_1.x];
var arr2 = [arg_2.x , arg_2.y , 1 , _arg_2.x];
var arr3 = [arg_3.x , arg_3.y , 1 , _arg_3.x];

var result = equation(arr1 , arr2 , arr3);

//传入y值解第二个方程 即  Y = bx + dy + f 求 bdf
arr1[3] = _arg_1.y;
arr2[3] = _arg_2.y;
arr3[3] = _arg_3.y;

var result2 = equation(arr1 , arr2 , arr3);

//获得a、c、e
var a = result.x;
var c = result.y;
var e = result.z;

//获得b、d、f
var b = result2.x;
var d = result2.y;
var f = result2.z;

return {
a : a,
b : b,
c : c,
d : d,
e : e,
f : f
};
}

　　计算完毕，就可以获取到六个矩阵参数了。

　　这两个计算看似简单，但是一不小心就容易出错，楼主之前做的时候就一直出错，一直不知道原因在哪，最后手动把三元一次方程解了一遍，才发现是某个参数错了。所以楼主把这两个计算封装了一下，以便以后再利用：

　　github地址：https://github.com/whxaxes/wheels/tree/master/matrix 　　有兴趣或者有需要的可以一用

　　回归正题，到了现在，我们就可以获取到所有的矩阵参数了，接下来要解决的问题，就是如何把任意四个点连线形成的四边形分成N份的逻辑了（注意：是任意四个点，因为拉升之后，四个点形成的坐标就不是矩形了）。这个就可以用向量来做了，用向量的话，计算量会小很多，对性能的提升也是很有帮助。

　　怎么实现呢，画个图就清晰了：

　　


　　我们只需要获取到AD向量，以及BC向量，把两个向量N等分，然后用个循环，在每一等分上获取AB方向的向量，然后再进行N等分，再计算，就可以获取到所有的点了。因为用的是向量，所以我们完全不用考虑角度的问题，无论四边形的形状如何，只要我们有四个点的坐标，就可以计算出里面的所有点坐标。代码如下：

/**
* 将abcd四边形分割成n的n次方份，获取n等分后的所有点坐标
* @param n     多少等分
* @param a     a点坐标
* @param b     b点坐标
* @param c     c点坐标
* @param d     d点坐标
* @returns {Array}
*/
function rectsplit(n , a , b , c , d){
//ad向量方向n等分
var ad_x = (d.x - a.x)/n;
var ad_y = (d.y - a.y)/n;
//bc向量方向n等分
var bc_x = (c.x - b.x)/n;
var bc_y = (c.y - b.y)/n;

var ndots = [];
var x1, y1, x2, y2, ab_x, ab_y;

//左边点递增，右边点递增，获取每一次递增后的新的向量，继续n等分，从而获取所有点坐标
for(var i=0;i<=n;i++){
//获得ad向量n等分后的坐标
x1 = a.x + ad_x * i;
y1 = a.y + ad_y * i;
//获得bc向量n等分后的坐标
x2 = b.x + bc_x * i;
y2 = b.y + bc_y * i;

for(var j=0;j<=n;j++){
//ab向量为：[x2 - x1 , y2 - y1]，所以n等分后的增量为除于n
ab_x = (x2 - x1)/n;
ab_y = (y2 - y1)/n;

ndots.push({
x: x1 + ab_x * j,
y: y1 + ab_y * j
})
}
}

return ndots;
}

　　计算完毕，并且把点绘制到各个坐标上的时候，拖动四个顶点，就出现了以下效果，无论我的四个顶点位置如何变幻，都能保证所有点的位置不会错。

　　


　　当这个也计算完毕，整个demo的制作就基本上完成了，然后就是进行图片的渲染了，接下来的逻辑就相当简单了，先是用上面的rectsplit方法把当前的四边形分成N份，并且获取所有坐标点，当然还需要直接获取初始四边形分成N份后的所有坐标点，不过这个是可以在刚开始的时候就初始化好，因为这个数值是不会变的，没必要重复计算。

　　两组点坐标获取到，然后传入方法里计算矩阵，以及进行clip处理，再把图片绘制上去，整个渲染过程就完成了。

/**
* 画布渲染
*/
function render(){
ctx.clearRect(0,0,canvas.width,canvas.height);

var ndots = rectsplit(count, dots[0], dots[1], dots[2], dots[3]);

ndots.forEach(function(d , i){
//获取四边形的四个点
var dot1 = ndots[i];
var dot2 = ndots[i + 1];
var dot3 = ndots[i + count + 2];
var dot4 = ndots[i + count + 1];

//获取初始四边形的四个点
var idot1 = idots[i];
var idot2 = idots[i + 1];
var idot3 = idots[i + count + 2];
var idot4 = idots[i + count + 1];

if (dot2 && dot3 && i%(count+1)<count){
//绘制三角形的下半部分
renderImage(idot3, dot3, idot2, dot2, idot4, dot4);

//绘制三角形的上半部分
renderImage(idot1, dot1, idot2, dot2, idot4, dot4);
}

if(hasDot){
ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(d.x-1 , d.y-1 , 2 , 2);
ctx.save();
}
});
}

/**
* 计算矩阵，同时渲染图片
* @param arg_1
* @param _arg_1
* @param arg_2
* @param _arg_2
* @param arg_3
* @param _arg_3
*/
function renderImage(arg_1 , _arg_1 , arg_2 , _arg_2 , arg_3 , _arg_3){
ctx.save();
//根据变换后的坐标创建剪切区域
ctx.beginPath();
ctx.moveTo(_arg_1.x, _arg_1.y);
ctx.lineTo(_arg_2.x, _arg_2.y);
ctx.lineTo(_arg_3.x, _arg_3.y);
ctx.closePath();
if(hasRect){
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.stroke();
}
ctx.clip();

if(hasPic){
//传入变换前后的点坐标，计算变换矩阵
var result = matrix.getMatrix.apply(this , arguments);

//变形
ctx.transform(result.a , result.b , result.c , result.d , result.e , result.f);

//绘制图片
ctx.drawImage(img , idots[0].x , idots[0].y , img.width , img.height);
}

ctx.restore();
}

　　

　　至此，demo1的整个理论原理以及代码逻辑都分析完毕，下面贴出该项目的github地址：

　　https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/transform　　

　　

　　当demo1做出来的时候，demo2也就很简单了，因为，只要我们知道四边形的各个点变换前后的坐标值，我们就可以让图片变形成任何我们想要的样子。

　　而上面的demo2就是在demo1的基础上，加入了z轴的影响，x，y轴都仅仅是平面上的，当加入了z轴以后，再将z轴的值映射到x，y轴上来，然后再进行图片变换，就有了demo2的效果。demo2的源码也在上面那个github地址上，里面的demo1.js就是demo1的，demo2.js就是demo2的逻辑。

　　


　　至此，整个过程都讲述完了。感谢一阅。