canvas 曲线面片1

写前面

*姐姐篇已完成 传送 canvas曲线面片2

(别跟我说这东西没用 并不想理你！)

什么是曲线面片？ 如图

上面这个就是相对简单的双线性面片

可通过4个点来控制  左上角 A点  顺时针依次就是 ABCD 

这个东西 其实就是 BA方向 和 DA 方向的线性插值组合 下图

先沿着DA CB 方向插值 再继续对 BA 方向插值

生成三角坐标的代码：

//初始点
    var dot_ar = [
      new _$.Vec(0, 0)
      ,new _$.Vec(w, 0)
      ,new _$.Vec(w, h)
      ,new _$.Vec(0, h)
    ];

    //ABCD外围向量计算
    var boundVec =()=>{
      V['BA'] = {
        pv: dot_ar[0],
        v: dot_ar[1].sub(dot_ar[0])
      };

      V['CB'] = {
        pv: dot_ar[1],
        v: dot_ar[2].sub(dot_ar[1])
      };

      V['CD'] = {
        pv: dot_ar[3],
        v: dot_ar[2].sub(dot_ar[3])
      };

      V['DA'] = {
        pv: dot_ar[0]
        , v: dot_ar[3].sub(dot_ar[0])
      };
    };
    //获取N个三角网络坐标
    var getDots =cb=>{
      
      let k = +[];
      //DA CB
      for (let i = 0; abs(i - 1) > .000001; i += hn) {
        //++
        let s_da = V['DA'].v.scale(i + hn).add(V['DA'].pv);
        let s_cb = V['CB'].v.scale(i + hn).add(V['CB'].pv);

        
        let s_da_ = V['DA'].v.scale(i).add(V['DA'].pv);
        let s_cb_ = V['CB'].v.scale(i).add(V['CB'].pv);

       
        let vecx1 = {
         
          v: s_cb_.sub(s_da_)
         
          , pv: V['DA'].v.scale(i).add(V['DA'].pv)
        };

        let vecx2 = {
          v: s_cb.sub(s_da),
          pv: V['DA'].v.scale(i + hn).add(V['DA'].pv)
        };

        //再BA方向
        for (let j = 0; abs(j - 1) > .000001; j += wn) {
          //  s_ba_   s_ba     *vecx1
          //  s_ba2_  s_ba2   *vecx2
          let s_ba = vecx1.v.scale(j + wn).add(vecx1.pv);
          let s_ba2 = vecx2.v.scale(j + wn).add(vecx2.pv);

          
          let s_ba_ = vecx1.v.scale(j).add(vecx1.pv);
          let s_ba2_ = vecx2.v.scale(j).add(vecx2.pv);

          //两个三角网络
          cb && cb({
            0: { dot_ar: { 0: s_ba_, 1: s_ba, 2: s_ba2_ } },
            1: { dot_ar: { 0: s_ba2, 1: s_ba2_, 2: s_ba } }
          }, k);

          k += 2;
        };
      };
    };

拿到坐标后就可以生成三角网络对象了 

var createTrangle = ()=>{
      boundVec();
      //拿到坐标后 生成三角网络对象
      getDots((dot,k)=>{
        trangle_ar.push(
          TrangleMap({
            dot_ar: dot[0].dot_ar,
            i: k, wireframe: prop.wireframe,
            color: _$.color()
          })
          ,TrangleMap({
            dot_ar: dot[1].dot_ar,
            i: k + 1, wireframe: prop.wireframe,
            color: _$.color()
          })
        );
      });
    };

三角对象的代码：

