Merge pull request #249 from karasjs/performance

Performance
karasjs · Oct 14, 2022 · 4e8acfa · 4e8acfa
2 parents 4f34ae2 + e3fd25d
commit 4e8acfa
Show file tree

Hide file tree

Showing 46 changed files with 4,641 additions and 2,283 deletions.
diff --git a/api.md b/api.md
@@ -894,6 +894,11 @@ console.log(root);
 * **说明**  
 新建上下文参数。此举在getContext('2d')或getContext('webgl')时会传递给第2个参数。默认alpha/antialias/premultipliedAlpha/preserveDrawingBuffer为true。
 
+#### webgl2
+* **类型** `boolean`
+* **说明**  
+当使用webgl节点时，可手动指定是否是webgl2上下文。不指定或不支持则自动判断降级为webgl。
+
 ### 类方法method
 
 #### getTargetAtPoint
@@ -2341,7 +2346,7 @@ let id = karas.inject.requestAnimationFrame(function() {
 karas.inject.cancelAnimationFrame(id);
 ```
 
-### getCacheCanvas
+### getOffscreenCanvas
 * **类型** `Function`
 * **参数**
   * width `Number`
@@ -2350,21 +2355,7 @@ karas.inject.cancelAnimationFrame(id);
 * **说明**  
 从缓存池中获取指定高宽的离屏canvas缓存，如果指定key，则为唯一实例，否则自动从缓存列表中存取。
 
-### delCacheCanvas
-* **类型** `Function`
-* **参数**
-  * key `String`
-* **说明**  
-删除离屏canvas缓存实例。
-
-### releaseCacheCanvas
-* **类型** `Function`
-* **参数**
-  * target `CANVAS`
-* **说明**  
-回收离屏canvas到缓存池中。
-
-### hasCacheWebgl
+### hasOffscreenCanvas
 * **类型** `Function`
 * **参数**
   * key `String`
@@ -2514,16 +2505,19 @@ Geom矢量几何图形的样式键值对列表。
   * url `String/ArrayBuffer`
     注册的字体路径或数据。
   * data `Object`
-    字体信息，需包含`emSquare`、`ascent`、`descent`、`lineGap`（默认0）。
+    可选字体信息，需包含`emSquare`、`ascent`、`descent`、`lineGap`（默认0）。
 * **说明**  
-  注册使用的新字体。此举可能会引发之前使用注册字体的自动刷新。
+注册使用的新字体。此举可能会引发之前使用注册字体的自动刷新。
 * **示例**
 ```jsx
 karas.render(
   <canvas>
     <div style={{fontFamily:'newFont'}}>这里先使用默认字体显示，等下方注册加载成功后自动刷新。</div>
   </canvas>
 );
+// 自动解析字体信息
+karas.style.font.register('newFont', 'https://xxx');
+// 也可以手动指定字体信息
 karas.style.font.register('newFont', 'https://xxx', {
   emSquare: 2048,
   ascent: 1854,

diff --git a/demo/Alibaba-PuHuiTi-Regular.ttf b/demo/Alibaba-PuHuiTi-Regular.ttf
diff --git a/demo/img.html b/demo/img.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="pre">除了矢量，还可以用img标签引用位图功能。
-当位图加载出错时，会有个默认展位图显示。</div>
+当位图加载出错时，会有个默认展位图显示。用updateSrc()方法来更新图片。</div>
 <div id="example"></div>
 <div id="example2"></div>
 <pre><code class="brush:csx"></code></pre>
@@ -27,6 +27,7 @@
     </svg>,
     '#example2'
   );
+  // img.updateSrc('newUrl');
 </script>
 <script src="sea.js"></script>
 <script src="homunculus.js"></script>

diff --git a/demo/index.html b/demo/index.html
@@ -38,6 +38,10 @@
     <a href="tag.html" title="tag">dom标签</a>
     <span>常见2种标签：div和span，分别对应block和inline元素。其它也少量支持。</span>
   </li>
+  <li>
+    <a href="text.html" title="text">文本</a>
+    <span>支持自定义字体的文本，已内置解析字体信息。</span>
+  </li>
   <li>
     <a href="flex.html" title="flex">弹性布局</a>
     <span>flex基本被支持，这是在布局中很常见且实用的布局。</span>

diff --git a/demo/text.html b/demo/text.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
+  <title>text</title>
+  <link href="style.css" media="all" rel="stylesheet"/>
+</head>
+<body>
+<div class="pre">支持自定义字体的文本，已内置解析字体信息。
+可以用updateContent()来更新文字内容。</div>
+<div id="example"></div>
+<div id="example2"></div>
+<pre><code class="brush:csx"></code></pre>
+<script type="text/jsx">
+  karas.style.font.register('puhui', './Alibaba-PuHuiTi-Regular.ttf');
+  karas.render(
+    <canvas width="360" height="360">
+      <div style={{ fontFamily: 'puhui', fontSize: 48 }}>普惠体 PuHui</div>
+    </canvas>,
+    '#example'
+  );
+  karas.render(
+    <svg width="360" height="360">
+      <div style={{ fontFamily: 'puhui', fontSize: 48 }}>普惠体 PuHui</div>
+    </svg>,
+    '#example2'
+  );
+  // text.updateContent('newContent');
+</script>
+<script src="sea.js"></script>
+<script src="homunculus.js"></script>
+<script src="yurine.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>