feat: 提取数学库，三角形tar仿射变换计算

karasjs · Nov 19, 2019 · e2bdd16 · e2bdd16
1 parent e27d854
commit e2bdd16
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 63 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -126,6 +126,10 @@
     <a href="mask.html" title="mask">遮罩</a>
     <span>可以为一个geom图形设置mask属性，这样它就作为下一个相邻节点的遮罩层出现。</span>
   </li>
+  <li>
+    <a href="tar.html" title="tar">三角形仿射变换</a>
+    <span>为了实现贴图仿射变换，底层数学库提供了三角形任意变换方法，生成3*3的matrix供transform使用。</span>
+  </li>
 </ol>
 <p><a href="https://github.com/karasjs/karas" target="_blank" title="github">github source</a></p>
 </body>

diff --git a/demo/input.html b/demo/input.html
@@ -16,25 +16,44 @@
   "tagName": "$rect",
   "props": {
     "style": {
+      "position": "absolute",
+      "left": 0,
+      "top": 0,
       "width": 100,
       "height": 100,
       "strokeWidth": 0,
       "fill": "#F00"
     }
   },
-  "animate": {
+  "animate": [{
     "value": [
       {
-        "transform": "translateX(0)"
+        "transform": "translateX(0)",
+        "easing": "easeIn"
       },
       {
         "transform": "translateX(200px)"
       }
     ],
     "options": {
-      "duration": 5000
+      "duration": 5000,
+      "fill": "forwards"
     }
-  }
+  }, {
+    "value": [
+      {
+        "top": 0,
+        "easing": "easeOut"
+      },
+      {
+        "top": 100
+      }
+    ],
+    "options": {
+      "duration": 5000,
+      "fill": "forwards"
+    }
+  }]
 }</textarea>
 <input id="btn" type="button" value="ok"/>
 </div>

diff --git a/demo/tar.html b/demo/tar.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=0"/>
+  <title>tar</title>
+  <link href="style.css" media="all" rel="stylesheet"/>
+</head>
+<body>
+<div class="pre">为了实现贴图仿射变换，底层数学库提供了三角形任意变换方法，生成3*3的matrix供transform使用。</div>
+<div id="example"></div>
+<div id="example2"></div>
+<pre><code class="brush:csx"></code></pre>
+<script type="text/jsx">
+  let o = karas.render(
+    <canvas width="360" height="360">
+      <$polygon
+        points={[
+          [0.1, 0.2],
+          [1, 0],
+          [1, 1]
+        ]}
+        style={{position:'absolute',left:20,top:20,width:100,height:100,strokeWidth:0,fill:'#f00'}}
+      />
+      <$polygon
+        ref="t"
+        points={[
+          [0, 0],
+          [0.8, 0.1],
+          [0.3, 0.5]
+        ]}
+        style={{position:'absolute',left:20,top:20,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
+        points={[
+          [0.1, 0.2],
+          [1, 0],
+          [1, 1]
+        ]}
+        style={{position:'absolute',left:20,top:20,width:100,height:100,strokeWidth:0,fill:'#f00'}}
+      />
+      <$polygon
+        ref="t"
+        points={[
+          [0, 0],
+          [0.8, 0.1],
+          [0.3, 0.5]
+        ]}
+        style={{position:'absolute',left:20,top:20,width:100,height:100,strokeWidth:0,fill:'rgba(0,0,255,0.5)',transformOrigin:'0 0'}}
+      />
+    </svg>,
+    '#example2'
+  );
+  let t = o.ref.t;
+  let t2 = o2.ref.t;
+  let res = karas.math.tar.transform([0, 0, 80, 10, 30, 50], [10, 20, 100, 0, 100, 100]);
+  let style = {
+    transform: `matrix(${res.join(',')})`,
+  };
+  let n = true;
+  setInterval(function() {
+    if(n) {
+      t.style.transform = karas.css.normalize(style).transform;
+      t2.style.transform = karas.css.normalize(style).transform;
+    }
+    else {
+      t.style.transform = null;
+      t2.style.transform = null;
+    }
+    o.refresh();
+    o2.refresh();
+    n = !n;
+  }, 1000);
+</script>
+<script src="homunculus.js"></script>
+<script src="selenite.js"></script>
+<script src="yurine.js"></script>
+<script src="sea.js"></script>
+<script src="../index.js"></script>
+<script>
+  seajs.config({
+    alias: {
+    },
+    map: [function(url) {
+    }]
+  });
+  define('fs', {});
+  seajs.use(['jssc'], function(jssc) {
+    var code = document.querySelector('pre code');
+    var jsx = document.querySelector('script[type="text/jsx"]');
+    var source = jsx.textContent || jsx.text;
+    source = source.trim().replace(/\n[ ]{2}/g, '\n');
+    var text = document.createTextNode(source);
+    code.appendChild(text);
+    jssc.exec();
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var jsx = document.querySelectorAll('script');
+    for(var i = 0, len = jsx.length; i < len; i++) {
+      var node = jsx[i];
+      if(node.getAttribute('type') === 'text/jsx' && !node.getAttribute('yurine')) {
+        node.setAttribute('yurine', 1);
+        var code = node.textContent || node.text;
+        if(!code) {
+          continue;
+        }
+        code = yurine.parse(code);
+        var script = document.createElement('script');
+        script.async = true;
+        script.text = code;
+        head.appendChild(script);
+      }
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/index.js b/index.js
diff --git a/index.js.map b/index.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "karas",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "A flexible JavaScript framework for graphics programming on Canvas/Svg.",
   "maintainers": [
     {