VRender 0.21.0
Examples
Tutorials
Options
Contributing
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=What Is BoundsPadding——VisActor/VRender tutorial documents!!!###!!!!!!###!!!description=*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`.```ts// Padding for the bounding box// If it is a number, then padding on all four sides is this value// If it is a [number, number], then it is padding for top/bottom and left/right respectively// If it is a [number, number, number, number], then it is padding for top, right, bottom, and left respectivelyboundsPadding: number | number[];```![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vrender/vrender-faq-boundsPadding1.png)!!!###!!!

What is BoundsPadding

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.

// Padding for the bounding box
// If it is a number, then padding on all four sides is this value
// If it is a [number, number], then it is padding for top/bottom and left/right respectively
// If it is a [number, number, number, number], then it is padding for top, right, bottom, and left respectively
boundsPadding: number | number[];

Special Cases

As mentioned earlier, BoundsPadding affects the elements' AABBBounds, which normally does not affect the position because the position is fixed through configurations like x and y, not based on the position relationship between elements.

However!! When you enable the flex layout plugin and set display: flex in an element, that element will apply flex layout. Its child elements will then be laid out based on its AABBBounds. In this case, BoundsPadding will affect the position of the child elements.

For more details on Flex layout, please refer to the Flex Layout section.

Examples

Next, we will show two examples, one without using flex layout where BoundsPadding does not affect the element position, and one using flex layout where BoundsPadding affects the element position.

Without using flex layout, BoundsPadding does not affect element position

Using flex layout, BoundsPadding affects element position