Merge remote-tracking branch 'origin/main'

docs/content/basic/demos/getting-started/circle.vue

@@ -0,0 +1,22 @@
+<template>
+  <canvas ref="canvas" width="200" height="300"></canvas>
+</template>
+
+<script setup lang="ts">
+import * as nc from 'newcar'
+import { onMounted, ref } from 'vue'
+
+const canvas = ref<HTMLCanvasElement>()
+
+onMounted(async () => {
+  const engine = await new nc.CarEngine().init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+  const root = new nc.Circle(100, {
+    x: 100,
+    y: 100
+  })
+  const scene = nc.createScene(root)
+  app.checkout(scene)
+  app.play()
+})
+</script>

docs/content/basic/getting-started.md

@@ -2,6 +2,10 @@
 title: Getting Started
 ---
 
+<script setup lang="ts">
+import { default as DemoCircle } from './demos/getting-started/circle.vue'
+</script>
+
 # Getting Started
 
 Welcome to the beginner's guide for the Newcar animation engine! With this guide, you can learn some of the fundamental concepts and knowledge about Newcar, including:
@@ -121,7 +125,9 @@ Then, we created a `Scene` object and set the circle widget as the root widget o
 
 Finally, we used the `App.checkout` method to switch to this scene and the `App.play` method to play the animation.
 
-If you setup the project correctly, you will see a white circle on the screen.
+If you setup the project correctly, you will see a white circle on the screen, just like this.
+<DemoCircle/>
+<demo src="./demos/getting-started/circle.vue"/>
 
 ## Adding Animation
 

docs/content/zh/basic/color-system.md

@@ -0,0 +1,51 @@
+---
+title: 颜色系统
+---
+
+# 颜色系统
+
+Newcar 中的 Widget 对象可以设置为你喜欢的任何颜色，这些颜色由 `Color` 对象管理。目前，有三种设置颜色的方法，并且在未来的版本中，我们将引入渐变和其他颜色特性。
+
+## 直接引用
+
+这种方法只能支持两种颜色 - 黑色和白色。
+
+```javascript
+const rect = new Rect([0, 0], [100, 100], {
+  style: {
+    fillColor: Color.WHITE,
+    border: true,
+    borderColor: Color.BLACK
+  }
+})
+```
+
+## 使用颜色名称字符串
+
+```javascript
+const RED = Color.parse('red')
+```
+
+颜色名称字符串解析支持所有 CSS 支持的颜色名称。
+
+## RGBA
+
+```javascript
+Color.rgba(255, 255, 255, 0.5)
+```
+
+## 转换
+
+你可以将 `Color` 对象转换为各种形式。
+
+### `toString()`
+
+你可以使用这个函数将 `Color` 转换为 CSS 颜色字符串。
+
+### `toFloat4()`
+
+你可以使用这个函数将 `Color` 转换为 Skia 颜色。
+
+## 更多
+
+你可以访问 [https://apis.newcarjs.org/classes/newcar.color](https://apis.newcarjs.org/classes/newcar.color) 获取更多 API 信息。

docs/content/zh/basic/getting-started.md

@@ -1,6 +1,9 @@
 ---
 title: 快速开始
 ---
+<script setup lang="ts">
+import { default as DemoCircle } from '../../basic/demos/getting-started/circle.vue'
+</script>
 
 # 快速开始
 
@@ -120,8 +123,8 @@ app.play()
 
 最后，我们使用 `App.checkout` 方法切换到这个场景，并使用 `App.play` 方法播放动画。
 
-如果您正确设置了项目，您将在屏幕上看到一个白色圆圈。
-
+如果您正确设置了项目，您将在屏幕上看到一个白色圆圈就像这样。
+<DemoCircle/>
 ## 添加动画
 
 ```typescript

docs/content/zh/basic/parents-children-widget.md

@@ -0,0 +1,43 @@
+---
+title: 父子组件
+---
+
+# 父子组件
+
+In `newcar`, objects can be nested using the `children` property. Here's how to add them:
+
+```javascript
+const child = new $.Circle(200, {
+  x: 200,
+  y: 300
+})
+
+const father = new $.Circle(300, {
+  x: 100,
+  y: 200
+})
+
+// Add child Widget
+father.add(child)
+```
+
+In this case, the coordinates `(200, 300)` of `child` are not relative to the top-left corner of the canvas, but rather to the position of its parent component.
+
+:::tip
+In addition, parent-child components follow the principle of **"child follows parent, parent does not follow child"**. This means that when the parent component moves, the child component moves with it. When the child component moves, the parent component remains still.
+
+With this feature, you can set up a background and make objects in the scene "child objects" of the background, so that when you manipulate the character's movement, the background moves backwards.
+:::
+
+:::info
+Besides coordinates, **rotation angle** and **scaling ratio** also follow the parent-child component principle.
+
+> The rotation angle here refers to the rotation angle of the entire coordinate system relative to the parent component, not the rotation angle value of each component.
+
+:::
+
+However, storing objects in variables is both cumbersome and inefficient, so after version 0.7.0, we recommend using chain syntax:
+
+```javascript
+const root = new Widget().add(new Circle(200).setUpdate((elapsed, widget) => {}))
+```