为了实现贴图仿射变换，底层数学库提供了三角形任意变换方法，生成4*4的matrix供transform使用。

csx code

1234567890101234567890201234567890301234567890401234567890501234567890601234567890701234567890801234567890901234567890100123456789011012345678901201234567890130123456
  1. let o = karas.render(
  2.   <canvas width="360" height="360">
  3.     <$polygon
  4.       ref="t"
  5.       points={[
  6.         [0.1, 0.2],
  7.         [1, 0.05],
  8.         [0.9, 0.8]
  9.       ]}
  10.       style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'#f00',transformOrigin:'0 0',}}
  11.     />
  12.     <$polygon
  13.       ref="s"
  14.       points={[
  15.         [0.5, 0.1],
  16.         [0.8, 0.2],
  17.         [0.3, 0.5]
  18.       ]}
  19.       style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'rgba(0,0,255,0.5)',transformOrigin:'0 0',}}
  20.     />
  21.   </canvas>,
  22.   '#example'
  23. );
  24. let o2 = karas.render(
  25.   <svg width="360" height="360">
  26.     <$polygon
  27.       ref="t"
  28.       points={[
  29.         [0.1, 0.2],
  30.         [1, 0.05],
  31.         [0.9, 0.8]
  32.       ]}
  33.       style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'#f00',transformOrigin:'0 0',}}
  34.     />
  35.     <$polygon
  36.       ref="s"
  37.       points={[
  38.         [0.5, 0.1],
  39.         [0.8, 0.2],
  40.         [0.3, 0.5]
  41.       ]}
  42.       style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'rgba(0,0,255,0.5)',transformOrigin:'0 0',}}
  43.     />
  44.   </svg>,
  45.   '#example2'
  46. );
  47. let s = o.ref.s;
  48. let s2 = o2.ref.s;
  49. let t = o.ref.t;
  50. let t2 = o2.ref.t;
  51. let res = karas.math.tar.transform([50, 10, 80, 20, 30, 50], [10, 20, 100, 5, 90, 80]);
  52. let flag = true;
  53. setInterval(function() {
  54.   if(flag) {
  55.     s.updateStyle({
  56.       transform: `matrix3d(${res.join(',')})`,
  57.     });
  58.     s2.updateStyle({
  59.       transform: `matrix3d(${res.join(',')})`,
  60.     });
  61.   }
  62.   else {
  63.     s.updateStyle({
  64.       transform: null,
  65.     });
  66.     s2.updateStyle({
  67.       transform: null,
  68.     });
  69.   }
  70.   o.refresh();
  71.   o2.refresh();
  72.   flag = !flag;
  73. }, 1000);
let o = karas.render(
  <canvas width="360" height="360">
    <$polygon
      ref="t"
      points={[
        [0.1, 0.2],
        [1, 0.05],
        [0.9, 0.8]
      ]}
      style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'#f00',transformOrigin:'0 0',}}
    />
    <$polygon
      ref="s"
      points={[
        [0.5, 0.1],
        [0.8, 0.2],
        [0.3, 0.5]
      ]}
      style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'rgba(0,0,255,0.5)',transformOrigin:'0 0',}}
    />
  </canvas>,
  '#example'
);
let o2 = karas.render(
  <svg width="360" height="360">
    <$polygon
      ref="t"
      points={[
        [0.1, 0.2],
        [1, 0.05],
        [0.9, 0.8]
      ]}
      style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'#f00',transformOrigin:'0 0',}}
    />
    <$polygon
      ref="s"
      points={[
        [0.5, 0.1],
        [0.8, 0.2],
        [0.3, 0.5]
      ]}
      style={{position:'absolute',left:100,top:100,width:100,height:100,strokeWidth:0,fill:'rgba(0,0,255,0.5)',transformOrigin:'0 0',}}
    />
  </svg>,
  '#example2'
);
let s = o.ref.s;
let s2 = o2.ref.s;
let t = o.ref.t;
let t2 = o2.ref.t;
let res = karas.math.tar.transform([50, 10, 80, 20, 30, 50], [10, 20, 100, 5, 90, 80]);
let flag = true;
setInterval(function() {
  if(flag) {
    s.updateStyle({
      transform: `matrix3d(${res.join(',')})`,
    });
    s2.updateStyle({
      transform: `matrix3d(${res.join(',')})`,
    });
  }
  else {
    s.updateStyle({
      transform: null,
    });
    s2.updateStyle({
      transform: null,
    });
  }
  o.refresh();
  o2.refresh();
  flag = !flag;
}, 1000);