From fd52ff4ce6bbb5b11059f1bc7ed4e7b18c3b9ebe Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 12 Feb 2025 15:59:23 +0800 Subject: [PATCH] docs: update desc of graphics --- .../vrender-core/src/interface/graphic/arc.ts | 19 +++- .../src/interface/graphic/area.ts | 20 +++- .../src/interface/graphic/circle.ts | 9 ++ .../src/interface/graphic/group.ts | 45 +++++++- .../src/interface/graphic/image.ts | 23 ++++ .../src/interface/graphic/line.ts | 27 ++++- .../src/interface/graphic/polygon.ts | 10 +- .../src/interface/graphic/rect.ts | 8 ++ .../src/interface/graphic/text.ts | 102 ++++++++++++++++-- 9 files changed, 245 insertions(+), 18 deletions(-) diff --git a/packages/vrender-core/src/interface/graphic/arc.ts b/packages/vrender-core/src/interface/graphic/arc.ts index c333ed298..6818430e7 100644 --- a/packages/vrender-core/src/interface/graphic/arc.ts +++ b/packages/vrender-core/src/interface/graphic/arc.ts @@ -5,13 +5,21 @@ import type { ICustomPath2D } from '../path'; * 扇区属性 */ export type IArcAttribute = { - /** 内半径 */ + /** + * 内半径 + */ innerRadius: number; - /** 外半径 */ + /** + * 外半径 + */ outerRadius: number; - /* 内边距 */ + /** + * 内边距 + */ innerPadding: number; - /* 外边距 */ + /** + * 外边距 + */ outerPadding: number; /** * 起始角度； @@ -47,6 +55,9 @@ export type IArcAttribute = { * 间隔角度通常只应用于环形扇区（即当内半径大于 0） */ padAngle: number; + /** + * 间隙半径 + */ padRadius: number; /** diff --git a/packages/vrender-core/src/interface/graphic/area.ts b/packages/vrender-core/src/interface/graphic/area.ts index e3554bfba..fed39b067 100644 --- a/packages/vrender-core/src/interface/graphic/area.ts +++ b/packages/vrender-core/src/interface/graphic/area.ts @@ -4,11 +4,29 @@ import type { IConnectedStyle, IGraphic, IGraphicAttribute } from '../graphic'; import type { ICurveType } from '../common'; export type IAreaAttribute = { - segments: IAreaSegment[]; // 分段设置point和样式 + /** + * 分段设置point和样式 + */ + segments: IAreaSegment[]; + /** + * 所有的点坐标 + */ points: IPointLike[]; + /** + * 曲线的类型，默认为linear + */ curveType: ICurveType; + /** + * 线段的裁切比例/显示长度占总长度的比例 + */ clipRange: number; + /** + * 是否是闭合曲线 + */ closePath: boolean; + /** + * 曲线类型为catmullRom时，对应的张力参数 + */ curveTension: number; }; diff --git a/packages/vrender-core/src/interface/graphic/circle.ts b/packages/vrender-core/src/interface/graphic/circle.ts index 81a086ef1..9e5c434de 100644 --- a/packages/vrender-core/src/interface/graphic/circle.ts +++ b/packages/vrender-core/src/interface/graphic/circle.ts @@ -1,8 +1,17 @@ import type { IGraphicAttribute, IGraphic } from '../graphic'; export type ICircleAttribute = { + /** + * 半径 + */ radius: number; + /** + * 起始角度，单位为弧度 + */ startAngle: number; + /** + * 终止角度，单位为弧度 + */ endAngle: number; }; diff --git a/packages/vrender-core/src/interface/graphic/group.ts b/packages/vrender-core/src/interface/graphic/group.ts index 371befb48..549db55b6 100644 --- a/packages/vrender-core/src/interface/graphic/group.ts +++ b/packages/vrender-core/src/interface/graphic/group.ts @@ -4,20 +4,63 @@ import type { INode } from '../node-tree'; import type { GraphicAttributeMap } from './creator'; export type IGroupAttribute = { + /** + * 路径，用于绘制路径图形或者设置裁剪图形 + */ path: IGraphic[]; + /** + * 宽度 + */ width: number; + /** + * 高度 + */ height: number; + /** + * 圆角半径 + */ cornerRadius: number | number[]; + /** + * 圆角类型， + * 'round' - 圆弧 + * 'bevel' - 斜角 + */ cornerType: 'round' | 'bevel'; + /** + * 是否剪裁 + */ clip: boolean; + /** + * 所有的子节点是否可见 + */ visibleAll: boolean; + /** + * 布局方式 + */ display?: 'relative' | 'inner-block' | 'flex'; + /** + * flex布局的方向 + */ flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; + /** + * flex布局的换行 + */ flexWrap?: 'nowrap' | 'wrap'; + /** + * flex布局中，子元素在主轴上的对齐方式 + */ justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'; + /** + * flex布局中，子元素在交叉轴上的对齐方式 + */ alignItems?: 'flex-start' | 'flex-end' | 'center'; + /** + * flex布局中，多行内容的垂直对齐方式 + */ alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around'; - // 基准的透明度，用于控制group下面整体图元的透明度 + /** + * 基准的透明度，用于控制group下面整体图元的透明度 + */ baseOpacity?: number; }; diff --git a/packages/vrender-core/src/interface/graphic/image.ts b/packages/vrender-core/src/interface/graphic/image.ts index 4c1e0ebd6..b48c2320a 100644 --- a/packages/vrender-core/src/interface/graphic/image.ts +++ b/packages/vrender-core/src/interface/graphic/image.ts @@ -3,12 +3,35 @@ import type { IGraphicAttribute, IGraphic } from '../graphic'; export type IRepeatType = 'no-repeat' | 'repeat'; export type IImageAttribute = { + /** + * 宽度 + */ width: number; + /** + * 高度 + */ height: number; + /** + * x方向的重复方式 + */ repeatX: IRepeatType; + /** + * y方向的重复方式 + */ repeatY: IRepeatType; + /** + * 图像url或者内容 + */ image: string | HTMLImageElement | HTMLCanvasElement; + /** + * 圆角半径 + */ cornerRadius: number | number[]; + /** + * 圆角类型， + * 'round' - 圆弧 + * 'bevel' - 斜角 + */ cornerType: 'round' | 'bevel'; }; diff --git a/packages/vrender-core/src/interface/graphic/line.ts b/packages/vrender-core/src/interface/graphic/line.ts index 11f56ff11..17b2e577d 100644 --- a/packages/vrender-core/src/interface/graphic/line.ts +++ b/packages/vrender-core/src/interface/graphic/line.ts @@ -10,12 +10,33 @@ import type { ISegPath2D } from '../curve'; export type IClipRangeByDimensionType = 'x' | 'y' | 'auto' | 'default'; export type ILineAttribute = { - segments: ISegment[]; // 分段设置point和样式 - points: IPointLike[]; // segments points 二选一 + /** + * 分段设置point和样式 + */ + segments: ISegment[]; + /** + * 所有点的坐标，segments 和 points 不能同时生效 + */ + points: IPointLike[]; + /** + * 曲线的类型，默认为linear + */ curveType: ICurveType; + /** + * 线段的裁切比例/显示长度占总长度的比例 + */ clipRange: number; + /** + * 裁剪的维度 + */ clipRangeByDimension: IClipRangeByDimensionType; - closePath: boolean; // 是否封闭路径 + /** + * 是否封闭路径 + */ + closePath: boolean; + /** + * 曲线类型为catmullRom时，对应的张力参数 + */ curveTension: number; }; diff --git a/packages/vrender-core/src/interface/graphic/polygon.ts b/packages/vrender-core/src/interface/graphic/polygon.ts index edc15e3ee..c49e8d5b9 100644 --- a/packages/vrender-core/src/interface/graphic/polygon.ts +++ b/packages/vrender-core/src/interface/graphic/polygon.ts @@ -2,9 +2,17 @@ import type { IPointLike } from '@visactor/vutils'; import type { IGraphicAttribute, IGraphic } from '../graphic'; export type IPolygonAttribute = { - // ? 不需要x2/y2 + /** + * 多边形的顶点坐标 + */ points: IPointLike[]; + /** + * 圆角半径 + */ cornerRadius?: number | number[]; + /** + * 是否闭合多边形 + */ closePath?: boolean; }; diff --git a/packages/vrender-core/src/interface/graphic/rect.ts b/packages/vrender-core/src/interface/graphic/rect.ts index 3b235f94f..1617b6043 100644 --- a/packages/vrender-core/src/interface/graphic/rect.ts +++ b/packages/vrender-core/src/interface/graphic/rect.ts @@ -6,7 +6,15 @@ export type IRectAttribute = { height: number; x1: number; y1: number; + /** + * 圆角半径 + */ cornerRadius: number | number[]; + /** + * 圆角类型， + * 'round' - 圆弧 + * 'bevel' - 斜角 + */ cornerType: 'round' | 'bevel'; }; diff --git a/packages/vrender-core/src/interface/graphic/text.ts b/packages/vrender-core/src/interface/graphic/text.ts index 61bae93c5..f1f54ee13 100644 --- a/packages/vrender-core/src/interface/graphic/text.ts +++ b/packages/vrender-core/src/interface/graphic/text.ts @@ -39,41 +39,127 @@ export enum MeasureModeEnum { } export type ITextAttribute = { + /** + * 文字内容 + */ text: string | number | string[] | number[]; + /** + * 单行的的最大长度，当超出这个长度，可以展示省略符或者换行、截断等 + * 后续可能去除 + */ maxLineWidth: number; + /** + * 单行的的最大长度，当超出这个长度，可以展示省略符或者换行、截断等 + * 同 maxLineWidth + */ maxWidth: number; + /** + * 文字对齐方式 + */ textAlign: TextAlignType; + /** + * 文字竖直方向的对齐方式 + */ textBaseline: TextBaselineType; + /** + * 字号 + */ fontSize: number; + /** + * 字体 + */ fontFamily: string; + /** + * 字重 + */ fontWeight: string | number; + /** + * 文字超出后的省略符 + */ ellipsis: boolean | string; + /** + * 控制文本的小型大写字母（small-caps）显示 + */ fontVariant: string; + /** + * 字体样式，是否为斜体等 + */ fontStyle: string; + /** + * 行高（字符串类型表示比例值，如"150%"） + */ lineHeight: number | string; + /** + * 是否显示下划线 + */ underline: number; + /** + * 是否显示中划线 + */ lineThrough: number; + /** + * 在3d场景下是否根据z坐标缩放 + */ scaleIn3d: boolean; + /** + * 文本的排布方向，如果需要文本纵向排布，可以配置为 'vertical' + */ direction: 'horizontal' | 'vertical'; - verticalMode: number; // 垂直布局的模式，0代表默认（横向textAlign，纵向textBaseline），1代表特殊（横向textBaseline，纵向textAlign） + /** + * 垂直布局的模式，0代表默认（横向textAlign，纵向textBaseline），1代表特殊（横向textBaseline，纵向textAlign） + */ + verticalMode: number; + /* + * 单词断行 + */ wordBreak: 'break-word' | 'break-all' | 'keep-all'; + /** + * 内部配置，是否忽略一些bounds的buffer + */ ignoreBuf: boolean; + /** + * 高度限制控制显示内容及省略号 + */ heightLimit: number; + /** + * 按照行数限制显示内容及省略号 + */ lineClamp: number; + /** + * 同 whiteSpace: 'normal' + * 后续可能删除 + */ wrap: boolean; + /** + * 设置如何处理空白字符 + */ whiteSpace: 'normal' | 'no-wrap'; + /** + * 省略号的位置，默认为'end' + */ suffixPosition: 'start' | 'end' | 'middle'; + /** + * 下划线的虚线样式 + */ underlineDash: number[]; + /** + * 下划线的虚线偏移量 + */ underlineOffset: number; - // textDecoration: number; - // textDecorationWidth: number; - // padding?: number | number[]; + /** + * 关闭poptip + */ disableAutoClipedPoptip?: boolean; - // @since 0.21.0 - // 测量模式，默认使用actualBounding + /** + * @since 0.21.0 + * 测量模式，默认使用actualBounding + */ measureMode?: MeasureModeEnum; - // @since 0.21.0 - // 保持在行中间的位置 + + /** + * @since 0.21.0 + * 保持在行中间的位置 + */ keepCenterInLine?: boolean; }; export type ITextCache = {