VisActor · neuqzxy · Nov 28, 2024 · Nov 28, 2024 · Nov 28, 2024
diff --git a/docs/assets/api/en/common/attribute.md b/docs/assets/api/en/common/attribute.md
@@ -219,3 +219,10 @@ shadowRoot 在宿主图元的上方还是下方，>0 为下方，<0 为上方
 #${prefix} globalCompositeOperation(CanvasRenderingContext2D['globalCompositeOperation']) = ''
 
 对应 Canvas 的 globalCompositeOperation，用来配置滤镜
+
+#${prefix} boundsPadding(number[]) = []
+
+图元的包围盒的 padding，当自动计算的AABBBounds不满足要求的时候可以配置，可以调整包围盒的大小。
+如果是number，那么四个方向的padding都是这个值
+如果是[number, number] ，那么分别是上下和左右的padding
+如果是[number, number, number, number]，那么分别是上右下左的
diff --git a/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md b/docs/assets/guide/en/asd/Advanced_Tutorial/Flex_Layout.md
@@ -135,7 +135,7 @@ const stage = new VRender.Stage({
   enableLayout: true
 });
 
-stage.defaultLayer.add(rect);
+stage.defaultLayer.add(group);
 
 window['stage'] = stage;
 ```
diff --git a/docs/assets/guide/en/asd/Basic_Tutorial/Graphic.md b/docs/assets/guide/en/asd/Basic_Tutorial/Graphic.md
@@ -4,7 +4,7 @@
 
 VRender has many primitives, but their usage is similar because they all inherit from the `Graphic` class. They all have almost the same properties and methods, just accepting different parameters. The inheritance diagram of primitives is shown in the following figure.
 
-![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-graphic.png)
+![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-graphic-rel.png)
 
 1. Firstly, they all inherit from `Node`, so all primitives have a tree structure.
 2. Then they all inherit from `Graphic`, so they all have basic properties and methods of primitives such as `x`, `y`, `fill`, etc.

diff --git a/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md b/docs/assets/guide/en/asd/FAQ/What_Is_BoundsPadding.md
@@ -36,11 +36,11 @@ const stage = new VRender.Stage({
   autoRender: true
 });
 
-const textLimit = createText({
+const textLimit = cVRender.reateText({
   x: 0,
   y: 0,
-  fill: colorPools[5],
-  text: 'This is text with no BoundsPadding',
+  fill: 'pink',
+  text: '这是没有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
   textAlign: 'left',
@@ -49,11 +49,11 @@ const textLimit = createText({
   _debug_bounds: true,
   background: 'green'
 });
-const textLimit2 = createText({
+const textLimit2 = VRender.createText({
   x: 0,
   y: 60,
-  fill: colorPools[5],
-  text: 'This is text with BoundsPadding',
+  fill: 'pink',
+  text: '这是有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
   textAlign: 'left',
@@ -64,8 +64,7 @@ const textLimit2 = createText({
   background: 'green'
 });
 
-const group = createGroup({x: 100, y: 100, width: 200, height: 200})
-graphics.push(group);
+const group = VRender.createGroup({x: 100, y: 100, width: 200, height: 200});
 group.add(textLimit);
 group.add(textLimit2);
 
@@ -84,11 +83,11 @@ const stage = new VRender.Stage({
   enableLayout: true
 });
 
-const textLimit = createText({
+const textLimit = VRender.createText({
   x: 0,
   y: 0,
-  fill: colorPools[5],
-  text: 'This is text with no BoundsPadding',
+  fill: 'pink',
+  text: '这是没有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
   textAlign: 'left',
@@ -97,11 +96,11 @@ const textLimit = createText({
   _debug_bounds: true,
   background: 'green'
 });
-const textLimit2 = createText({
+const textLimit2 = VRender.createText({
   x: 0,
   y: 60,
-  fill: colorPools[5],
-  text: 'This is text with BoundsPadding',
+  fill: 'pink',
+  text: '这是有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
   textAlign: 'left',
@@ -112,8 +111,7 @@ const textLimit2 = createText({
   background: 'green'
 });
 
-const group = createGroup({x: 100, y: 100, width: 200, height: 200, display: 'flex'})
-graphics.push(group);
+const group = VRender.createGroup({x: 100, y: 100, width: 200, height: 200, display: 'flex'});
 group.add(textLimit);
 group.add(textLimit2);
 

diff --git a/docs/assets/guide/en/asd/VRender_Components/VRender_Components_Introduction.md b/docs/assets/guide/en/asd/VRender_Components/VRender_Components_Introduction.md
@@ -2,7 +2,7 @@
 
 Components are special primitives and also special Groups. VRender provides a series of built-in components, such as `datazoom`, `axes`, `label`, `legend`, `poptip`, etc., which can help us quickly achieve some common interactive effects. Externally, custom components can be implemented by inheriting `AbstractComponent` from `@visactor/vrender-components`.
 
-![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-component-intro-all.png)
+![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-component-intro-component.png)
 
 ## Introduction
 
@@ -167,6 +167,7 @@ class CircleBox extends VRenderComponent.AbstractComponent {
     circleStyle: {
       fill: 'red',
     },
+    stroke: 'blue',
     circleCount: 10,
     width: 300,
     height: 300
@@ -176,28 +177,28 @@ class CircleBox extends VRenderComponent.AbstractComponent {
     super(options?.skipDefault ? attributes : ({...CircleBox.defaultAttributes, ...attributes}));
   }
 
-  // Called every time valid attributes are updated
+  // 每次合法属性更新都会调用
   render() {
     const { circleCount, circleStyle, width, height } = this.attribute;
 
     const minWH = Math.min(width, height);
     const count = Math.ceil(Math.sqrt(circleCount));
     const radius = Math.floor(minWH) / count / 2;
     for (let i = 0; i < circleCount; i++) {
-      // Calculate the position of the child element
+      // 计算子元素的位置
       const x = (i % count) * radius * 2 + radius;
       const y = Math.floor(i / count) * radius * 2 + radius;
-      // Add or create child elements
+      // 添加或创建子元素
       const circle = this.createOrUpdateChild(`circle-${i}`, { ...circleStyle, radius, x, y }, 'circle');
     }
   }
 }
 
-const textLimit = new CircleBox({circleCount: 10});
+const textLimit = new CircleBox({x: 10, y: 10, circleCount: 100});
 const stage = VRender.createStage({
   container: CONTAINER_ID,
   autoRender: true,
-  pluginList: ['poptipForText'] // Enable the poptipForText plugin
+  pluginList: ['poptipForText'] // 启用poptipForText插件
 });
 
 stage.defaultLayer.add(textLimit);

diff --git a/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md b/docs/assets/guide/zh/asd/Advanced_Tutorial/Flex_Layout.md
@@ -135,7 +135,7 @@ const stage = new VRender.Stage({
   enableLayout: true
 });
 
-stage.defaultLayer.add(rect);
+stage.defaultLayer.add(group);
 
 window['stage'] = stage;
 ```
