Skip to content

Commit 89c118c

Browse files
xile611xile611
committed
feat: upgrade vrender to enhance image and background image
1 parent 6e3de2e commit 89c118c

15 files changed

Lines changed: 360 additions & 200 deletions

File tree

‎common/config/rush/pnpm-lock.yaml‎

Lines changed: 64 additions & 174 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/option/en/common/background.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,21 @@ The picture configuration structure is as follows
2020
const type BackgroundImage = {
2121
image?: string | HTMLImageElement | HTMLCanvasElement;
2222
cornerRadius?: number | number[];
23+
backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto';
24+
backgroundPosition?: 'left' | 'center' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | [number | string, number | string];
25+
backgroundScale?: number;
26+
backgroundOffsetX?: number;
27+
backgroundOffsetY?: number;
28+
backgroundClip?: boolean;
29+
backgroundOpacity?: number;
2330
}
2431
```
2532

33+
Where:
34+
35+
- `backgroundMode` supports `no-repeat-cover` / `no-repeat-contain` / `no-repeat-fill` / `no-repeat-auto` since version `2.0.21`, which are size shorthands for `no-repeat`
36+
- `backgroundPosition` is supported since version `2.0.21`, and controls the image anchor position within the background area, similar to CSS `background-position`
37+
2638
Example usage:
2739

2840
```
@@ -43,7 +55,10 @@ const spec = {
4355
// svg
4456
image: svgImage,
4557
// url
46-
image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png'
58+
image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png',
59+
// supported since 2.0.21
60+
backgroundMode: 'no-repeat-cover',
61+
backgroundPosition: 'center'
4762
}
4863
}
4964

‎docs/assets/option/en/graphic/fill-style.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,20 @@ Background fill mode, related to specific graphic elements. Optional values:
8686
- `'repeat-x'`: Tile horizontally
8787
- `'repeat-y'`: Tile vertically
8888
- `'no-repeat'`: No tiling
89+
- `'no-repeat-cover'`: Supported since version `2.0.21`. No repeat, scale proportionally and cover the whole graphic area
90+
- `'no-repeat-contain'`: Supported since version `2.0.21`. No repeat, scale proportionally and fit entirely inside the graphic area
91+
- `'no-repeat-fill'`: Supported since version `2.0.21`. No repeat, stretch to fill the graphic area
92+
- `'no-repeat-auto'`: Supported since version `2.0.21`. No repeat, draw with the image's intrinsic size
93+
94+
#${prefix} backgroundPosition(string|Array<string | number>)
95+
96+
Supported since version `2.0.21`. Background image anchor position, similar to CSS `background-position`. Only effective when the background is an image and the final mode is `no-repeat`.
97+
98+
Supported forms:
99+
100+
- Single keyword: `'left'`, `'center'`, `'right'`, `'top'`, `'bottom'`
101+
- Preset position: `'top-left'`, `'top-center'`, `'top-right'`, `'center-left'`, `'center'`, `'center-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
102+
- Tuple: `[x, y]`, where `x` / `y` can be a number, keyword, or percentage string, for example `['25%', '75%']`
89103

90104
#${prefix} backgroundFit(boolean)
91105

‎docs/assets/option/en/graphic/image.md‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,41 @@ The repeat mode for the image in the y direction.
2828
- `'repeat'`
2929
- `'stretch'`
3030

31+
#${prefix} imageMode(string)
32+
33+
Supported since version `2.0.21`. Image drawing mode. Only effective when `repeatX` and `repeatY` both resolve to `no-repeat`.
34+
35+
Optional values:
36+
- `'cover'`: Scale proportionally and crop to cover the whole graphic area
37+
- `'contain'`: Scale proportionally and fit entirely inside the graphic area
38+
- `'fill'`: Stretch to fill the graphic area
39+
- `'auto'`: Draw with the image's intrinsic size
40+
41+
#${prefix} imagePosition(string|Array<string | number>)
42+
43+
Supported since version `2.0.21`. Image anchor position, similar to CSS `background-position`.
44+
45+
Supported forms:
46+
- Single keyword: `'left'`, `'center'`, `'right'`, `'top'`, `'bottom'`
47+
- Preset position: `'top-left'`, `'top-center'`, `'top-right'`, `'center-left'`, `'center'`, `'center-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
48+
- Tuple: `[x, y]`, where `x` / `y` can be a number, keyword, or percentage string, for example `['25%', '75%']`
49+
50+
#${prefix} imageScale(number)
51+
52+
Supported since version `2.0.21`. Additional image scale ratio. Only effective when the image is not repeated.
53+
54+
#${prefix} imageOffsetX(number)
55+
56+
Supported since version `2.0.21`. Additional x offset of the image. Only effective when the image is not repeated.
57+
58+
#${prefix} imageOffsetY(number)
59+
60+
Supported since version `2.0.21`. Additional y offset of the image. Only effective when the image is not repeated.
61+
3162
#${prefix} image(string | Object)
3263

