From 89c118cce74c2772c79040019fa8a4eef6fba4c8 Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 3 Apr 2026 09:54:00 +0800 Subject: [PATCH] feat: upgrade vrender to enhance image and background image --- common/config/rush/pnpm-lock.yaml | 238 +++++------------- docs/assets/option/en/common/background.md | 17 +- docs/assets/option/en/graphic/fill-style.md | 14 ++ docs/assets/option/en/graphic/image.md | 33 ++- docs/assets/option/zh/common/background.md | 17 +- docs/assets/option/zh/graphic/fill-style.md | 14 ++ docs/assets/option/zh/graphic/image.md | 33 ++- docs/package.json | 4 +- packages/openinula-vchart/package.json | 4 +- packages/react-vchart/package.json | 6 +- packages/vchart-extension/package.json | 8 +- .../vchart-types/types/typings/visual.d.ts | 72 +++++- packages/vchart/package.json | 10 +- packages/vchart/src/typings/visual.ts | 84 ++++++- tools/story-player/package.json | 6 +- 15 files changed, 360 insertions(+), 200 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 5cde2a118b..3c208ca9e3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -37,11 +37,11 @@ importers: specifier: 1.2.4-alpha.5 version: 1.2.4-alpha.5 '@visactor/vrender': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vtable': specifier: 1.19.0-alpha.0 version: 1.19.0-alpha.0 @@ -203,11 +203,11 @@ importers: specifier: workspace:2.0.20 version: link:../vchart '@visactor/vrender-core': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vutils': specifier: ~1.0.23 version: 1.0.23 @@ -294,11 +294,11 @@ importers: specifier: workspace:2.0.20 version: link:../vchart-extension '@visactor/vrender-core': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vutils': specifier: ~1.0.23 version: 1.0.23 @@ -529,17 +529,17 @@ importers: specifier: ~1.0.23 version: 1.0.23 '@visactor/vrender-animate': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-components': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-core': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vscale': specifier: ~1.0.23 version: 1.0.23 @@ -692,17 +692,17 @@ importers: specifier: ~1.0.23 version: 1.0.23 '@visactor/vrender-animate': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-components': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-core': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vutils': specifier: ~1.0.23 version: 1.0.23 @@ -1260,14 +1260,14 @@ importers: specifier: workspace:2.0.20 version: link:../../packages/vchart '@visactor/vrender': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-core': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vrender-kits': - specifier: 1.0.44 - version: 1.0.44 + specifier: 1.0.45 + version: 1.0.45 '@visactor/vutils': specifier: ~1.0.23 version: 1.0.23 @@ -3073,29 +3073,29 @@ packages: '@visactor/vrender-animate@1.0.0-alpha.18': resolution: {integrity: sha512-9kTtvp1ef+1t+AtUiza6A7qBQP7SmvOu3/ILGrqs/HGdZVj1XGjbYvD/X/zwKJ3LEb7gGV5fa8x95e4czTvRSA==} - '@visactor/vrender-animate@1.0.44': - resolution: {integrity: sha512-MKtoaucmbQNJnuff5F6ws+c8+mRBz1gXVY/bHw38nfvSTZcsJcXYug2aDPf4V9XaUSValDnkx9TyLLbKJ0o0TA==} + '@visactor/vrender-animate@1.0.45': + resolution: {integrity: sha512-6v7LRpr+zugxR8JH3RCnodYxrrzHkSp4GaBTNwXuJ7bwThi/YzXTvmBz2pfQNmUG/rRze8Bm7vqneHVdXuFhng==} '@visactor/vrender-components@1.0.0-alpha.18': resolution: {integrity: sha512-7Euq+ZfswL74n2pgkaqZSsPxoSa5SPIGyXatN1eUrdzM2Z0kX6U0RcJg01fctvRs4op6WhcecRLqGvnHcBeb9Q==} - '@visactor/vrender-components@1.0.44': - resolution: {integrity: sha512-vbCa/eME1UJL2iy0l4JHYJh1m6SG3rR5jt5umblLVRQjjBEWPAnhnPwQAA2TNiyO5eHG6qnyvcjgV5aeCeuJYw==} + '@visactor/vrender-components@1.0.45': + resolution: {integrity: sha512-rYsG/rncT5FgYYWqv09f6LkZEAk/IS45IEYWBD0SCgKguYnpEebYDmDba1muJGn+rRv/vGlqg1pYqXLw8mEU5w==} '@visactor/vrender-core@1.0.0-alpha.18': resolution: {integrity: sha512-0ihtNvCyNkOsWPFgRqowHzq0IcQgS2Wl/nPpKbVtxWKveenwlhA+ZKoQvam6VJyBY7jeNe1pROy0mJMDyVAJQw==} - '@visactor/vrender-core@1.0.44': - resolution: {integrity: sha512-DrB+cg9//RkCZjchWConeXGOC99xwvEDdPfY7eEqajjPxUooJpSQ+pt51uD0VIwQCYtpsc2jVspefqdBh/e2Cg==} + '@visactor/vrender-core@1.0.45': + resolution: {integrity: sha512-kvYAsKGZ+dXbhOQzjjbMkRzI815KgaHoWOW7iyVorXTldQBTsxLtFIi/J3VfYqGdM3apUgsFoy8uvjS5DepPUA==} '@visactor/vrender-kits@1.0.0-alpha.18': resolution: {integrity: sha512-Tvolkq+4G8qiPFZo0Aj8M//Yr6jR2h8FNkFEyWM9gbQbEiTkjpmHAJOYnoSsaPtPrcMSlG4EhJSFDk6ymANHVg==} - '@visactor/vrender-kits@1.0.44': - resolution: {integrity: sha512-B28zr+aTWlFIziH3b/ufUlpKQMv1Ie9ck8kTkHIGdBM/ES+CO6//GHMa/5OxuId19a9UhJxzj8cpeE/9mZLIoQ==} + '@visactor/vrender-kits@1.0.45': + resolution: {integrity: sha512-iaeRitht8IqNvJwdKmcPKAYL0a4+f8xhK2bWUumSQjNbZJQx9UzGuDp73cIdNXzCNoCiJZElpsOiIGu3kymqiw==} - '@visactor/vrender@1.0.44': - resolution: {integrity: sha512-ozYCl57YxY5MVGFS3Pmwu2Q4+h3y6z1tLVu6fVaan6YDZEc1eFIhvVjskGBRd3lFdbTLdL8xRJh+LdMMoIRodQ==} + '@visactor/vrender@1.0.45': + resolution: {integrity: sha512-mHIB9euxbgpotNLe8cn8IThTJbXgrn/B1Nx/PCqp/OeBEcNihmy5X9ODJVgUhrF3dY1ZX0EeE2zrEE0mE/+eHQ==} '@visactor/vscale@0.18.18': resolution: {integrity: sha512-iRG4kv+5Fv4KX3AxEfV95XU3I6OmF0QizyAhqHxKa7L1MaT+MRvDDk5zHWf1E8gialLbL2xDe3GnT6g/4u5jhA==} @@ -13582,8 +13582,8 @@ snapshots: jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-resolve-dependencies: 26.6.3 - jest-runner: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-runtime: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) + jest-runner: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@4.9.5)) + jest-runtime: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@4.9.5)) jest-snapshot: 26.6.2 jest-util: 26.6.2 jest-validate: 26.6.2 @@ -13716,20 +13716,6 @@ snapshots: - ts-node - utf-8-validate - '@jest/test-sequencer@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5))': - dependencies: - '@jest/test-result': 26.6.2 - graceful-fs: 4.2.11 - jest-haste-map: 26.6.2 - jest-runner: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-runtime: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - transitivePeerDependencies: - - bufferutil - - canvas - - supports-color - - ts-node - - utf-8-validate - '@jest/transform@24.9.0': dependencies: '@babel/core': 7.20.12 @@ -15026,9 +15012,9 @@ snapshots: '@visactor/vrender-core': 1.0.0-alpha.18 '@visactor/vutils': 1.0.4 - '@visactor/vrender-animate@1.0.44': + '@visactor/vrender-animate@1.0.45': dependencies: - '@visactor/vrender-core': 1.0.44 + '@visactor/vrender-core': 1.0.45 '@visactor/vutils': 1.0.23 '@visactor/vrender-components@1.0.0-alpha.18': @@ -15039,11 +15025,11 @@ snapshots: '@visactor/vscale': 1.0.4 '@visactor/vutils': 1.0.4 - '@visactor/vrender-components@1.0.44': + '@visactor/vrender-components@1.0.45': dependencies: - '@visactor/vrender-animate': 1.0.44 - '@visactor/vrender-core': 1.0.44 - '@visactor/vrender-kits': 1.0.44 + '@visactor/vrender-animate': 1.0.45 + '@visactor/vrender-core': 1.0.45 + '@visactor/vrender-kits': 1.0.45 '@visactor/vscale': 1.0.23 '@visactor/vutils': 1.0.23 @@ -15052,7 +15038,7 @@ snapshots: '@visactor/vutils': 1.0.4 color-convert: 2.0.1 - '@visactor/vrender-core@1.0.44': + '@visactor/vrender-core@1.0.45': dependencies: '@visactor/vutils': 1.0.23 color-convert: 2.0.1 @@ -15066,21 +15052,21 @@ snapshots: lottie-web: 5.13.0 roughjs: 4.5.2 - '@visactor/vrender-kits@1.0.44': + '@visactor/vrender-kits@1.0.45': dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 1.0.44 + '@visactor/vrender-core': 1.0.45 '@visactor/vutils': 1.0.23 gifuct-js: 2.1.2 lottie-web: 5.13.0 roughjs: 4.6.6 - '@visactor/vrender@1.0.44': + '@visactor/vrender@1.0.45': dependencies: - '@visactor/vrender-animate': 1.0.44 - '@visactor/vrender-components': 1.0.44 - '@visactor/vrender-core': 1.0.44 - '@visactor/vrender-kits': 1.0.44 + '@visactor/vrender-animate': 1.0.45 + '@visactor/vrender-components': 1.0.45 + '@visactor/vrender-core': 1.0.45 + '@visactor/vrender-kits': 1.0.45 '@visactor/vscale@0.18.18': dependencies: @@ -20882,7 +20868,7 @@ snapshots: jest-environment-jsdom: 26.6.2(canvas@2.11.2(encoding@0.1.13)) jest-environment-node: 26.6.2 jest-get-type: 26.3.0 - jest-jasmine2: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@4.9.5)) + jest-jasmine2: 26.6.3 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-util: 26.6.2 @@ -20900,7 +20886,7 @@ snapshots: jest-config@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)): dependencies: '@babel/core': 7.20.12 - '@jest/test-sequencer': 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) + '@jest/test-sequencer': 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@4.9.5)) '@jest/types': 26.6.2 babel-jest: 26.6.3(@babel/core@7.20.12) chalk: 4.1.2 @@ -20910,7 +20896,7 @@ snapshots: jest-environment-jsdom: 26.6.2(canvas@2.11.2(encoding@0.1.13)) jest-environment-node: 26.6.2 jest-get-type: 26.3.0 - jest-jasmine2: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) + jest-jasmine2: 26.6.3 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-util: 26.6.2 @@ -21099,7 +21085,7 @@ snapshots: transitivePeerDependencies: - supports-color - jest-jasmine2@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@4.9.5)): + jest-jasmine2@26.6.3: dependencies: '@babel/traverse': 7.28.5 '@jest/environment': 26.6.2 @@ -21120,38 +21106,7 @@ snapshots: pretty-format: 26.6.2 throat: 5.0.0 transitivePeerDependencies: - - bufferutil - - canvas - supports-color - - ts-node - - utf-8-validate - - jest-jasmine2@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)): - dependencies: - '@babel/traverse': 7.28.5 - '@jest/environment': 26.6.2 - '@jest/source-map': 26.6.2 - '@jest/test-result': 26.6.2 - '@jest/types': 26.6.2 - '@types/node': 20.14.10 - chalk: 4.1.2 - co: 4.6.0 - expect: 26.6.2 - is-generator-fn: 2.1.0 - jest-each: 26.6.2 - jest-matcher-utils: 26.6.2 - jest-message-util: 26.6.2 - jest-runtime: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-snapshot: 26.6.2 - jest-util: 26.6.2 - pretty-format: 26.6.2 - throat: 5.0.0 - transitivePeerDependencies: - - bufferutil - - canvas - - supports-color - - ts-node - - utf-8-validate jest-leak-detector@24.9.0: dependencies: @@ -21299,35 +21254,6 @@ snapshots: - ts-node - utf-8-validate - jest-runner@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)): - dependencies: - '@jest/console': 26.6.2 - '@jest/environment': 26.6.2 - '@jest/test-result': 26.6.2 - '@jest/types': 26.6.2 - '@types/node': 20.14.10 - chalk: 4.1.2 - emittery: 0.7.2 - exit: 0.1.2 - graceful-fs: 4.2.11 - jest-config: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-docblock: 26.0.0 - jest-haste-map: 26.6.2 - jest-leak-detector: 26.6.2 - jest-message-util: 26.6.2 - jest-resolve: 26.6.2 - jest-runtime: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-util: 26.6.2 - jest-worker: 26.6.2 - source-map-support: 0.5.21 - throat: 5.0.0 - transitivePeerDependencies: - - bufferutil - - canvas - - supports-color - - ts-node - - utf-8-validate - jest-runtime@24.9.0: dependencies: '@jest/console': 24.9.0 @@ -21392,42 +21318,6 @@ snapshots: - ts-node - utf-8-validate - jest-runtime@26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)): - dependencies: - '@jest/console': 26.6.2 - '@jest/environment': 26.6.2 - '@jest/fake-timers': 26.6.2 - '@jest/globals': 26.6.2 - '@jest/source-map': 26.6.2 - '@jest/test-result': 26.6.2 - '@jest/transform': 26.6.2 - '@jest/types': 26.6.2 - '@types/yargs': 15.0.20 - chalk: 4.1.2 - cjs-module-lexer: 0.6.0 - collect-v8-coverage: 1.0.3 - exit: 0.1.2 - glob: 7.2.3 - graceful-fs: 4.2.11 - jest-config: 26.6.3(canvas@2.11.2(encoding@0.1.13))(ts-node@10.9.0(@types/node@20.14.10)(typescript@5.4.5)) - jest-haste-map: 26.6.2 - jest-message-util: 26.6.2 - jest-mock: 26.6.2 - jest-regex-util: 26.0.0 - jest-resolve: 26.6.2 - jest-snapshot: 26.6.2 - jest-util: 26.6.2 - jest-validate: 26.6.2 - slash: 3.0.0 - strip-bom: 4.0.0 - yargs: 15.4.1 - transitivePeerDependencies: - - bufferutil - - canvas - - supports-color - - ts-node - - utf-8-validate - jest-serializer@24.9.0: {} jest-serializer@26.6.2: diff --git a/docs/assets/option/en/common/background.md b/docs/assets/option/en/common/background.md index 3e731468dc..1fa171e6a7 100644 --- a/docs/assets/option/en/common/background.md +++ b/docs/assets/option/en/common/background.md @@ -20,9 +20,21 @@ The picture configuration structure is as follows const type BackgroundImage = { image?: string | HTMLImageElement | HTMLCanvasElement; cornerRadius?: number | number[]; + backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto'; + 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]; + backgroundScale?: number; + backgroundOffsetX?: number; + backgroundOffsetY?: number; + backgroundClip?: boolean; + backgroundOpacity?: number; } ``` +Where: + +- `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` +- `backgroundPosition` is supported since version `2.0.21`, and controls the image anchor position within the background area, similar to CSS `background-position` + Example usage: ``` @@ -43,7 +55,10 @@ const spec = { // svg image: svgImage, // url - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png' + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png', + // supported since 2.0.21 + backgroundMode: 'no-repeat-cover', + backgroundPosition: 'center' } } diff --git a/docs/assets/option/en/graphic/fill-style.md b/docs/assets/option/en/graphic/fill-style.md index e9d406e01f..83735d7879 100644 --- a/docs/assets/option/en/graphic/fill-style.md +++ b/docs/assets/option/en/graphic/fill-style.md @@ -86,6 +86,20 @@ Background fill mode, related to specific graphic elements. Optional values: - `'repeat-x'`: Tile horizontally - `'repeat-y'`: Tile vertically - `'no-repeat'`: No tiling +- `'no-repeat-cover'`: Supported since version `2.0.21`. No repeat, scale proportionally and cover the whole graphic area +- `'no-repeat-contain'`: Supported since version `2.0.21`. No repeat, scale proportionally and fit entirely inside the graphic area +- `'no-repeat-fill'`: Supported since version `2.0.21`. No repeat, stretch to fill the graphic area +- `'no-repeat-auto'`: Supported since version `2.0.21`. No repeat, draw with the image's intrinsic size + +#${prefix} backgroundPosition(string|Array) + +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`. + +Supported forms: + +- Single keyword: `'left'`, `'center'`, `'right'`, `'top'`, `'bottom'` +- Preset position: `'top-left'`, `'top-center'`, `'top-right'`, `'center-left'`, `'center'`, `'center-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` +- Tuple: `[x, y]`, where `x` / `y` can be a number, keyword, or percentage string, for example `['25%', '75%']` #${prefix} backgroundFit(boolean) diff --git a/docs/assets/option/en/graphic/image.md b/docs/assets/option/en/graphic/image.md index 99c68fadf9..53eda3c7de 100644 --- a/docs/assets/option/en/graphic/image.md +++ b/docs/assets/option/en/graphic/image.md @@ -28,10 +28,41 @@ The repeat mode for the image in the y direction. - `'repeat'` - `'stretch'` +#${prefix} imageMode(string) + +Supported since version `2.0.21`. Image drawing mode. Only effective when `repeatX` and `repeatY` both resolve to `no-repeat`. + +Optional values: +- `'cover'`: Scale proportionally and crop to cover the whole graphic area +- `'contain'`: Scale proportionally and fit entirely inside the graphic area +- `'fill'`: Stretch to fill the graphic area +- `'auto'`: Draw with the image's intrinsic size + +#${prefix} imagePosition(string|Array) + +Supported since version `2.0.21`. Image anchor position, similar to CSS `background-position`. + +Supported forms: +- Single keyword: `'left'`, `'center'`, `'right'`, `'top'`, `'bottom'` +- Preset position: `'top-left'`, `'top-center'`, `'top-right'`, `'center-left'`, `'center'`, `'center-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` +- Tuple: `[x, y]`, where `x` / `y` can be a number, keyword, or percentage string, for example `['25%', '75%']` + +#${prefix} imageScale(number) + +Supported since version `2.0.21`. Additional image scale ratio. Only effective when the image is not repeated. + +#${prefix} imageOffsetX(number) + +Supported since version `2.0.21`. Additional x offset of the image. Only effective when the image is not repeated. + +#${prefix} imageOffsetY(number) + +Supported since version `2.0.21`. Additional y offset of the image. Only effective when the image is not repeated. + #${prefix} image(string | Object) Image resource, can be a url, HTMLImageElement, or HTMLCanvasElement. {{ use: graphic-attribute( prefix = ${prefix}, -) }} \ No newline at end of file +) }} diff --git a/docs/assets/option/zh/common/background.md b/docs/assets/option/zh/common/background.md index bc6aa2e9e7..9192046594 100644 --- a/docs/assets/option/zh/common/background.md +++ b/docs/assets/option/zh/common/background.md @@ -16,9 +16,21 @@ const type BackgroundImage = { image?: string | HTMLImageElement | HTMLCanvasElement; cornerRadius?: number | number[]; + backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto'; + 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]; + backgroundScale?: number; + backgroundOffsetX?: number; + backgroundOffsetY?: number; + backgroundClip?: boolean; + backgroundOpacity?: number; } ``` +其中： + +- `backgroundMode` 自 `2.0.21` 版本开始支持 `no-repeat-cover` / `no-repeat-contain` / `no-repeat-fill` / `no-repeat-auto` 这些 `no-repeat` 下的尺寸简写 +- `backgroundPosition` 自 `2.0.21` 版本开始支持，用于控制图片在背景区域中的锚定位置，语义类似 CSS `background-position` + 使用示例: ``` @@ -39,7 +51,10 @@ const spec = { // svg image: svgImage, // url - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png' + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/chart-3d/area3d.png', + // 自 2.0.21 版本开始支持 + backgroundMode: 'no-repeat-cover', + backgroundPosition: 'center' } } diff --git a/docs/assets/option/zh/graphic/fill-style.md b/docs/assets/option/zh/graphic/fill-style.md index e1426bee72..11ff17e8f4 100644 --- a/docs/assets/option/zh/graphic/fill-style.md +++ b/docs/assets/option/zh/graphic/fill-style.md @@ -86,6 +86,20 @@ const spec = { - `'repeat-x'`: 水平方向平铺 - `'repeat-y'`: 垂直方向平铺 - `'no-repeat'`: 不平铺 +- `'no-repeat-cover'`: 自 `2.0.21` 版本开始支持，不平铺，等比缩放并覆盖整个图元区域 +- `'no-repeat-contain'`: 自 `2.0.21` 版本开始支持，不平铺，等比缩放并完整包含在图元区域内 +- `'no-repeat-fill'`: 自 `2.0.21` 版本开始支持，不平铺，拉伸填满图元区域 +- `'no-repeat-auto'`: 自 `2.0.21` 版本开始支持，不平铺，按图片原始尺寸绘制 + +#${prefix} backgroundPosition(string|Array) + +自 `2.0.21` 版本开始支持。背景图锚定位置，语义类似 CSS `background-position`，仅在图片背景且最终为 `no-repeat` 时生效。 + +支持以下写法： + +- 单关键字：`'left'`、`'center'`、`'right'`、`'top'`、`'bottom'` +- 预设位置：`'top-left'`、`'top-center'`、`'top-right'`、`'center-left'`、`'center'`、`'center-right'`、`'bottom-left'`、`'bottom-center'`、`'bottom-right'` +- 元组：`[x, y]`，其中 `x` / `y` 支持数值、关键字或百分比字符串，例如 `['25%', '75%']` #${prefix} backgroundFit(boolean) diff --git a/docs/assets/option/zh/graphic/image.md b/docs/assets/option/zh/graphic/image.md index be89d78bc6..8472605b70 100644 --- a/docs/assets/option/zh/graphic/image.md +++ b/docs/assets/option/zh/graphic/image.md @@ -28,10 +28,41 @@ - `'repeat'` - `'stretch'` +#${prefix} imageMode(string) + +自 `2.0.21` 版本开始支持。图片绘制模式，仅在 `repeatX` 和 `repeatY` 最终都为 `no-repeat` 时生效。 + +可选值： +- `'cover'`: 等比缩放并裁剪，覆盖整个图元区域 +- `'contain'`: 等比缩放，完整包含在图元区域内 +- `'fill'`: 拉伸填满图元区域 +- `'auto'`: 按图片原始尺寸绘制 + +#${prefix} imagePosition(string|Array) + +自 `2.0.21` 版本开始支持。图片锚定位置，语义类似 CSS `background-position`。 + +支持以下写法： +- 单关键字：`'left'`、`'center'`、`'right'`、`'top'`、`'bottom'` +- 预设位置：`'top-left'`、`'top-center'`、`'top-right'`、`'center-left'`、`'center'`、`'center-right'`、`'bottom-left'`、`'bottom-center'`、`'bottom-right'` +- 元组：`[x, y]`，其中 `x` / `y` 支持数值、关键字或百分比字符串，例如 `['25%', '75%']` + +#${prefix} imageScale(number) + +自 `2.0.21` 版本开始支持。图片额外缩放比例，仅在不重复平铺时生效。 + +#${prefix} imageOffsetX(number) + +自 `2.0.21` 版本开始支持。图片在 x 方向上的额外偏移量，仅在不重复平铺时生效。 + +#${prefix} imageOffsetY(number) + +自 `2.0.21` 版本开始支持。图片在 y 方向上的额外偏移量，仅在不重复平铺时生效。 + #${prefix} image(string | Object) 图片资源，可传入url、HTMLImageElement 或 HTMLCanvasElement。 {{ use: graphic-attribute( prefix = ${prefix}, -) }} \ No newline at end of file +) }} diff --git a/docs/package.json b/docs/package.json index fcae291319..556753a5b3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~1.0.23", - "@visactor/vrender": "1.0.44", - "@visactor/vrender-kits": "1.0.44", + "@visactor/vrender": "1.0.45", + "@visactor/vrender-kits": "1.0.45", "@visactor/vtable": "1.19.0-alpha.0", "@visactor/vtable-editors": "1.19.0-alpha.0", "@visactor/vtable-gantt": "1.19.0-alpha.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 7848d5c7e5..1e03f9f639 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:2.0.20", "@visactor/vutils": "~1.0.23", - "@visactor/vrender-core": "1.0.44", - "@visactor/vrender-kits": "1.0.44", + "@visactor/vrender-core": "1.0.45", + "@visactor/vrender-kits": "1.0.45", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 27da9d0053..1d5759dffc 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -31,8 +31,8 @@ "@visactor/vchart": "workspace:2.0.20", "@visactor/vchart-extension": "workspace:2.0.20", "@visactor/vutils": "~1.0.23", - "@visactor/vrender-core": "1.0.44", - "@visactor/vrender-kits": "1.0.44", + "@visactor/vrender-core": "1.0.45", + "@visactor/vrender-kits": "1.0.45", "react-is": "^18.2.0" }, "devDependencies": { @@ -83,4 +83,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index 5c8878bfb3..4849c5d847 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,10 +21,10 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "1.0.44", - "@visactor/vrender-kits": "1.0.44", - "@visactor/vrender-components": "1.0.44", - "@visactor/vrender-animate": "1.0.44", + "@visactor/vrender-core": "1.0.45", + "@visactor/vrender-kits": "1.0.45", + "@visactor/vrender-components": "1.0.45", + "@visactor/vrender-animate": "1.0.45", "@visactor/vchart": "workspace:2.0.20", "@visactor/vutils": "~1.0.23", "@visactor/vdataset": "~1.0.23", diff --git a/packages/vchart-types/types/typings/visual.d.ts b/packages/vchart-types/types/typings/visual.d.ts index ff249d47d6..802bce9324 100644 --- a/packages/vchart-types/types/typings/visual.d.ts +++ b/packages/vchart-types/types/typings/visual.d.ts @@ -85,6 +85,38 @@ export interface ICommonSpec { html?: IMarkHtmlSpec; [key: string]: any; } +/** + * 非平铺背景图/图片的尺寸模式。 + * @since 2.0.21 + */ +export type BackgroundSizing = 'cover' | 'contain' | 'fill' | 'auto'; +export type BackgroundRepeatMode = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; +/** + * `backgroundMode` 在 `no-repeat` 下的尺寸简写。 + * @since 2.0.21 + */ +export type BackgroundSizingShorthand = 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto'; +export type BackgroundMode = BackgroundRepeatMode | BackgroundSizingShorthand; +export type BackgroundPositionHorizontalKeyword = 'left' | 'center' | 'right'; +export type BackgroundPositionVerticalKeyword = 'top' | 'center' | 'bottom'; +export type BackgroundPositionKeyword = BackgroundPositionHorizontalKeyword | BackgroundPositionVerticalKeyword; +export type BackgroundPositionPercent = `${number}%`; +export type BackgroundPositionValue = number | BackgroundPositionKeyword | BackgroundPositionPercent; +/** + * `backgroundPosition` / `imagePosition` 的预设定位。 + * @since 2.0.21 + */ +export type BackgroundPositionPreset = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; +/** + * 类似 CSS `background-position` 的定位写法。 + * @since 2.0.21 + */ +export type BackgroundPosition = BackgroundPositionKeyword | BackgroundPositionPreset | [BackgroundPositionValue, BackgroundPositionValue]; +/** + * image 图元在非平铺模式下的尺寸模式。 + * @since 2.0.21 + */ +export type ImageMode = BackgroundSizing; export interface IFillMarkSpec extends ICommonSpec { fill?: VisualType | IGradient | false | IColorKey; shadowBlur?: number; @@ -93,12 +125,24 @@ export interface IFillMarkSpec extends ICommonSpec { shadowOffsetY?: number; fillOpacity?: number; background?: IColor | HTMLImageElement | HTMLCanvasElement | null; - backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; + /** + * 背景图绘制模式（与具体图元有关）。 + * 原有平铺模式为：`repeat` / `repeat-x` / `repeat-y` / `no-repeat`； + * 自 `2.0.21` 版本开始，支持 `no-repeat-cover` / `no-repeat-contain` / + * `no-repeat-fill` / `no-repeat-auto` 这几个 `no-repeat` 下的尺寸简写。 + */ + backgroundMode?: BackgroundMode; backgroundFit?: boolean; backgroundKeepAspectRatio?: boolean; backgroundScale?: number; backgroundOffsetX?: number; backgroundOffsetY?: number; + /** + * 背景图锚定位置，语义类似 CSS `background-position`。 + * 仅在图片背景且最终为 `no-repeat` 时生效。 + * @since 2.0.21 + */ + backgroundPosition?: BackgroundPosition; backgroundClip?: boolean; backgroundCornerRadius?: number | number[]; backgroundOpacity?: number; @@ -309,6 +353,32 @@ export interface IImageMarkSpec extends IFillMarkSpec { height?: number; repeatX?: IRepeatType; repeatY?: IRepeatType; + /** + * 图片绘制模式。 + * 仅在 `repeatX` 和 `repeatY` 最终都为 `no-repeat` 时生效。 + * @since 2.0.21 + */ + imageMode?: ImageMode; + /** + * 图片锚定位置，语义与 `backgroundPosition` 一致。 + * @since 2.0.21 + */ + imagePosition?: BackgroundPosition; + /** + * 图片额外缩放比例，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageScale?: number; + /** + * 图片 x 方向偏移，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageOffsetX?: number; + /** + * 图片 y 方向偏移，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageOffsetY?: number; image?: string | HTMLImageElement | HTMLCanvasElement; } export type TextAlign = TextAlignType; diff --git a/packages/vchart/package.json b/packages/vchart/package.json index 7e266d5a07..1a1a6119ae 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -122,14 +122,14 @@ "@visactor/vdataset": "~1.0.23", "@visactor/vscale": "~1.0.23", "@visactor/vlayouts": "~1.0.23", - "@visactor/vrender-core": "1.0.44", - "@visactor/vrender-kits": "1.0.44", - "@visactor/vrender-components": "1.0.44", - "@visactor/vrender-animate": "1.0.44", + "@visactor/vrender-core": "1.0.45", + "@visactor/vrender-kits": "1.0.45", + "@visactor/vrender-components": "1.0.45", + "@visactor/vrender-animate": "1.0.45", "@visactor/vutils-extension": "workspace:2.0.20" }, "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vchart/src/typings/visual.ts b/packages/vchart/src/typings/visual.ts index ab91eeb0fc..0f0eb9766e 100644 --- a/packages/vchart/src/typings/visual.ts +++ b/packages/vchart/src/typings/visual.ts @@ -292,6 +292,51 @@ export interface ICommonSpec { [key: string]: any; } +/** + * 非平铺背景图/图片的尺寸模式。 + * @since 2.0.21 + */ +export type BackgroundSizing = 'cover' | 'contain' | 'fill' | 'auto'; +export type BackgroundRepeatMode = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; +/** + * `backgroundMode` 在 `no-repeat` 下的尺寸简写。 + * @since 2.0.21 + */ +export type BackgroundSizingShorthand = 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto'; +export type BackgroundMode = BackgroundRepeatMode | BackgroundSizingShorthand; +export type BackgroundPositionHorizontalKeyword = 'left' | 'center' | 'right'; +export type BackgroundPositionVerticalKeyword = 'top' | 'center' | 'bottom'; +export type BackgroundPositionKeyword = BackgroundPositionHorizontalKeyword | BackgroundPositionVerticalKeyword; +export type BackgroundPositionPercent = `${number}%`; +export type BackgroundPositionValue = number | BackgroundPositionKeyword | BackgroundPositionPercent; +/** + * `backgroundPosition` / `imagePosition` 的预设定位。 + * @since 2.0.21 + */ +export type BackgroundPositionPreset = + | 'top-left' + | 'top-center' + | 'top-right' + | 'center-left' + | 'center' + | 'center-right' + | 'bottom-left' + | 'bottom-center' + | 'bottom-right'; +/** + * 类似 CSS `background-position` 的定位写法。 + * @since 2.0.21 + */ +export type BackgroundPosition = + | BackgroundPositionKeyword + | BackgroundPositionPreset + | [BackgroundPositionValue, BackgroundPositionValue]; +/** + * image 图元在非平铺模式下的尺寸模式。 + * @since 2.0.21 + */ +export type ImageMode = BackgroundSizing; + export interface IFillMarkSpec extends ICommonSpec { /** * 图形的填充颜色 @@ -325,9 +370,12 @@ export interface IFillMarkSpec extends ICommonSpec { */ background?: IColor | HTMLImageElement | HTMLCanvasElement | null; /** - * 背景填充模式（与具体图元有关） + * 背景图绘制模式（与具体图元有关）。 + * 原有平铺模式为：`repeat` / `repeat-x` / `repeat-y` / `no-repeat`； + * 自 `2.0.21` 版本开始，支持 `no-repeat-cover` / `no-repeat-contain` / + * `no-repeat-fill` / `no-repeat-auto` 这几个 `no-repeat` 下的尺寸简写。 */ - backgroundMode?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; + backgroundMode?: BackgroundMode; /** * 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效 */ @@ -348,6 +396,12 @@ export interface IFillMarkSpec extends ICommonSpec { * 背景图偏移，只在no-repeat的时候生效 */ backgroundOffsetY?: number; + /** + * 背景图锚定位置，语义类似 CSS `background-position`。 + * 仅在图片背景且最终为 `no-repeat` 时生效。 + * @since 2.0.21 + */ + backgroundPosition?: BackgroundPosition; /** * 背景图是否裁切，是否调用clip避免绘制到图元外部 */ @@ -1076,6 +1130,32 @@ export interface IImageMarkSpec extends IFillMarkSpec { * 当图片的高度小于 height 时，图片的重复方式 */ repeatY?: IRepeatType; + /** + * 图片绘制模式。 + * 仅在 `repeatX` 和 `repeatY` 最终都为 `no-repeat` 时生效。 + * @since 2.0.21 + */ + imageMode?: ImageMode; + /** + * 图片锚定位置，语义与 `backgroundPosition` 一致。 + * @since 2.0.21 + */ + imagePosition?: BackgroundPosition; + /** + * 图片额外缩放比例，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageScale?: number; + /** + * 图片 x 方向偏移，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageOffsetX?: number; + /** + * 图片 y 方向偏移，仅在不重复平铺时生效。 + * @since 2.0.21 + */ + imageOffsetY?: number; /** * 设置图片的内容，支持三种类型： * 1. string类型，可以是图片资源的路径或者是svg 标签字符串 diff --git a/tools/story-player/package.json b/tools/story-player/package.json index 9650e7c72c..a5334f87f8 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "1.0.44", - "@visactor/vrender-kits": "1.0.44", + "@visactor/vrender-core": "1.0.45", + "@visactor/vrender-kits": "1.0.45", "@visactor/vchart": "workspace:2.0.20", - "@visactor/vrender": "1.0.44", + "@visactor/vrender": "1.0.45", "@visactor/vutils": "~1.0.23" } } \ No newline at end of file