leafer-ui 1.0.7 → 1.0.9

package/README.md

@@ -1,5 +1,7 @@
 # leafer-ui
 
+一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑，前端开发必备～
+
 [![LeaferJS](https://www.leaferjs.com/image/leaferjs.jpg)](https://www.leaferjs.com)
 
 [**leafer-ui**](https://leaferjs.com/ui/guide/install/ui/start.html) 是基于核心库 [leafer](https://github.com/leaferjs/leafer) 开发的一套绚丽多彩的 UI 绘图、交互框架。作为[LeaferJS](https://www.leaferjs.com) 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲，可媲美当前主流设计软件。
@@ -18,15 +20,33 @@ v1.0 正式版已发布 🎉🎉🎉
 
 如果你觉得不错，请帮我们点个 [Star](https://github.com/leaferjs/leafer-ui) 🌟 ，让这个库被更多的人看见 - [GitHub](https://github.com/leaferjs/leafer-ui) / [Gitee](https://gitee.com/leaferjs/ui) ✨ ✨ ✨
 
+## 快速入门
+
+[1. 准备在线 Playground 环境](https://leaferjs.com/ui/guide/runtime.md)
+
+可通过 **Cloud Studio** 模版创建一个 **LeaferJS 项目**，用于运行、练习后续的示例代码。
+
+[2. 学习 LeaferJS 快速入门教程](https://leaferjs.com/ui/guide/basic/app.md)
+
+跟随官网教程步骤（文档底部有下一步引导按钮）从浅到深的一步步学习。
+
+建议将教程中的示例代码复制到 **LeaferJS 项目** 的 index.ts 文件中运行、调试效果。
+
+[3. 开发一个画龙点睛的小游戏](https://leaferjs.com/ui/contest/guide.md)
+
+给你一条会飞的龙，看你能做出什么好玩的小游戏分享给我们 ◠‿◠
+
 ## 快速安装
 
-🚀 想马上使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。
+🚀 想马上在产品中使用，请安装 [leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。
+
+## 场景包
 
-## 场景版
+高效绘图场景，推荐安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/type/draw/start.html) （49KB min+gzip）。
 
-编辑图形的场景，推荐安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。
+游戏开发场景，推荐安装更省心的 [leafer-game](https://leaferjs.com/ui/guide/install/game/start.md)，已集成了游戏相关插件。
 
-单纯绘图的场景，推荐安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/type/draw/start.html) （49KB min+gzip）。
+图形编辑场景，推荐安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。
 
 ## 入门场景
 

package/dist/web.cjs

@@ -1478,14 +1478,10 @@ function fillText(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        if (row.text)
             canvas.fillText(row.text, row.x, row.y);
-        }
-        else if (row.data) {
-            row.data.forEach(charData => {
-                canvas.fillText(charData.char, charData.x, row.y);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -1551,12 +1547,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__worldFlipped) {
+    if (ui.__worldFlipped)
         canvas.copyWorldByReset(out, ui.__nowWorld);
-    }
-    else {
+    else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-    }
     out.recycle(ui.__nowWorld);
 }
 function drawTextStroke(ui, canvas) {
@@ -1564,14 +1558,10 @@ function drawTextStroke(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        if (row.text)
             canvas.strokeText(row.text, row.x, row.y);
-        }
-        else if (row.data) {
-            row.data.forEach(charData => {
-                canvas.strokeText(charData.char, charData.x, row.y);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -1624,12 +1614,10 @@ function stroke(stroke, ui, canvas) {
                 out.stroke();
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(ui.__layout.renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -1664,12 +1652,10 @@ function strokes(strokes, ui, canvas) {
                 drawStrokesStyle(strokes, false, ui, out);
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -1733,12 +1719,7 @@ function compute(attrName, ui) {
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length && leafPaints[0].image)
         hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-    if (attrName === 'fill') {
-        data.__pixelFill = hasOpacityPixel;
-    }
-    else {
-        data.__pixelStroke = hasOpacityPixel;
-    }
+    attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)

package/dist/web.esm.js

@@ -1479,14 +1479,10 @@ function fillText(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        if (row.text)
             canvas.fillText(row.text, row.x, row.y);
-        }
-        else if (row.data) {
-            row.data.forEach(charData => {
-                canvas.fillText(charData.char, charData.x, row.y);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -1552,12 +1548,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__worldFlipped) {
+    if (ui.__worldFlipped)
         canvas.copyWorldByReset(out, ui.__nowWorld);
-    }
-    else {
+    else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-    }
     out.recycle(ui.__nowWorld);
 }
 function drawTextStroke(ui, canvas) {
@@ -1565,14 +1559,10 @@ function drawTextStroke(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        if (row.text)
             canvas.strokeText(row.text, row.x, row.y);
-        }
-        else if (row.data) {
-            row.data.forEach(charData => {
-                canvas.strokeText(charData.char, charData.x, row.y);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -1625,12 +1615,10 @@ function stroke(stroke, ui, canvas) {
                 out.stroke();
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(ui.__layout.renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -1665,12 +1653,10 @@ function strokes(strokes, ui, canvas) {
                 drawStrokesStyle(strokes, false, ui, out);
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -1734,12 +1720,7 @@ function compute(attrName, ui) {
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length && leafPaints[0].image)
         hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-    if (attrName === 'fill') {
-        data.__pixelFill = hasOpacityPixel;
-    }
-    else {
-        data.__pixelStroke = hasOpacityPixel;
-    }
+    attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)