3364
Image resource, can be a url, HTMLImageElement, or HTMLCanvasElement.
3465

3566
{{ use: graphic-attribute(
3667
prefix = ${prefix},
37-
) }}
68+
) }}

‎docs/assets/option/zh/common/background.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,21 @@
1616
const type BackgroundImage = {
1717
image?: string | HTMLImageElement | HTMLCanvasElement;
1818
cornerRadius?: number | number[];
19+
backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto';
20+
backgroundPosition?: 'left' | 'center' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | [number | string, number | string];
21+
backgroundScale?: number;
22+
backgroundOffsetX?: number;
23+
backgroundOffsetY?: number;
24+
backgroundClip?: boolean;
25+
backgroundOpacity?: number;
1926
}
2027
```
2128

29+
其中：
30+
31+
- `backgroundMode` 自 `2.0.21` 版本开始支持 `no-repeat-cover` / `no-repeat-contain` / `no-repeat-fill` / `no-repeat-auto` 这些 `no-repeat` 下的尺寸简写
32+
- `backgroundPosition` 自 `2.0.21` 版本开始支持，用于控制图片在背景区域中的锚定位置，语义类似 CSS `background-position`
33+
2234
使用示例:
2335

2436
```
@@ -39,7 +51,10 @@ const spec = {
3951
// svg
4052
image: svgImage,
4153
// url
42-
image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png'
54+
image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png',
55+
// 自 2.0.21 版本开始支持
56+
backgroundMode: 'no-repeat-cover',
57+
backgroundPosition: 'center'
4358
}
4459
}
4560

