diff --git a/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md b/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md index 320047a58..d8466bee4 100644 --- a/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md +++ b/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md @@ -1,6 +1,6 @@ -# Flex Layout +# What is BoundsPadding -By default, `VRender` does not have the same layout capabilities as the `DOM`. For example, in the `DOM`, you can place two `div` elements and the second `div` will be positioned below the first one. However, in `VRender`, if you place two rectangles, the second rectangle will overlay the first one. This is because all positioning in `VRender` is relative, with the coordinate system having its origin at the top left corner, with the positive `x` axis to the right and the positive `y` axis downwards. This difference in positioning leads to the layout in `VRender` being different from that of the `DOM`. +*Note:* By default, `VRender` does not have a layout similar to the `DOM`. For example, in the `DOM`, you can have two `div` elements, and the second `div` will be placed below the first `div`. However, in `VRender`, if you have two rectangles, the second rectangle will overlay the first one. This is because all positioning in `VRender` is relative positioning, *it relies on the x, y parameters you configure for positioning*, with the coordinate system having the origin at the top left corner, the positive direction of the x-axis to the right, and the positive direction of the y-axis downwards. This difference in layout between `VRender` and the `DOM` is due to this positioning system. However, we also provide the ability to use `flex` layout in `VRender`. By enabling this feature, we can achieve similar layout capabilities to the `DOM` Flex layout in `VRender`. diff --git a/docs/assets/guide/en/asd/Basic/VRender_basic_tutorial.md b/docs/assets/guide/en/asd/Basic/VRender_basic_tutorial.md index fbe7eadf3..3e1287c66 100644 --- a/docs/assets/guide/en/asd/Basic/VRender_basic_tutorial.md +++ b/docs/assets/guide/en/asd/Basic/VRender_basic_tutorial.md @@ -14,7 +14,7 @@ VRender is a relatively low-level rendering library. We will introduce the usage ## Graphic System -This section will quickly introduce the graphic system. For more detailed understanding, please refer to [Graphic System (waiting for document writing)](./graphic) +This section will quickly introduce the graphic system. For more detailed understanding, please refer to [Graphic System](./Basic_Tutorial/Graphic) ### Create Graphics diff --git a/docs/assets/guide/en/asd/Basic_Tutorial/Create_Instance.md b/docs/assets/guide/en/asd/Basic_Tutorial/Create_Instance.md index fa55438f7..5407d1386 100644 --- a/docs/assets/guide/en/asd/Basic_Tutorial/Create_Instance.md +++ b/docs/assets/guide/en/asd/Basic_Tutorial/Create_Instance.md @@ -2,6 +2,8 @@ Similar to the DOM tree and React virtual node tree, VRender also draws based on a scene tree. VRender mounts this scene tree through layers, which are managed by the Stage. The Stage manages the lifecycle of the entire application, the position and size of views, and the logic for scene drawing and picking. +As shown in the diagram below, a VRender application generally includes a `Stage`, which can have multiple layers (`Layer`) attached to it, and each layer can have multiple graphic elements attached to it. + ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/stage-tree.png) ## Creating a Stage diff --git a/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md b/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md index 850f87944..c03c288d7 100644 --- a/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md +++ b/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md @@ -1,6 +1,6 @@ # What is BoundsPadding -【Note】By default, `VRender` does not have a layout similar to `DOM`. In `DOM`, you can write two `div` elements, and the second `div` will be placed below the first `div`. However, in `VRender`, if you write two rectangles, the second rectangle will overlay the first one. This is because all positioning in `VRender` is relative positioning, with the coordinate system having the origin at the top left corner, with the positive `x` axis to the right and the positive `y` axis downwards. This difference in layout behavior between `VRender` and `DOM` is due to their different positioning systems. +*Note:* By default, `VRender` does not have a layout similar to the `DOM`. For example, in the `DOM`, you can have two `div` elements, and the second `div` will be placed below the first `div`. However, in `VRender`, if you have two rectangles, the second rectangle will overlay the first one. This is because all positioning in `VRender` is relative positioning, *it relies on the x, y parameters you configure for positioning*, with the coordinate system having the origin at the top left corner, the positive direction of the x-axis to the right, and the positive direction of the y-axis downwards. This difference in layout between `VRender` and the `DOM` is due to this positioning system. All graphics elements have their own `AABBBounds`. If you find the `AABBBounds` too small and need to enlarge it, you can configure `BoundsPadding`. diff --git a/docs/assets/guide/en/asd/VRender_Website_Guide.md b/docs/assets/guide/en/asd/VRender_Website_Guide.md index c1d2b05cd..c35746d5e 100644 --- a/docs/assets/guide/en/asd/VRender_Website_Guide.md +++ b/docs/assets/guide/en/asd/VRender_Website_Guide.md @@ -1,57 +1,47 @@ # Site Guide -This document is mainly to help you make better use of the VRender site and help you get the content you want on the site as quickly as possible. +This document is mainly designed to help you better utilize the VRender site, enabling you to quickly access the content you are looking for on the site. ## Quick Start ### Getting Started -First, you need to complete the VRender [Getting Started](./Getting_Started) chapter which will teach you how to configure and use the environment needed for VRender, as well as how to use VRender to build your first graphic application. +Firstly, you need to complete the VRender [Getting Started](./Getting_Started) section, which will guide you on how to set up and use the environment required for VRender, as well as how to build your first graphic application using VRender. ### Understanding VRender -After completing [Getting Started](./Getting_Started), you can delve deeper into the various primitives and interactions supported by studying the [Primitives and Interactions](./Your_First_Chart) chapter, then learn the [Animation] chapter to understand how to create an animation, and then learn the [Extensions and Plugins]() chapter to understand how to enhance the functionality of the application through extensions and plugins. +After completing the [Getting Started](./Getting_Started) section, you can delve deeper into understanding the various primitives and interactions supported by studying the [Basic Tutorial](./Basic/Vrender_basic_tutorial) section. Then, proceed to learn about creating animations in the [Animation](./Animation) section, and enhancing your application's functionality through extensions and plugins in the [Extensions and Plugins](./Extensions_and_Plugins) section. ## Documentation -VRender's documentation provides detailed information about features and configurations. Depending on your needs, you can view the following sections: +The documentation of VRender provides detailed information on features and configurations. Depending on your needs, you can refer to the following sections: -- [Tutorials](./todo): Introduces the basic concepts of VRender and various usage methods. +- [Tutorials](./Getting_Started): Introduces the basic concepts of VRender and various usage methods. -- [Configuration Items](./todo): Provides all configuration items for VRender and their detailed explanations. - -- [API](./todo): Provides detailed descriptions of all available interfaces for VRender. +- [Options](/vrender/option/Arc): Provides all the configuration options of VRender along with detailed explanations. ## Examples -The examples page offers many practical application cases of VRender, from simple primitives to complex animations and custom extensions. Each example provides a detailed description, key configuration information, and source code. You can also modify the example and view the effect through the online editor. - -![Chart Example](./images/examples.png) - -## How to use the search function - -The site offers a powerful search feature that allows you to quickly find related usage information. Click the search box at the top of the site, enter a keyword, and you will see matching results in the dropdown list. Select the appropriate result to view the relevant content. - -![How to use the search feature](./images/search-function.png) +The examples page offers numerous practical application cases of VRender, ranging from simple primitives to complex animations and custom extensions. Each example provides detailed descriptions, key configuration information, and source code. You can also modify examples using the online editor and view the effects. -## How to Ask Questions & Suggestions +## How to Use the Search Function -We are happy to help! If you encounter any problems while learning VRender, you can ask questions in the following ways: +This site provides a powerful search function, allowing you to quickly find relevant usage information. Click on the search box at the top of the site, enter keywords, and you will see matching results in the dropdown list. Select the appropriate result to view the related content. -1. Submit an issue in the GitHub repository: Visit [VRender GitHub](https://github.com/VisActor/VChart/issues/new/choose), describe in detail the problem you encountered, and our team will respond and resolve as soon as possible. +## How to Ask Questions & Provide Suggestions -2. Submit a discussion in the GitHub repository: Visit [VRender Discussion](https://github.com/VisActor/VChart/discussions), we are very welcome to propose your ideas and suggestions here, and our team will respond and resolve as soon as possible. +We are happy to assist you! If you encounter any issues while learning VRender, you can ask questions in the following ways: -## How to Report Errors +1. Submit an issue on the GitHub repository: Visit [VRender GitHub](https://github.com/VisActor/VChart/issues/new/choose), provide a detailed description of the problem you are facing, and our team will respond and resolve it promptly. -If you find any problems in the documentation or examples, or think some parts can be improved, please let us know. You can provide us with error correction information in the following ways: +2. Start a discussion on the GitHub repository: Visit [VRender Discussion](https://github.com/VisActor/VChart/discussions), where you are welcome to share your ideas and suggestions. Our team will respond and address them promptly. -1. Submit a pull request in the GitHub repository: Correct the content and submit, and a team member will review and merge. +## How to Report Corrections -2. Submit an issue: Point out the problem in the documentation, and team members will verify and correct it as soon as possible. +If you find any issues in the document examples or believe that certain parts can be improved, please let us know. You can report corrections to us in the following ways: -Thank you for your help! We will continue to improve the documentation and provide a better learning experience for all VRender users. +1. Submit a pull request on the GitHub repository: Correct the content and submit it, and a team member will review and merge it. -# Subpage Directory +2. Submit an issue: Point out the issues in the document, and the team will verify and rectify them promptly. -Currently unable to display this content outside the Feishu document. \ No newline at end of file +Thank you for your assistance! We will continuously improve the documentation to provide a better learning experience for all VRender users. diff --git a/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md b/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md index e316ae0b0..70bdb7420 100644 --- a/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md +++ b/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md @@ -1,6 +1,6 @@ # flex布局 -通常情况下，`VRender`默认并不具备类似`DOM`的布局，比如在`DOM`中，你可以写两个`div`，那么第二个`div`会放置在第一个div的下方。但如果在`VRender`中，你写了两个矩形，那么第二个矩形会覆盖在第一个矩形之上。这是因为`VRender`中所有的定位都是相对定位的，坐标系是左上角为原点，向右为`x`轴正方向，向下为`y`轴正方向。这就导致了`VRender`的布局和`DOM`的布局是不一样的。 +*【注意】*通常情况下，`VRender`默认并不具备类似`DOM`的布局，比如在`DOM`中，你可以写两个`div`，那么第二个`div`会放置在第一个div的下方。但如果在`VRender`中，你写了两个矩形，那么第二个矩形会覆盖在第一个矩形之上。这是因为`VRender`中所有的定位都是相对定位的，*它依靠你配置的x、y等参数定位*，坐标系是左上角为原点，向右为`x`轴正方向，向下为`y`轴正方向。这就导致了`VRender`的布局和`DOM`的布局是不一样的。 但是我们还提供了`flex`布局的能力，开启该功能之后，我们也可以在`VRender`中实现类似`DOM` Flex布局的能力。 diff --git a/docs/assets/guide/zh/asd/Basic/Vrender_basic_tutorial.md b/docs/assets/guide/zh/asd/Basic/Vrender_basic_tutorial.md index cadf231cc..72b9ea8e3 100644 --- a/docs/assets/guide/zh/asd/Basic/Vrender_basic_tutorial.md +++ b/docs/assets/guide/zh/asd/Basic/Vrender_basic_tutorial.md @@ -14,7 +14,7 @@ VRender 是一个比较底层的渲染库，我们将以使用场景作为区分 ## 图元系统 -此章节会快速介绍图元系统，如需详细了解，请参考[图元系统（等待编写文档）](./graphic) +此章节会快速介绍图元系统，如需详细了解，请参考[图元系统](./Basic_Tutorial/Graphic) ### 创建图元 diff --git a/docs/assets/guide/zh/asd/Basic_Tutorial/Create_Instance.md b/docs/assets/guide/zh/asd/Basic_Tutorial/Create_Instance.md index 68fd2fe89..e2eb99cce 100644 --- a/docs/assets/guide/zh/asd/Basic_Tutorial/Create_Instance.md +++ b/docs/assets/guide/zh/asd/Basic_Tutorial/Create_Instance.md @@ -2,6 +2,8 @@ 和Dom树、React虚拟节点树类似，VRender也是基于一颗场景树进行绘制的，，VRender通过图层来挂载这颗场景树，图层则由Stage进行管理，Stage管理整个应用的生命周期，视图的位置和大小，场景的绘制、拾取等逻辑。 +如下图所示，一个VRender应用一般包括一个`Stage`，`Stage`下可挂载多个图层(`Layer`)，图层下可以挂载多个图形元素。 + ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/stage-tree.png) ## 创建Stage diff --git a/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md b/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md index f8e98861b..c79388bc9 100644 --- a/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md +++ b/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md @@ -1,6 +1,6 @@ # 什么是BoundsPadding -【注意】通常情况下，`VRender`默认并不具备类似`DOM`的布局，比如在`DOM`中，你可以写两个`div`，那么第二个`div`会放置在第一个`div`的下方。但如果在`VRender`中，你写了两个矩形，那么第二个矩形会覆盖在第一个矩形之上。这是因为`VRender`中所有的定位都是相对定位的，坐标系是左上角为原点，向右为`x`轴正方向，向下为`y`轴正方向。这就导致了`VRender`的布局和`DOM`的布局是不一样的。 +*【注意】*通常情况下，`VRender`默认并不具备类似`DOM`的布局，比如在`DOM`中，你可以写两个`div`，那么第二个`div`会放置在第一个div的下方。但如果在`VRender`中，你写了两个矩形，那么第二个矩形会覆盖在第一个矩形之上。这是因为`VRender`中所有的定位都是相对定位的，*它依靠你配置的x、y等参数定位*，坐标系是左上角为原点，向右为`x`轴正方向，向下为`y`轴正方向。这就导致了`VRender`的布局和`DOM`的布局是不一样的。 所有图元都有自己的`AABBBounds`，如果觉得`AABBBounds`太小，需要扩大，就可以配置`BoundsPadding`。 diff --git a/docs/assets/guide/zh/asd/VRender_Website_Guide.md b/docs/assets/guide/zh/asd/VRender_Website_Guide.md index c4c04f114..989d831b3 100644 --- a/docs/assets/guide/zh/asd/VRender_Website_Guide.md +++ b/docs/assets/guide/zh/asd/VRender_Website_Guide.md @@ -10,7 +10,7 @@ ### 了解 VRender -在你完成[快速上手](./Getting_Started)后，你可以通过学习[图元与交互](./Your_First_Chart)章节来深入了解支持的各种图元与交互，然后学习[动画]章节来了解如何创建一个动画，然后学习[扩展和插件]()章节来了解如何通过扩展和插件增强应用程序的功能 +在你完成[快速上手](./Getting_Started)后，你可以通过学习[基础指引](./Basic/Vrender_basic_tutorial)章节来深入了解支持的各种图元与交互，然后学习[动画]章节来了解如何创建一个动画，然后学习[扩展和插件]()章节来了解如何通过扩展和插件增强应用程序的功能 ## 文档 @@ -45,7 +45,3 @@ VRender 的文档提供了有关功能和配置的详细信息。根据你的需 2. 提交一个 issue：指出文档中存在的问题团队成员会尽快核实并修正。 感谢你的帮助！我们将不断完善文档，为所有 VRender 用户提供更好的学习体验。 - -# 子页面目录 - -暂时无法在飞书文档外展示此内容