diff --git a/docs/assets/guide/zh/asd/Basic_Tutorial/Graphic.md b/docs/assets/guide/zh/asd/Basic_Tutorial/Graphic.md
@@ -4,7 +4,7 @@
 
 VRender有很多图元，但是它们的使用方法都差不多，因为他们都继承自`Graphic`类，它们都有几乎相同的属性和方法，只是接受的参数不同。下图所示为图元的继承关系图。
 
-![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-graphic.png)
+![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-graphic-rel.png)
 
 1. 首先他们都继承自`Node`，所以所有图元都有树的结构。
 2. 然后他们都继承自`Graphic`，所以他们都有图元的基础属性和方法比如`x`、`y`、`fill`等。

diff --git a/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md b/docs/assets/guide/zh/asd/FAQ/What_Is_BoundsPadding.md
@@ -36,10 +36,10 @@ const stage = new VRender.Stage({
   autoRender: true
 });
 
-const textLimit = createText({
+const textLimit = cVRender.reateText({
   x: 0,
   y: 0,
-  fill: colorPools[5],
+  fill: 'pink',
   text: '这是没有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
@@ -49,10 +49,10 @@ const textLimit = createText({
   _debug_bounds: true,
   background: 'green'
 });
-const textLimit2 = createText({
+const textLimit2 = VRender.createText({
   x: 0,
   y: 60,
-  fill: colorPools[5],
+  fill: 'pink',
   text: '这是有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
@@ -64,8 +64,7 @@ const textLimit2 = createText({
   background: 'green'
 });
 
-const group = createGroup({x: 100, y: 100, width: 200, height: 200})
-graphics.push(group);
+const group = VRender.createGroup({x: 100, y: 100, width: 200, height: 200});
 group.add(textLimit);
 group.add(textLimit2);
 
@@ -84,10 +83,10 @@ const stage = new VRender.Stage({
   enableLayout: true
 });
 
-const textLimit = createText({
+const textLimit = VRender.createText({
   x: 0,
   y: 0,
-  fill: colorPools[5],
+  fill: 'pink',
   text: '这是没有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
@@ -97,10 +96,10 @@ const textLimit = createText({
   _debug_bounds: true,
   background: 'green'
 });
-const textLimit2 = createText({
+const textLimit2 = VRender.createText({
   x: 0,
   y: 60,
-  fill: colorPools[5],
+  fill: 'pink',
   text: '这是有BoundsPadding的文字包围盒',
   wordBreak: 'keep-all',
   maxLineWidth: 120,
@@ -112,8 +111,7 @@ const textLimit2 = createText({
   background: 'green'
 });
 
-const group = createGroup({x: 100, y: 100, width: 200, height: 200, display: 'flex'})
-graphics.push(group);
+const group = VRender.createGroup({x: 100, y: 100, width: 200, height: 200, display: 'flex'});
 group.add(textLimit);
 group.add(textLimit2);
 

diff --git a/docs/assets/guide/zh/asd/VRender_Components/VRender_Components_Introduction.md b/docs/assets/guide/zh/asd/VRender_Components/VRender_Components_Introduction.md
@@ -2,7 +2,7 @@
 
 组件是特殊的图元，也是特殊的Group。VRender提供了一系列内置的组件，比如`datazoom`、`axes`、`label`、`legend`、`poptip`等，这些组件可以帮助我们快速实现一些常见的交互效果。外部也可以通过继承`@visactor/vrender-components`中的`AbstractComponent`来实现自定义组件。
 
-![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-component-intro-all.png)
+![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-component-intro-component.png)
 
 ## 介绍
 
@@ -167,6 +167,7 @@ class CircleBox extends VRenderComponent.AbstractComponent {
     circleStyle: {
       fill: 'red',
     },
+    stroke: 'blue',
     circleCount: 10,
     width: 300,
     height: 300
@@ -193,7 +194,7 @@ class CircleBox extends VRenderComponent.AbstractComponent {
   }
 }
 
-const textLimit = new CircleBox({circleCount: 10});
+const textLimit = new CircleBox({x: 10, y: 10, circleCount: 100});
 const stage = VRender.createStage({
   container: CONTAINER_ID,
   autoRender: true,