‎docs/assets/option/zh/graphic/fill-style.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,20 @@ const spec = {
8686
- `'repeat-x'`: 水平方向平铺
8787
- `'repeat-y'`: 垂直方向平铺
8888
- `'no-repeat'`: 不平铺
89+
- `'no-repeat-cover'`: 自 `2.0.21` 版本开始支持，不平铺，等比缩放并覆盖整个图元区域
90+
- `'no-repeat-contain'`: 自 `2.0.21` 版本开始支持，不平铺，等比缩放并完整包含在图元区域内
91+
- `'no-repeat-fill'`: 自 `2.0.21` 版本开始支持，不平铺，拉伸填满图元区域
92+
- `'no-repeat-auto'`: 自 `2.0.21` 版本开始支持，不平铺，按图片原始尺寸绘制
93+
94+
#${prefix} backgroundPosition(string|Array<string | number>)
95+
96+
自 `2.0.21` 版本开始支持。背景图锚定位置，语义类似 CSS `background-position`，仅在图片背景且最终为 `no-repeat` 时生效。
97+
98+
支持以下写法：
99+
100+
- 单关键字：`'left'`、`'center'`、`'right'`、`'top'`、`'bottom'`
101+
- 预设位置：`'top-left'`、`'top-center'`、`'top-right'`、`'center-left'`、`'center'`、`'center-right'`、`'bottom-left'`、`'bottom-center'`、`'bottom-right'`
102+
- 元组：`[x, y]`，其中 `x` / `y` 支持数值、关键字或百分比字符串，例如 `['25%', '75%']`
89103

90104
#${prefix} backgroundFit(boolean)
91105

‎docs/assets/option/zh/graphic/image.md‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,41 @@
2828
- `'repeat'`
2929
- `'stretch'`
3030

31+
#${prefix} imageMode(string)
32+
33+
自 `2.0.21` 版本开始支持。图片绘制模式，仅在 `repeatX` 和 `repeatY` 最终都为 `no-repeat` 时生效。
34+
35+
可选值：
36+
- `'cover'`: 等比缩放并裁剪，覆盖整个图元区域
37+
- `'contain'`: 等比缩放，完整包含在图元区域内
38+
- `'fill'`: 拉伸填满图元区域
39+
- `'auto'`: 按图片原始尺寸绘制
40+
41+
#${prefix} imagePosition(string|Array<string | number>)
42+
43+
自 `2.0.21` 版本开始支持。图片锚定位置，语义类似 CSS `background-position`。
44+
45+
支持以下写法：
46+
- 单关键字：`'left'`、`'center'`、`'right'`、`'top'`、`'bottom'`
47+
- 预设位置：`'top-left'`、`'top-center'`、`'top-right'`、`'center-left'`、`'center'`、`'center-right'`、`'bottom-left'`、`'bottom-center'`、`'bottom-right'`
48+
- 元组：`[x, y]`，其中 `x` / `y` 支持数值、关键字或百分比字符串，例如 `['25%', '75%']`
49+
50+
#${prefix} imageScale(number)
51+
52+
自 `2.0.21` 版本开始支持。图片额外缩放比例，仅在不重复平铺时生效。
53+
54+
#${prefix} imageOffsetX(number)
55+
56+
自 `2.0.21` 版本开始支持。图片在 x 方向上的额外偏移量，仅在不重复平铺时生效。
57+
58+
#${prefix} imageOffsetY(number)
59+
60+
自 `2.0.21` 版本开始支持。图片在 y 方向上的额外偏移量，仅在不重复平铺时生效。
61+
3162
#${prefix} image(string | Object)
3263

3364
图片资源，可传入url、HTMLImageElement 或 HTMLCanvasElement。
3465

3566
{{ use: graphic-attribute(
3667
prefix = ${prefix},
37-
) }}
68+
) }}

‎docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"@visactor/vchart-theme": "~1.6.6",
2020
"@visactor/vmind": "1.2.4-alpha.5",
2121
"@visactor/vutils": "~1.0.23",
22-
"@visactor/vrender": "1.0.44",
23-
"@visactor/vrender-kits": "1.0.44",
22+
"@visactor/vrender": "1.0.45",
23+
"@visactor/vrender-kits": "1.0.45",
2424
"@visactor/vtable": "1.19.0-alpha.0",
2525
"@visactor/vtable-editors": "1.19.0-alpha.0",
2626
"@visactor/vtable-gantt": "1.19.0-alpha.0",

‎packages/openinula-vchart/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"dependencies": {
3131
"@visactor/vchart": "workspace:2.0.20",
3232
"@visactor/vutils": "~1.0.23",
33-
"@visactor/vrender-core": "1.0.44",
34-
"@visactor/vrender-kits": "1.0.44",
33+
"@visactor/vrender-core": "1.0.45",
34+
"@visactor/vrender-kits": "1.0.45",
3535
"react-is": "^18.2.0"
3636
},
3737
"devDependencies": {

‎packages/react-vchart/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
"@visactor/vchart": "workspace:2.0.20",
3232
"@visactor/vchart-extension": "workspace:2.0.20",
3333
"@visactor/vutils": "~1.0.23",
34-
"@visactor/vrender-core": "1.0.44",
35-
"@visactor/vrender-kits": "1.0.44",
34+
"@visactor/vrender-core": "1.0.45",
35+
"@visactor/vrender-kits": "1.0.45",
3636
"react-is": "^18.2.0"
3737
},
3838
"devDependencies": {
@@ -83,4 +83,4 @@
8383
"access": "public",
8484
"registry": "https://registry.npmjs.org/"
8585
}
86-
}
86+
}

0 commit comments

Comments
 (0)