diff --git a/docs/assets/option/en/graphic/fill-style.md b/docs/assets/option/en/graphic/fill-style.md index bf80217ffd..e9d406e01f 100644 --- a/docs/assets/option/en/graphic/fill-style.md +++ b/docs/assets/option/en/graphic/fill-style.md @@ -39,9 +39,9 @@ The offset distance of the shadow in the horizontal direction. The offset distance of the shadow in the vertical direction. -#${prefix} background(string|HtmlImageElement) +#${prefix} background(string|HtmlImageElement|HtmlCanvasElement) -Supported since `1.2.0` version, background configuration, which can be configured as a color string or image URL +Supported since `1.2.0` version, background configuration for graphics, which can be configured as a pure color, image element, or canvas element. > Note that when configured as an image address, the transparency is affected by `fillOpacity`, please be sure to configure `fillOpacity` @@ -77,3 +77,47 @@ const spec = { } ``` + +#${prefix} backgroundMode(string) + +Background fill mode, related to specific graphic elements. Optional values: + +- `'repeat'`: Tile the background +- `'repeat-x'`: Tile horizontally +- `'repeat-y'`: Tile vertically +- `'no-repeat'`: No tiling + +#${prefix} backgroundFit(boolean) + +Whether to fit the background exactly, only effective in `repeat-x`, `repeat-y`, or `no-repeat` mode. + +#${prefix} backgroundKeepAspectRatio(boolean) + +Whether to maintain the aspect ratio of the background image. + +#${prefix} backgroundScale(number) + +Background image scale, only effective in `no-repeat` mode. + +#${prefix} backgroundOffsetX(number) + +Background image horizontal offset, only effective in `no-repeat` mode. + +#${prefix} backgroundOffsetY(number) + +Background image vertical offset, only effective in `no-repeat` mode. + +#${prefix} backgroundClip(boolean) + +Whether the background image is clipped, whether to call clip to avoid drawing outside the graphic element. + +#${prefix} backgroundCornerRadius(number|Array) + +Background corner radius. Can be configured as: + +- Number: Uniformly set the corner radius for all four corners +- Array: Set corner radius for [top-left, top-right, bottom-right, bottom-left] individually + +#${prefix} backgroundOpacity(number) + +Background opacity, value range 0-1. diff --git a/docs/assets/option/zh/graphic/fill-style.md b/docs/assets/option/zh/graphic/fill-style.md index 439dbd4a2d..e1426bee72 100644 --- a/docs/assets/option/zh/graphic/fill-style.md +++ b/docs/assets/option/zh/graphic/fill-style.md @@ -39,8 +39,9 @@ 阴影垂直方向上的偏移距离。 -#${prefix} background(string|HtmlImageElement) -自`1.2.0`版本开始支持,背景配置, 可以配置为颜色字符串或者图片地址 +#${prefix} background(string|HtmlImageElement|HtmlCanvasElement) + +自`1.2.0`版本开始支持,图形的背景配置,可以配置为纯色、图片元素或canvas元素。 > 注意配置为图片地址时,透明度受 `fillOpacity` 影响,请务必配置 `fillOpacity` @@ -76,3 +77,47 @@ const spec = { } ``` + +#${prefix} backgroundMode(string) + +背景填充模式,与具体图元有关。可选值: + +- `'repeat'`: 平铺背景 +- `'repeat-x'`: 水平方向平铺 +- `'repeat-y'`: 垂直方向平铺 +- `'no-repeat'`: 不平铺 + +#${prefix} backgroundFit(boolean) + +是否正好填充背景,只在 `repeat-x`、`repeat-y` 或 `no-repeat` 模式下生效。 + +#${prefix} backgroundKeepAspectRatio(boolean) + +是否保持背景图的宽高比。 + +#${prefix} backgroundScale(number) + +背景图缩放比例,只在 `no-repeat` 模式下生效。 + +#${prefix} backgroundOffsetX(number) + +背景图水平方向偏移,只在 `no-repeat` 模式下生效。 + +#${prefix} backgroundOffsetY(number) + +背景图垂直方向偏移,只在 `no-repeat` 模式下生效。 + +#${prefix} backgroundClip(boolean) + +背景图是否裁切,是否调用 clip 避免绘制到图元外部。 + +#${prefix} backgroundCornerRadius(number|Array) + +背景圆角半径。可以配置为: + +- 数值:统一设置四个角的圆角 +- 数组:分别设置 [左上, 右上, 右下, 左下] 四个角的圆角 + +#${prefix} backgroundOpacity(number) + +背景透明度,取值范围 0-1。 diff --git a/packages/vchart/src/typings/visual.ts b/packages/vchart/src/typings/visual.ts index 11982e4670..196f302ec3 100644 --- a/packages/vchart/src/typings/visual.ts +++ b/packages/vchart/src/typings/visual.ts @@ -299,6 +299,22 @@ export interface IFillMarkSpec extends ICommonSpec { * IColorKey 类型只适用于主题 */ fill?: VisualType | IGradient | false | IColorKey; + /** + * 图形模糊效果程度 + */ + shadowBlur: number; + /** + * 图形的阴影颜色 + */ + shadowColor: string; + /** + * 阴影水平偏移距离 + */ + shadowOffsetX: number; + /** + * 阴影垂直偏移距离 + */ + shadowOffsetY: number; /** * 填充的透明度 */ @@ -308,6 +324,42 @@ export interface IFillMarkSpec extends ICommonSpec { * 图形的背景色,支持纯色、image元素、canvas元素 */ background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + /** + * 背景填充模式(与具体图元有关) + */ + backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; + /** + * 是否正好填充,只在repeat-x或者repeat-y以及no-repeat的时候生效 + */ + backgroundFit: boolean; + /** + * 是否保持背景图的宽高比 + */ + backgroundKeepAspectRatio: boolean; + /** + * 背景图缩放,只在no-repeat的时候生效 + */ + backgroundScale: number; + /** + * 背景图偏移,只在no-repeat的时候生效 + */ + backgroundOffsetX: number; + /** + * 背景图偏移,只在no-repeat的时候生效 + */ + backgroundOffsetY: number; + /** + * 背景图是否裁切,是否调用clip避免绘制到图元外部 + */ + backgroundClip: boolean; + /** + * 背景圆角半径 + */ + backgroundCornerRadius: number | number[]; + /** + * 背景透明度 + */ + backgroundOpacity: number; } export type IMarkHtmlSpec = Partial; diff --git a/skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md index cc9a6d92be..c07713f65d 100644 --- a/skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md @@ -298,9 +298,27 @@ interface ILineLikeMarkSpec extends IFillMarkSpec { } interface IFillMarkSpec extends ICommonSpec { + // Shadow effects + shadowBlur?: number; // Shadow blur radius + shadowColor?: string; // Shadow color + shadowOffsetX?: number; // Shadow X offset + shadowOffsetY?: number; // Shadow Y offset + + // Fill properties fill?: VisualType | IGradient | false | IColorKey; // Fill color fillOpacity?: number; // Fill opacity - background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background + + // Background properties + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover' + backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false + backgroundScale?: number; // Background scale factor @default 1 + backgroundOffsetX?: number; // Background X offset @default 0 + backgroundOffsetY?: number; // Background Y offset @default 0 + backgroundClip?: boolean; // Enable background clipping @default true + backgroundCornerRadius?: number; // Background corner radius @default 0 + backgroundOpacity?: number; // Background opacity @default 1 } ``` diff --git a/skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md index 4ea25fa03a..e69c8f30ea 100644 --- a/skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md @@ -61,9 +61,27 @@ interface IArcMarkSpec { ```typescript interface IFillMarkSpec extends ICommonSpec { - fill?: VisualType | IGradient | false | IColorKey; - fillOpacity?: number; - background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + // Shadow effects + shadowBlur?: number; // Shadow blur radius + shadowColor?: string; // Shadow color + shadowOffsetX?: number; // Shadow X offset + shadowOffsetY?: number; // Shadow Y offset + + // Fill properties + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + + // Background properties + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover' + backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false + backgroundScale?: number; // Background scale factor @default 1 + backgroundOffsetX?: number; // Background X offset @default 0 + backgroundOffsetY?: number; // Background Y offset @default 0 + backgroundClip?: boolean; // Enable background clipping @default true + backgroundCornerRadius?: number; // Background corner radius @default 0 + backgroundOpacity?: number; // Background opacity @default 1 } ``` diff --git a/skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md index 9e1f9adf8f..621a06e07b 100644 --- a/skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md @@ -76,12 +76,27 @@ export interface IGroupMarkSpec extends IFillMarkSpec { ### IFillMarkSpec 填充样式 ```typescript export interface IFillMarkSpec extends ICommonSpec { - /** - * 图形的填充颜色 - */ - fill?: VisualType | IGradient | false | IColorKey; - /** 填充的透明度 */ - fillOpacity?: number; + // 阴影效果 + shadowBlur?: number; // 阴影模糊半径 + shadowColor?: string; // 阴影颜色 + shadowOffsetX?: number; // 阴影 X 偏移 + shadowOffsetY?: number; // 阴影 Y 偏移 + + // 填充属性 + fill?: VisualType | IGradient | false | IColorKey; // 图形的填充颜色 + fillOpacity?: number; // 填充的透明度 + + // 背景属性 + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // 背景填充 + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // 背景重复模式 @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // 背景适应模式 @default 'cover' + backgroundKeepAspectRatio?: boolean; // 保持背景宽高比 @default false + backgroundScale?: number; // 背景缩放因子 @default 1 + backgroundOffsetX?: number; // 背景 X 偏移 @default 0 + backgroundOffsetY?: number; // 背景 Y 偏移 @default 0 + backgroundClip?: boolean; // 启用背景裁剪 @default true + backgroundCornerRadius?: number; // 背景圆角半径 @default 0 + backgroundOpacity?: number; // 背景透明度 @default 1 /** * 图形的背景色,支持纯色、image元素、canvas元素 */ diff --git a/skills/vchart-development-assistant/references/type-details/IFunnelLabelSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IFunnelLabelSpec-Type-Definition.md index 2ec528d564..4a0caeb17e 100644 --- a/skills/vchart-development-assistant/references/type-details/IFunnelLabelSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/IFunnelLabelSpec-Type-Definition.md @@ -373,9 +373,27 @@ type IRichTextMarkSpec = IRichTextAttribute & ```typescript interface IFillMarkSpec extends ICommonSpec { - fill?: VisualType | IGradient | false | IColorKey; - fillOpacity?: number; - background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + // Shadow effects + shadowBlur?: number; // Shadow blur radius + shadowColor?: string; // Shadow color + shadowOffsetX?: number; // Shadow X offset + shadowOffsetY?: number; // Shadow Y offset + + // Fill properties + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + + // Background properties + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover' + backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false + backgroundScale?: number; // Background scale factor @default 1 + backgroundOffsetX?: number; // Background X offset @default 0 + backgroundOffsetY?: number; // Background Y offset @default 0 + backgroundClip?: boolean; // Enable background clipping @default true + backgroundCornerRadius?: number; // Background corner radius @default 0 + backgroundOpacity?: number; // Background opacity @default 1 } interface ICommonSpec { diff --git a/skills/vchart-development-assistant/references/type-details/ISankeyLabelSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/ISankeyLabelSpec-Type-Definition.md index 68ede22f6e..40e9069329 100644 --- a/skills/vchart-development-assistant/references/type-details/ISankeyLabelSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/ISankeyLabelSpec-Type-Definition.md @@ -168,9 +168,27 @@ type LabelStateStyle = { ```typescript interface IFillMarkSpec extends ICommonSpec { - fill?: VisualType | IGradient | false | IColorKey; - fillOpacity?: number; - background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + // Shadow effects + shadowBlur?: number; // Shadow blur radius + shadowColor?: string; // Shadow color + shadowOffsetX?: number; // Shadow X offset + shadowOffsetY?: number; // Shadow Y offset + + // Fill properties + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + + // Background properties + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover' + backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false + backgroundScale?: number; // Background scale factor @default 1 + backgroundOffsetX?: number; // Background X offset @default 0 + backgroundOffsetY?: number; // Background Y offset @default 0 + backgroundClip?: boolean; // Enable background clipping @default true + backgroundCornerRadius?: number; // Background corner radius @default 0 + backgroundOpacity?: number; // Background opacity @default 1 } interface ICommonSpec { diff --git a/skills/vchart-development-assistant/references/type-details/ITextMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/ITextMarkSpec-Type-Definition.md index 54ff3f3092..12c3065179 100644 --- a/skills/vchart-development-assistant/references/type-details/ITextMarkSpec-Type-Definition.md +++ b/skills/vchart-development-assistant/references/type-details/ITextMarkSpec-Type-Definition.md @@ -36,9 +36,25 @@ interface ITextMarkSpec extends IFillMarkSpec { poptip?: PopTipAttributes; // PopTip configuration // Inherited from IFillMarkSpec - fill?: VisualType | IGradient | false | IColorKey; - fillOpacity?: number; - background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + // Shadow effects + shadowBlur?: number; // Shadow blur radius + shadowColor?: string; // Shadow color + shadowOffsetX?: number; // Shadow X offset + shadowOffsetY?: number; // Shadow Y offset + // Fill properties + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + // Background properties + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background fill + backgroundMode?: 'repeat' | 'repeatX' | 'repeatY' | 'noRepeat'; // Background repeat mode @default 'repeat' + backgroundFit?: 'contain' | 'cover' | 'fill'; // Background fit mode @default 'cover' + backgroundKeepAspectRatio?: boolean; // Maintain background aspect ratio @default false + backgroundScale?: number; // Background scale factor @default 1 + backgroundOffsetX?: number; // Background X offset @default 0 + backgroundOffsetY?: number; // Background Y offset @default 0 + backgroundClip?: boolean; // Enable background clipping @default true + backgroundCornerRadius?: number; // Background corner radius @default 0 + backgroundOpacity?: number; // Background opacity @default 1 // Inherited from ICommonSpec visible?: boolean; // Visibility @@ -206,14 +222,16 @@ type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 4 ``` **TextAlignType 文字水平对齐:** + - `'left'`: 左对齐 -- `'center'`: 居中对齐 +- `'center'`: 居中对齐 - `'right'`: 右对齐 - `'start'`: 起始对齐(在LTR中等同于左对齐,在RTL中等同于右对齐) - `'end'`: 结束对齐(在LTR中等同于右对齐,在RTL中等同于左对齐) - `'justify'`: 两端对齐 **TextBaselineType 文字垂直对齐:** + - `'top'`: 顶部对齐 - `'bottom'`: 底部对齐 - `'middle'`: 中心对齐