var TrangleMap = prop=>{
    // setTransform 中の矩阵
    var trans_ar = [
     1, 0, 0,
     ,1, 0, 0
    ];

    var dot_ar = prop.dot_ar;

    //拷份初始点
    var fix_dot = _$.extend([], dot_ar);

    var color = prop.color || 'black';

    var draw = Object.create({
      line(){
        var ctx = Stg.ctx;

        ctx.save();
        ctx.strokeStyle = color;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(dot_ar[0].x, dot_ar[0].y);
        ctx.lineTo(dot_ar[1].x, dot_ar[1].y);
        ctx.lineTo(dot_ar[2].x, dot_ar[2].y);

        ctx.closePath();

        ctx.stroke();
        ctx.restore();
      }
      ,map(){
        var ctx = Stg.ctx;

        ctx.save();
        //clip三角
        ctx.beginPath();
        ctx.moveTo(dot_ar[0].x, dot_ar[0].y);
        ctx.lineTo(dot_ar[1].x, dot_ar[1].y);
        ctx.lineTo(dot_ar[2].x, dot_ar[2].y);
        ctx.closePath();

        ctx.clip();

        ctx.save();

        ctx.setTransform.apply(ctx, trans_ar);

        ctx.beginPath();
        ctx.drawImage(Pic.map, 0, 0, Pic.width, Pic.height);
        ctx.closePath();
        ctx.restore();

        ctx.restore();
      }
    });

    var _ = Object.create({
      render(){
        prop.wireframe && draw.line();
        draw.map();
      },
      transDot(){
        
        dot_ar = ar;
        //X = ax + cy + 1e
        //Y = bx + dy + 1f

        var ar = [[fix_dot[0].x, fix_dot[0].y, 1], [fix_dot[1].x, fix_dot[1].y, 1], [fix_dot[2].x, fix_dot[2].y, 1]];

        //得到 a c e
        var dtx = _$.Det3(ar, [dot_ar[0].x, dot_ar[1].x, dot_ar[2].x]);
        //得到 b d f
        var dty = _$.Det3(ar, [dot_ar[0].y, dot_ar[1].y, dot_ar[2].y]);

        // a b c d e f
        trans_ar = [dtx[0], dty[0], dtx[1], dty[1], dtx[2], dty[2]];
      }
    });

    return _;
  };

到这里确实已经可以形成面片了。。

但是 为何有个transDot方法 - -

因为我们还要对面片进行贴图操作 啊~

what？ 贴图不是webgl 干的事么 。。 这里canvas2d也可以

一个三角对象就对应一个drawImage  如图：

圈的那个三角贴图  是通过原始尺寸clip过的   但是clip又不帮你做拉伸缩放的变换。。

我们还得配合 transform 或者 setTransform api 传递矩阵参数

它内部是这样计算的

X = ax + cy + e 

Y = bx + dy + f

我们要算出abcdef   也就是解个线性方程组

我用矩阵解法（也可用消元法） 我已经封装过了 那个Det3是这样的

Dai.Det3 = function(){
      var det = function(a){
        return a[0][0]*a[1][1]*a[2][2]
          +a[0][1]*a[1][2]*a[2][0]
          +a[0][2]*a[1][0]*a[2][1]

          -a[0][2]*a[1][1]*a[2][0]
          -a[0][1]*a[1][0]*a[2][2]
          -a[0][0]*a[1][2]*a[2][1];
      };
      //x x x   //Y
      //x x x   //Y
      //x x x   //Y
      return function(ar,nar){
        var a,b,c;
        var D = det(ar);

        if(D==0) return console.warn('该矩阵不可逆~');

        var ar1 = _$.extend([],ar);
        var ar2 = _$.extend([],ar);
        var ar3 = _$.extend([],ar);

        ar1[0][0] = nar[0];
        ar1[1][0] = nar[1];
        ar1[2][0] = nar[2];

       
        ar2[0][1] = nar[0];
        ar2[1][1] = nar[1];
        ar2[2][1] = nar[2];

        ar3[0][2] = nar[0];
        ar3[1][2] = nar[1];
        ar3[2][2] = nar[2];

        var D1 = det(ar1);

        var D2 = det(ar2);

        var D3 = det(ar3);

        return [D1/D,D2/D,D3/D];
      }
    }();

好了放出最终DEMO！

DEOM