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的逻辑。

  

 

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

  

 

posted @ 2015-07-15 09:35 W·Axes 阅读(...) 评论(...) 编辑 收藏