查看核心技术产品架构 >基础对象
最近更新时间: 2023-01-10 03:17:56
export type CSSGlobalKeywords = 'unset' | 'initial' | 'inherit' | '';
/**
* 图案
*/
export interface Pattern {
/**
* 图片
*/
image: string | CanvasImageSource;
/**
* 重复排列方式
*/
repetition: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
/**
* 变换
*/
transform: string;
}
/**
* 点状
*/
export interface PointLike {
x: number;
y: number;
}
/**
* 指向
*/
export class Point {
x: number;
y: number;
constructor(x?: number, y?: number);
clone(): Point;
copyFrom(p: Point): void;
}
/**
* 矩形
*/
export class Rectangle implements DOMRect {
x: number;
y: number;
/** 宽 */
width: number;
/** 高 */
height: number;
/** 左 */
left: number;
/** 右 */
right: number;
/** 上 */
top: number;
/** 下 */
bottom: number;
constructor(x: number, y: number, width: number, height: number);
toJSON(): void;
}
/**
* css样式声明
*/
export interface ICSSStyleDeclaration<StyleProps> {
/**
* 设定属性
* @param propertyName 属性名称
* @param value 属性值
* @param priority 优先属性
*/
setProperty: <Key extends keyof StyleProps>(propertyName: Key, value: StyleProps[Key], priority?: string) => void;
/**
* 获取属性
* @param propertyName 属性名
*/
getPropertyValue: (propertyName: keyof StyleProps) => StyleProps[keyof StyleProps] | undefined;
/**
* 移除属性
* @param propertyName 属性名
*/
removeProperty: (propertyName: keyof StyleProps) => void;
/**
* 属性项
* @param index 索引
*/
item: (index: number) => string;
}
/**
* 基本样式
*/
export interface BaseStyleProps {
/**
* 类名
*/
class?: string;
/**
* 变形
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
*/
transform?: string;
/**
* 转换原点
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
*/
transformOrigin?: string;
/**
* 锚 我们如何定义形状的“位置”？
* 例如，Rect的默认锚点是左上角，我们可以将其更改为“中心[0.5，0.5]”。
*/
anchor?: vec2 | vec3 | string;
/**
* 可见度
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
*/
visibility?: 'visible' | 'hidden' | CSSGlobalKeywords;
/**
* 提示
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
*/
pointerEvents?: 'none' | 'auto' | 'stroke' | 'fill' | 'painted' | 'visible' | 'visiblestroke' | 'visiblefill' | 'visiblepainted' | 'all' | CSSGlobalKeywords;
/**
* 层级
* z-index in CSS
*/
zIndex?: number;
/**
* 目标处于活动状态时的光标样式
*/
cursor?: Cursor;
/**
* 剪辑路径
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
*/
clipPath?: DisplayObject | null;
/**
* 偏置路径
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path
*/
offsetPath?: DisplayObject | null;
/**
* 偏移距离
*/
offsetDistance?: number;
/**
* 描边
*/
stroke?: ColorType | Pattern;
/** 描边透明度 */
strokeOpacity?: number | string;
/** 填充颜色 */
fill?: ColorType | Pattern;
/** 填充透明度 */
fillOpacity?: number | string;
/**
* 填充规则属性是定义用于确定形状内部的算法的表示属性。
* @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule
*/
fillRule?: 'nonzero' | 'evenodd';
/** 整体透明度 */
opacity?: number | string;
/**
* 边框宽度
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
*/
strokeWidth?: string | number;
/**
* 如果strokeWidth则为别名
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
*/
lineWidth?: string | number;
/**
* 击球测试时增加的线宽
*/
increasedLineWidthForHitTesting?: string | number;
/**
* 交互区域
*/
hitArea?: DisplayObject | null;
/**
* 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状。
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
*/
strokeLinecap?: CanvasLineCap;
/**
* strokeLinecap的别名
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
*/
lineCap?: CanvasLineCap;
/**
* 属性指明路径的转角处使用的形状或者绘制的基础形状。
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin
*/
strokeLinejoin?: CanvasLineJoin;
/**
* strokeLinejoin的别名
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
*/
lineJoin?: CanvasLineJoin;
/**
* 可控制用来描边的点划线的图案范式。
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
*/
strokeDasharray?: string | (string | number)[];
/**
* strokeDasharray的别名
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash
*/
lineDash?: number | string | (string | number)[];
/**
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
*/
strokeDashoffset?: number;
/**
* strokeDashoffset的别名
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
*/
lineDashOffset?: number;
/**
* 阴影类型
*/
shadowType?: 'inner' | 'outer' | 'both';
/**
* 模糊阴影
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur
*/
shadowBlur?: number;
/**
* 阴影颜色
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor
*/
shadowColor?: ColorType;
/**
* 阴影x轴倾斜
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX
*/
shadowOffsetX?: number;
/**
* 阴影y轴倾斜
* https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY
*/
shadowOffsetY?: number;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/filter
* 过滤
*/
filter?: string;
/**
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-transform
* 文本转换
*/
textTransform?: TextTransform | '';
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit
* 最大倾斜长度
*/
miterLimit?: number | string;
/**
*显示
*/
display?: string;
/**
* @see https://g-next.antv.vision/zh/docs/plugins/dragndrop#drag
* 是否可拖动
*/
draggable?: boolean;
/**
* @see https://g-next.antv.vision/zh/docs/plugins/dragndrop#drop
* 是否可放下
*/
droppable?: boolean;
}
/**
* 基础解析样式
*/
export interface ParsedBaseStyleProps extends Omit<BaseStyleProps, 'anchor' | 'fill' | 'stroke' | 'lineWidth' | 'increasedLineWidthForHitTesting' | 'lineDash' | 'path' | 'points' | 'shadowColor' | 'transform' | 'transformOrigin' | 'miterLimit' | 'filter' | 'opacity' | 'fillOpacity' | 'strokeOpacity'> {
/** 透明度 */
opacity?: number;
/** 填充透明度 */
fillOpacity?: number;
/** 描边透明度 */
strokeOpacity?: number;
/** 填充颜色 */
fill?: CSSRGB | CSSGradientValue[] | Pattern;
/** 描边颜色 */
stroke?: CSSRGB | CSSGradientValue[] | Pattern;
/** 短划线 */
lineDash?: [number, number];
/** 锚点 */
anchor?: [number, number, number];
/** 2D 转换 */
transform: ParsedTransform[];
/** 3D 转换 */
transformOrigin?: [CSSUnitValue, CSSUnitValue, CSSUnitValue];
/** 线宽 */
lineWidth?: number;
/** 用于命中测试的增加线宽 */
increasedLineWidthForHitTesting?: number;
/**
* x根据定义，例如直线的x1/x2，多段线的点
*/
defX?: number;
defY?: number;
/**
* 相对于初始定义的偏移
*/
offsetX?: number;
offsetY?: number;
/** 阴影颜色 */
shadowColor?: CSSRGB;
/** 最大倾斜长度 */
miterLimit?: number;
/** 过滤 */
filter?: ParsedFilterStyleProperty[];
}
export interface DisplayObjectConfig<StyleProps> {
/**
* 元素的标识符在文档中必须是唯一的。
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/id
*/
id?: string;
/** 名称 */
name?: string;
/**
* 类
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className
*/
class?: string;
/** 类名称 */
className?: string;
/**
* 所有样式特性，非只读
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
*/
style?: StyleProps;
/** 初始的解析样式 */
initialParsedStyle?: any;
/**
* 与G 3.0兼容
* @alias style
*/
attrs?: StyleProps;
/** 类型 */
type?: Shape | string;
/**
* 层级
* @deprecated 使用 `style.zIndex` 获取
*/
zIndex?: number;
/**
* 可见
* @deprecated 使用 `style.visibility = 'visible'` 获取
*/
visible?: boolean;
/**
* 捕获 与G 3.0兼容
* @alias interactive
*/
capture?: boolean;
/**
* 交互
* 启用DisplayObject的交互事件
* @deprecated 使用 `style.pointerEvents = 'auto'` 获取
*/
interactive?: boolean;
}
export interface IElement<StyleProps = any, ParsedStyleProps = any> extends INode, IChildNode, IParentNode {
/**
* 返回元素的id内容属性的值。可以设置为更改它。
*/
id: string;
/**
* 返回限定名称。
*/
tagName: string;
/** 名称 */
name: string;
/**
* 返回元素的类内容属性的值。可以设置为更改它。
*/
className: string;
/** 返回元素的类集合 */
classList: string[];
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
*/
attributes: StyleProps;
/**
* 兼容`style` 样式
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
*/
style: StyleProps & ICSSStyleDeclaration<StyleProps>;
/**
* 解析样式
*/
parsedStyle: ParsedStyleProps;
/**
* 按ID获取元素
* @param id 元素id
*/
getElementById: <E extends IElement = IElement>(id: string) => E | null;
/**
* 按名称获取元素
* @param name 元素名称
*/
getElementsByName: <E extends IElement = IElement>(name: string) => E[];
/**
* 按类名获取元素
* @param className 类名
*/
getElementsByClassName: <E extends IElement = IElement>(className: string) => E[];
/**
* 按标记名获取元素
* @param tagName 标记名
*/
getElementsByTagName: <E extends IElement = IElement>(tagName: string) => E[];
/**
* 滚动条到元素左边的距离
*/
scrollLeft: number;
/**
* 元素的内容垂直滚动的像素数
*/
scrollTop: number;
/**
* 一个元素的左边框的宽度
*/
clientLeft: number;
/**
* 一个元素顶部边框的宽度
*/
clientTop: number;
/**
* 设置指定元素上的某个属性值
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
*/
setAttribute: <Key extends keyof StyleProps>(attributeName: Key, value: StyleProps[Key], force?: boolean) => void;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
* 返回元素上一个指定的属性值
*/
getAttribute: (attributeName: keyof StyleProps) => StyleProps[keyof StyleProps] | undefined;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
* 从指定的元素中删除一个属性。
*/
removeAttribute: (attributeName: keyof StyleProps) => void;
/**
* 返回一个布尔值，指示该元素是否包含有指定的属性
* @param qualifiedName 属性名称
*/
hasAttribute: (qualifiedName: string) => boolean;
}
export class GElement<StyleProps extends BaseStyleProps = any, ParsedStyleProps extends ParsedBaseStyleProps = any> extends Node implements IElement<StyleProps, ParsedStyleProps> {
static isElement(target: IEventTarget | INode | IElement): target is IElement;
/**
* 唯一id。
*/
entity: number;
/**
* 可渲染
*/
renderable: Renderable;
/**
* 可剔除
*/
cullable: Cullable;
/**
* 可变形
*/
transformable: Transform;
/**
* 可排序
*/
sortable: Sortable;
/**
* 几何
*/
geometry: Geometry;
rBushNode: RBushNode;
/**
* id
* 可以使用 `getElementById()`
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/id
*/
id: string;
/**
* 使用 `getElementsByClassName` 获取
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
*/
get className(): string;
set className(className: string);
/**
* 名称
* 使用 `getElementsByName` 获取
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
*/
name: string;
/**
* 命名空间
* https://developer.mozilla.org/zh-CN/docs/Web/API/Element/namespaceURI
*/
namespaceURI: string;
/**
* 获取类名集合
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
*/
get classList(): string[];
/**
* 滚动条到元素左边的距离
*/
scrollLeft: number;
/**
* 元素的内容垂直滚动的像素数
*/
scrollTop: number;
/**
* 我们现在不支持边界
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop
*/
/**
* 一个元素的左边框的宽度
*/
clientLeft: number;
/**
* 一个元素顶部边框的宽度
*/
clientTop: number;
/**
* 标签名称
*/
get tagName(): string;
/**
* 子级
*/
get children(): IElement[];
/**
* 子元素计数
*/
get childElementCount(): number;
/**
* 第一个元素子项
*/
get firstElementChild(): IElement | null;
/**
* 最后一个元素子项
*/
get lastElementChild(): IElement | null;
/**
* 父元素
*/
get parentElement(): IElement | null;
/**
* 下一个兄弟元素
*/
get nextSibling(): IElement | null;
/**
* 前一个兄弟元素
*/
get previousSibling(): IElement | null;
/**
* 克隆节点
* @param deep
*/
cloneNode(deep?: boolean): this;
/**
* 追加子项
* @param child 子项
* @param index 下标
*/
appendChild<T extends INode>(child: T, index?: number): T;
/**
* 插入之前
* @param newChild 新子项
* @param refChild 要追加的点
*/
insertBefore<T extends INode>(newChild: T, refChild: INode | null): T;
/**
* 替换子项
* @param newChild 新子项
* @param oldChild 旧子项
*/
replaceChild<T extends INode>(newChild: INode, oldChild: T): T;
/**
* 移除子项
* @param child 子项
*/
removeChild<T extends INode>(child: T): T;
/**
* 删除以后可以附加到其原始父级的所有子级。
*/
removeChildren(): void;
/**
* 递归地销毁所有以后不能附加到其原始父级的子级。
*/
destroyChildren(): void;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
*/
matches(selector: string): boolean;
/**
* 按ID获取元素
* @param id
*/
getElementById<E extends IElement = IElement>(id: string): E | null;
/**
* 按名称获取元素
* @param name 元素名称
*/
getElementsByName<E extends IElement = IElement>(name: string): E[];
/**
* 按类名获取元素
* @param className 类名
*/
getElementsByClassName<E extends IElement = IElement>(className: string): E[];
/**
* 按标记名获取元素
* @param tagName 标记名
*/
getElementsByTagName<E extends IElement = IElement>(tagName: string): E[];
/**
* 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。
* @param selectors
*/
querySelector<E extends IElement = IElement>(selectors: string): E | null;
/**
* 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
* @param selectors
*/
querySelectorAll<E extends IElement = IElement>(selectors: string): E[];
/**
* 应该遍历元素及其父级（指向文档根）
* 直到找到与指定CSS选择器匹配的节点。
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
*/
closest<E extends IElement = IElement>(selectors: string): E | null;
/**
* 在场景组中搜索，但不应包括其本身
*/
find<E extends IElement = IElement>(filter: (node: E) => boolean): E | null;
/**
* 在场景组中搜索，查询所有
* @param filter 元素
*/
findAll<E extends IElement = IElement>(filter: (node: E) => boolean): E[];
/**
* 方法会在其父节点的子节点列表中插入一些 Node 或 DOMString 对象。插入位置为该节点之后
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/after
*/
after(...nodes: INode[]): void;
/**
* 方法可以在ChildNode 这个节点的父节点中插入一些列的 Node 或者 DOMString 对象，位置就是在ChildNode 节点的前面，DOMString 对象其实和 Text 节点一样的方式来完成插入的
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/before
*/
before(...nodes: INode[]): void;
/**
* 替换了该节点父节点下的子节点。
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceWith
*/
replaceWith(...nodes: INode[]): void;
/**
* 在 Element的最后一个子节点之后插入一组 Node 对象或 DOMString 对象
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/append
*/
append(...nodes: INode[]): void;
/**
* 方法可以在父节点的第一个子节点之前插入一系列Node对象或者DOMString对象
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/prepend
*/
prepend(...nodes: INode[]): void;
/**
* 方法将一个 Node 的后代替换为指定的后代集合。这些新的后代可以为 DOMString 或 Node 对象。
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceChildren
*/
replaceChildren(...nodes: INode[]): void;
/**
* 把对象从它所属的 DOM 树中删除。
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/remove
*/
remove(): this;
/**
* 是否已销毁
*/
destroyed: boolean;
/**
* 销毁
*/
destroy(): void;
/**
* 获取几何边界
*/
getGeometryBounds(): AABB;
/**
* 获取渲染边界
*/
getRenderBounds(): AABB;
/**
* 在坐标系中获得界限，考虑到子级
*/
getBounds(): AABB;
/**
* 获得本地空间的界限，考虑到子级
*/
getLocalBounds(): AABB;
/**
* 考虑客户端空间中的上下文边界，
* 但不考虑子项
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
*/
getBoundingClientRect(): Rectangle;
/**
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
*/
getClientRects(): Rectangle[];
/**
* 与“样式”兼容
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
*/
style: StyleProps & ICSSStyleDeclaration<StyleProps>;
computedStyle: any;
/**
* 渲染器将使用这些使用的值。
*/
parsedStyle: ParsedStyleProps;
/**
* 元素接口的方法返回一个 StylePropertyMapReadOnly 接口，该接口提供 CSS 声明块的只读表示形式，该声明块是 CSSStyleDeclaration 的替代项。
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap
* eg. circle.computedStyleMap().get('fill');
*/
computedStyleMap(): Map<string, unknown>;
/**
* 属性返回该元素所有属性节点的一个实时集合
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
*/
readonly attributes: StyleProps;
/**
* 返回一个Array，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
*/
getAttributeNames(): string[];
/**
* 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 ""
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
*/
getAttribute(name: keyof StyleProps): StyleProps[keyof StyleProps];
/**
* 返回一个布尔值，指示该元素是否包含有指定的属性
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute
*/
hasAttribute(qualifiedName: string): boolean;
/**
* 属性返回一个布尔值true或false,来表明当前元素节点是否有至少一个的属性
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes
*/
hasAttributes(): boolean;
/**
* 应使用removeAttribute（），而不是直接或使用setAttribute（）将属性值设置为null。如果将许多属性设置为null，它们的行为将不会像预期的那样。
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
*/
removeAttribute(attributeName: keyof StyleProps): void;
/**
* 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
*/
setAttribute<Key extends keyof StyleProps>(attributeName: Key, value: StyleProps[Key], force?: boolean): void;
/**
* 获取命名命名空间
*/
getAttributeNS(namespace: string, localName: string): string;
/**
* 获取属性节点
* @param qualifiedName
*/
getAttributeNode(qualifiedName: string): Attr;
/**
* 获取属性节点 NS
* @param namespace
* @param localName
*/
getAttributeNodeNS(namespace: string, localName: string): Attr;
/**
* 具有属性 NS
* @param namespace
* @param localName
*/
hasAttributeNS(namespace: string, localName: string): boolean;
/**
* 删除属性 NS
* @param namespace
* @param localName
*/
removeAttributeNS(namespace: string, localName: string): void;
/**
* 删除属性节点
* @param attr 属性
*/
removeAttributeNode(attr: Attr): Attr;
/**
* 设置属性 NS
* @param namespace
* @param qualifiedName
* @param value
*/
setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
/**
* 设置属性节点
* @param attr 属性
*/
setAttributeNode(attr: Attr): Attr;
/**
* 设置属性节点 NS
* @param attr
*/
setAttributeNodeNS(attr: Attr): Attr;
/**
* 切换属性
* @param qualifiedName
* @param force
*/
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
}
/**
* 显示对象
*/
export class DisplayObject<StyleProps extends BaseStyleProps = any, ParsedStyleProps extends ParsedBaseStyleProps = any> extends GElement<StyleProps, ParsedStyleProps> {
/**
* 在构造函数的参数中包含样式道具，例如fill、stroke。。。
*/
config: DisplayObjectConfig<StyleProps>;
/** 是自定义元素 */
isCustomElement: boolean;
/** 观察到突变 */
isMutationObserved: boolean;
/**
* 调用`animate（）后推到活动动画`
*/
private activeAnimations;
constructor(config: DisplayObjectConfig<StyleProps>);
/**
* 销毁
*/
destroy(): void;
/**
* 克隆节点
* @param deep
* @param customCloneFunc
*/
cloneNode(deep?: boolean, customCloneFunc?: (name: string, attribute: any) => any): this;
/**
* 初始化属性
* @private
*/
private initAttributes;
/**
* 设置属性
* @param name
* @param value
* @param force
*/
setAttribute<Key extends keyof StyleProps>(name: Key, value: StyleProps[Key], force?: boolean): void;
/**
* 属性更改或初始化时调用
*/
internalSetAttribute<Key extends keyof StyleProps>(name: Key, value: StyleProps[Key], parseOptions?: Partial<PropertyParseOptions>): void;
/**
* 返回与getBoundingClientRect（）不同的值，因为后者返回与视口相关的值
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
*
* FIXME: It is worth noting that getBBox responds to original untransformed values of a drawn object.
* @see https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox
*/
getBBox(): DOMRect;
/**
* 设置原点
* @param position
* @param y
* @param z
*/
setOrigin(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 获取原点
*/
getOrigin(): vec3;
/**
* 设置坐标系中的位置
*/
setPosition(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 在局部空间中设置位置
*/
setLocalPosition(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 在坐标系中转换
*/
translate(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 在自身坐标中转换
*/
translateLocal(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 获取位置
*/
getPosition(): vec3;
/**
* 获取本地位置
*/
getLocalPosition(): vec3;
/**
* compatible with G 3.0
*
* scaling in local space
* scale(10) = scale(10, 10, 10)
*
* 我们无法设定坐标系的尺度
*/
scale(scaling: vec3 | vec2 | number, y?: number, z?: number): this;
scaleLocal(scaling: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 设置自身坐标中的缩放
*/
setLocalScale(scaling: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 获取自身坐标中的缩放
*/
getLocalScale(): vec3;
/**
* 在坐标系中缩放
*/
getScale(): vec3;
/**
* 仅返回坐标系中Z轴的度数
*/
getEulerAngles(): number;
/**
* 仅返回自身坐标中Z轴的度数
*/
getLocalEulerAngles(): number;
/**
* 在坐标系中设置欧拉角（度）
*/
setEulerAngles(z: number): this;
/**
* 在自身坐标中设置欧拉角（度）
*/
setLocalEulerAngles(z: number): this;
/**
* 旋转本地
* @param x
* @param y
* @param z
*/
rotateLocal(x: number, y?: number, z?: number): this;
/**
* 旋转
* @param x
* @param y
* @param z
*/
rotate(x: number, y?: number, z?: number): this;
/**
* 设置旋转
* @param rotation
* @param y
* @param z
* @param w
*/
setRotation(rotation: quat | number, y?: number, z?: number, w?: number): this;
/**
* 设置局部旋转
* @param rotation
* @param y
* @param z
* @param w
*/
setLocalRotation(rotation: quat | number, y?: number, z?: number, w?: number): this;
/**
* 设置局部倾斜
* @param skew
* @param y
*/
setLocalSkew(skew: vec2 | number, y?: number): this;
/**
* 获取旋转
*/
getRotation(): quat;
/**
* 获取局部旋转
*/
getLocalRotation(): quat;
/**
* 获取局部倾斜
*/
getLocalSkew(): vec2;
/**
* 获取局部转换
*/
getLocalTransform(): mat4;
/**
* 获取世界变换
*/
getWorldTransform(): mat4;
/**
* 设置局部变换
* @param transform
*/
setLocalTransform(transform: mat4): this;
/**
* 重置局部变换
*/
resetLocalTransform(): void;
/**
* 返回影响此元素的所有动画对象的数组
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations
*/
getAnimations(): IAnimation[];
/**
* 使用WAAPI创建动画
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate
*/
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): IAnimation | null;
/**
* `visibility Used值的快捷方式`
*/
isVisible(): boolean;
/**
* 交互式的
*/
get interactive(): boolean;
set interactive(b: boolean);
/**
* 是交互式的
*/
isInteractive(): boolean;
/**
* 被剔除
*/
isCulled(): boolean;
/**
* 在当前组中领先
*/
toFront(): this;
/**
* 发送回当前组
*/
toBack(): this;
/**
* 与G 3.0兼容
* @alias object.config
*/
getConfig(): DisplayObjectConfig<StyleProps>;
/**
* @alias style
* @example
* circle.style.r = 10;
* const r = circle.style;
*/
attr(): StyleProps;
attr(name: Partial<StyleProps>): DisplayObject<StyleProps>;
attr<Key extends keyof StyleProps>(name: Key): StyleProps[Key];
attr<Key extends keyof StyleProps>(name: Key, value: StyleProps[Key]): DisplayObject<StyleProps>;
/**
* 返回坐标系中的3x3矩阵
*/
getMatrix(transformMat4?: mat4): mat3;
/**
* 在自身坐标中返回3x3矩阵
*/
getLocalMatrix(): mat3;
/**
* 在坐标系中设置3x3矩阵
*/
setMatrix(mat: mat3): void;
/**
* 在自身坐标中设置3x3矩阵
*/
setLocalMatrix(mat: mat3): void;
/**
* 显示 使用 `visibility: visible` 代替.
*/
show(): void;
/**
* 隐藏 使用 `visibility: hidden` 代替.
*/
hide(): void;
/**
* 获取计数 使用 `childElementCount` 代替.
*/
getCount(): number;
/**
* 获取父级 使用 `parentElement` 代替.
*/
getParent(): DisplayObject | null;
/**
* 获取子级 使用 `children` 代替.
*/
getChildren(): DisplayObject[];
/**
* 获取第一个子级 使用 `firstElementChild` 代替.
*/
getFirst(): DisplayObject | null;
/**
* 获取最后一个子级 使用 `lastElementChild` 代替.
*/
getLast(): DisplayObject | null;
/**
* 根据下标获取子级 使用`this.children[index]` 代替.
*/
getChildByIndex(index: number): DisplayObject | null;
/**
* 添加子节点 使用 `appendChild`.
*/
add<T extends IChildNode>(child: T, index?: number): T;
/**
* 设置并返回裁剪对象； 使用 `this.style.clipPath` 代替.
*/
setClip(clipPath: DisplayObject | null): void;
/**
* 获取裁剪对象；
* 使用 `this.style.clipPath` 代替.
*/
getClip: () => any;
/**
* 设置属性；
*/
set<StyleProps extends BaseStyleProps, Key extends keyof DisplayObjectConfig<StyleProps>>(name: Key, value: DisplayObjectConfig<StyleProps>[Key]): void;
/**
* 获取属性；
*/
get<StyleProps extends BaseStyleProps>(name: keyof DisplayObjectConfig<StyleProps>): any;
/**
* 移动元素到目标位置
* 使用 “setPosition” 代替。
*/
moveTo(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 移动元素到目标位置
* 使用 “setPosition” 代替。
*/
move(position: vec3 | vec2 | number, y?: number, z?: number): this;
/**
* 设置元素的 zIndex；
* 使用 this.style.zIndex 代替。
*/
setZIndex(zIndex: number): this;
}
/**
* 组件基础实现类
*/
export class GDisplayObject<StyleProps extends BaseStyleProps = any, ParsedStyleProps extends ParsedBaseStyleProps = any> extends DisplayObject<StyleProps, ParsedStyleProps> {
constructor({id, name}: { id: string, name: string });
}
/**
* Group 图形分组参数
*/
export interface GroupStyleProps extends BaseStyleProps {
x?: number | string;
y?: number | string;
width?: number | string;
height?: number | string;
}
/**
* Group 图形分组
*/
export class GGroup extends GDisplayObject {
constructor({style, ...rest}?: DisplayObjectConfig<GroupStyleProps>);
}
/**
* GRect 矩形属性
*/
export interface RectStyleProps extends BaseStyleProps {
/** 起始点 x 坐标 */
x?: number | string;
/** 起始点 y 坐标 */
y?: number | string;
/** 宽 */
width: number | string;
/** 高 */
height: number | string;
/**
* 圆角， 左上、右上、右下、左下
*/
radius?: number | string | number[];
}
/**
* GRect 矩形解析属性
*/
export interface ParsedRectStyleProps extends ParsedBaseStyleProps {
/** 起始点 x 坐标 */
x: number;
/** 起始点 y 坐标 */
y: number;
/** 宽 */
width: number;
/** 高 */
height: number;
/**
* 圆角， 左上、右上、右下、左下
*/
radius?: [number, number, number, number];
}
/**
* GRect 矩形
*/
export class GRect extends GDisplayObject<RectStyleProps, ParsedRectStyleProps> {
constructor({style, ...rest}?: DisplayObjectConfig<RectStyleProps>);
}
/**
* HTML 容器属性
*/
export interface HTMLStyleProps extends BaseStyleProps {
/** 起始点 x 坐标 */
x?: number | string;
/** 起始点 y 坐标 */
y?: number | string;
/** 内部 HTML */
innerHTML: string | HTMLElement;
/** 宽 */
width?: number | string;
/** 高 */
height?: number | string;
}
/**
* HTML 容器解析属性
*/
export interface ParsedHTMLStyleProps extends ParsedBaseStyleProps {
/** 起始点 x 坐标 */
x: CSSUnitValue;
/** 起始点 y 坐标 */
y: CSSUnitValue;
/** 当前元素 **/
$el: HTMLElement;
/** 内部 HTML */
innerHTML: string | HTMLElement;
/** 宽 */
width: CSSUnitValue;
/** 高 */
height: CSSUnitValue;
}
/**
* HTML 容器
* @see https://github.com/pmndrs/drei#html
*/
export class HTML extends DisplayObject<HTMLStyleProps, ParsedHTMLStyleProps> {
constructor({style, ...rest}?: DisplayObjectConfig<HTMLStyleProps>);
/**
* 返回包装器 HTMLElement
* * <div> in g-webgl/canvas
* * <foreignObject> in g-svg
*/
getDomElement(): HTMLElement;
/**
* 获取绑定客户端矩形
* 用$el.getBoundingClientRect重写
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
*/
getBoundingClientRect(): DOMRect;
/** 获取客户端矩形 */
getClientRects(): DOMRect[];
/** 获取边界 */
getBounds(): AABB;
/** 获取局部边界 */
getLocalBounds(): AABB;
}
/**
* 自定义元素属性
*/
export interface BaseCustomElementStyleProps extends BaseStyleProps {
/** 起始点 x 坐标 */
x?: number | string;
/** 起始点 y 坐标 */
y?: number | string;
}
/**
* 自定义元素解析属性
*/
export interface AbstractLineStyleProps extends BaseCustomElementStyleProps {
/** 起始点 x1 坐标 */
x1: number;
/** 起始点 y1 坐标 */
y1: number;
/** 起始点 x1 坐标 */
x2: number;
/** 起始点 y2 坐标 */
y2: number;
}
/**
* 自定义元素
*/
export abstract class CustomElement<CustomElementStyleProps> extends DisplayObject<CustomElementStyleProps & BaseCustomElementStyleProps> {
isCustomElement: boolean;
constructor({ style, ...rest }?: DisplayObjectConfig<CustomElementStyleProps>);
/**
* 在元素插入DOM树后激发
*/
connectedCallback?(): void;
/**
* 在从DOM树中删除元素之前激发
*/
disconnectedCallback?(): void;
attributeChangedCallback?<Key extends keyof CustomElementStyleProps>(name: Key, oldValue: CustomElementStyleProps[Key], newValue: CustomElementStyleProps[Key], oldParsedValue?: any, newParsedValue?: any): void;
}
/**
* AbstractPolyline 抽象折线析属性
*/
export interface AbstractPolylineStyleProps extends BaseCustomElementStyleProps {
points: [number, number][];
}
/**
* AbstractShape 抽象形状解析属性
*/
export interface AbstractShapeStyleProps extends BaseCustomElementStyleProps {
width: number | string;
height: number | string;
}
/**
* 圆形属性
*/
export interface CircleStyleProps extends BaseStyleProps {
/** 圆心的 x 坐标 */
cx?: number | string | null;
/** 圆心的 y 坐标 */
cy?: number | string | null;
/** 圆的半径 */
r: number | string | null;
}
/**
* 圆形解析属性
*/
export interface ParsedCircleStyleProps extends ParsedBaseStyleProps {
/** 圆心的 x 坐标 */
cx: number;
/** 圆心的 y 坐标 */
cy: number;
/** 圆的半径 */
r: number;
}
/**
* GCircle 圆形
*/
export class GCircle extends DisplayObject<CircleStyleProps, ParsedCircleStyleProps> {
constructor({ style, ...rest }?: DisplayObjectConfig<CircleStyleProps>);
}
/**
* GEllipse 椭圆属性
*/
export interface EllipseStyleProps extends BaseStyleProps {
/** 圆心的 x 坐标 */
cx?: number | string;
/** 圆心的 y 坐标 */
cy?: number | string;
/** 椭圆的水平半径 */
rx: number | string;
/** 椭圆的垂直半径 */
ry: number | string;
}
/**
* GEllipse 椭圆解析属性
*/
export interface ParsedEllipseStyleProps extends ParsedBaseStyleProps {
/** 圆心的 x 坐标 */
cx: number;
/** 圆心的 y 坐标 */
cy: number;
/** 椭圆的水平半径 */
rx: number;
/** 椭圆的垂直半径 */
ry: number;
}
/**
* GEllipse 椭圆
*/
export class GEllipse extends DisplayObject<EllipseStyleProps, ParsedEllipseStyleProps> {
constructor({ style, ...rest }?: DisplayObjectConfig<EllipseStyleProps>);
}
export interface ImageStyleProps extends BaseStyleProps {
/** 起始点 x 坐标 */
x?: number | string;
/** 起始点 y 坐标 */
y?: number | string;
/** 图片地址、图片对象或 canvas 对象 */
img?: string | HTMLImageElement;
/** 该属性为 img 的别名。 图片地址 图片对象 */
src?: string | HTMLImageElement;
/** 图片宽度 */
width?: number | string;
/** 图片高度 */
height?: number | string;
}
export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
/** 起始点 x 坐标 */
x: number;
/** 起始点 y 坐标 */
y: number;
/** 该属性为 img 的别名。 图片地址、图片对象或 canvas 对象 */
img?: string | HTMLImageElement;
/** 图片地址 图片对象*/
src?: string | HTMLImageElement;
/** 图片宽度 */
width?: number;
/** 图片高度 */
height?: number;
}
/**
* GImage 图片
*/
export class GImage extends DisplayObject<ImageStyleProps, ParsedImageStyleProps> {
constructor({ style, ...rest }?: DisplayObjectConfig<ImageStyleProps>);
}
// GLine --------------------------------------------------------------------------------
export interface LineStyleProps extends BaseStyleProps {
/**
* 起始点的 x 坐标
*/
x1: number;
/**
* 起始点的 y 坐标
*/
y1: number;
/**
* 结束点的 x 坐标
*/
x2: number;
/**
* 结束点的 y 坐标
*/
y2: number;
/**
* 局部坐标系下，第一个端点的 z 轴坐标。
*/
z1?: number;
/**
* 局部坐标系下，第二个端点的 z 轴坐标。
*/
z2?: number;
/** 3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像。默认值为 false */
isBillboard?: boolean;
/**
* 标记将位于x1/y1
*/
markerStart?: DisplayObject;
/**
* 标记将位于x2/y2
*/
markerEnd?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
}
export interface ParsedLineStyleProps extends ParsedBaseStyleProps {
/** 第一个端点的 x 轴坐标。 */
x1: number;
/** 第一个端点的 y 轴坐标。 */
y1: number;
/** 第二个端点的 x 轴坐标。 */
x2: number;
/** 第二个端点的 y 轴坐标。 */
y2: number;
/** 第一个端点的 z 轴坐标。 */
z1?: number;
/** 第二个端点的 z 轴坐标。 */
z2?: number;
/** */
defX: number;
/** */
defY: number;
/** 3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像。默认值为 false */
isBillboard?: boolean;
/**
* 标记将位于x1/y1
*/
markerStart?: DisplayObject;
/**
* 标记将位于x2/y2
*/
markerEnd?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
}
/**
* 创建一条连接两点的线。
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
* Line 直线
* 还支持使用标记。
*/
export class GLine extends DisplayObject<LineStyleProps, ParsedLineStyleProps> {
private markerStartAngle;
private markerEndAngle;
constructor({ style, ...rest }?: DisplayObjectConfig<LineStyleProps>);
attributeChangedCallback<Key extends keyof LineStyleProps>(attrName: Key, oldValue: LineStyleProps[Key], newValue: LineStyleProps[Key], prevParsedValue: ParsedLineStyleProps[Key], newParsedValue: ParsedLineStyleProps[Key]): void;
private transformMarker;
/**
* 根据长度比例（取值范围 [0-1]）获取直线上局部或世界坐标系下的点坐标。
* @param ratio 必填，长度比例
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
*/
getPoint(ratio: number, inWorldSpace?: boolean): Point;
/**
* 沿路径返回给定距离的点，
* @param distance 必填，距离值
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
*/
getPointAtLength(distance: number, inWorldSpace?: boolean): Point;
/**
* 获取直线长度。
*/
getTotalLength(): number;
}
/**
* Path 路径属性
*/
export interface PathStyleProps extends BaseStyleProps {
/**
* 路径，支持 字符串和 数组 两种形式，
*/
path?: string | PathArray;
/**
* path 属性的别名
*/
d?: string | PathArray;
/**
* 标记将位于第一个点
*/
markerStart?: DisplayObject;
/**
* 标记将位于最后一点
*/
markerEnd?: DisplayObject;
markerMid?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
}
export interface PathSegmentBBox {
/** x轴 */
x: number;
/** y轴 */
y: number;
/** 宽 */
width: number;
/** 高 */
height: number;
}
export interface PathSegment {
command: 'M' | 'L' | 'V' | 'H' | 'C' | 'S' | 'Q' | 'T' | 'A' | 'Z';
currentPoint: [number, number];
prePoint: [number, number];
nextPoint: [number, number];
startTangent: [number, number];
endTangent: [number, number];
params: AbsoluteSegment;
arcParams: PathArcParams;
/**
* 用于命中测试。
*/
box: PathSegmentBBox;
/**
* 将A转换为C。
*/
cubicParams: [number, number, number, number, number, number];
}
export interface PathArcParams {
cx: number;
cy: number;
rx: number;
ry: number;
startAngle: number;
endAngle: number;
xRotation: number;
arcFlag: number;
sweepFlag: number;
}
/**
* Path 路径解析属性
*/
export interface ParsedPathStyleProps extends ParsedBaseStyleProps {
/** 路径 */
path: {
absolutePath: AbsoluteArray;
hasArc: boolean;
segments: PathSegment[];
polygons: [number, number][][];
polylines: [number, number][][];
curve: CurveArray;
totalLength: number;
rect: Rectangle;
};
/** path 属性的别名 */
d?: {
absolutePath: AbsoluteArray;
hasArc: boolean;
segments: PathSegment[];
polygons: [number, number][][];
polylines: [number, number][][];
curve: CurveArray;
totalLength: number;
rect: Rectangle;
};
/** 起始点 */
markerStart?: DisplayObject;
markerMid?: DisplayObject;
/** 终止点 */
markerEnd?: DisplayObject;
/**
* marker 会沿路径中第一段的切线方向移动，同时主体路径也会进行相应延长或缩短。需要注意的是主体路径的伸缩距离也是有限的，当超过了第一段的长度，会产生“拐弯”的效果
*/
markerStartOffset?: number;
/**
* marker 会沿路径中最后一段的切线方向移动，同时主体路径也会进行相应延长或缩短。
*/
markerEndOffset?: number;
}
/**
* Path 路径
*/
export class GPath extends DisplayObject<PathStyleProps, ParsedPathStyleProps> {
private markerStartAngle;
private markerEndAngle;
/**
* 标记放在中间
*/
private markerMidList;
constructor({ style, ...rest }?: DisplayObjectConfig<PathStyleProps>);
attributeChangedCallback<Key extends keyof PathStyleProps>(attrName: Key, oldValue: PathStyleProps[Key], newValue: PathStyleProps[Key], prevParsedValue: ParsedPathStyleProps[Key], newParsedValue: ParsedPathStyleProps[Key]): void;
private transformMarker;
private placeMarkerMid;
/**
* 返回路径的总长度。
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
*/
getTotalLength(): number;
/**
* 返回路径上给定距离处的点。
* @param distance 必填，从起点出发的距离值
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
* @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
*/
getPointAtLength(distance: number, inWorldSpace?: boolean): Point;
/**
* 根据长度比例（取值范围 [0-1]）获取局部或世界坐标系下点的坐标。
* @param ratio 必填，长度比例
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
*/
getPoint(ratio: number, inWorldSpace?: boolean): Point;
/**
* 获取起始切线向量
*/
getStartTangent(): number[][];
/**
* 获取结束切线向量
*/
getEndTangent(): number[][];
}
/**
* Polygon 多边形属性
*/
export interface PolygonStyleProps extends BaseStyleProps {
/**
* [number, number][] 点数组
* string 点之间使用空格分隔，形如：'100,10 250,150 200,110'
*/
points: [number, number][];
/**
* 标记将位于第一个点
*/
markerStart?: DisplayObject;
/**
* 标记将位于最后一点
*/
markerEnd?: DisplayObject;
/**
* 在折线除了 “起始点” 和 “终止点” 之外的每一个顶点上放置标记图形。
*/
markerMid?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
/**
* 是否关闭
*/
isClosed?: boolean;
}
/**
* Polygon 多边形解析属性
*/
export interface ParsedPolygonStyleProps extends ParsedBaseStyleProps {
/**
* [number, number][] 点数组
* string 点之间使用空格分隔，形如：'100,10 250,150 200,110'
*/
points: {
points: [number, number][];
segments: [number, number][];
totalLength: number;
};
/**
* 标记将位于第一个点
*/
markerStart?: DisplayObject;
/**
* 在折线除了 “起始点” 和 “终止点” 之外的每一个顶点上放置标记图形。
*/
markerMid?: DisplayObject;
/**
* 标记将位于最后一点
*/
markerEnd?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
/**
* 是否关闭
*/
isClosed?: boolean;
}
/**
* Polygon 多边形
*/
export class GPolygon extends DisplayObject<PolygonStyleProps, ParsedPolygonStyleProps> {
private markerStartAngle;
private markerEndAngle;
/**
* 标记放在中间
*/
private markerMidList;
constructor({ style, ...rest }?: DisplayObjectConfig<PolygonStyleProps>);
attributeChangedCallback<Key extends keyof PolygonStyleProps>(attrName: Key, oldValue: PolygonStyleProps[Key], newValue: PolygonStyleProps[Key], prevParsedValue: ParsedPolygonStyleProps[Key], newParsedValue: ParsedPolygonStyleProps[Key]): void;
private transformMarker;
private placeMarkerMid;
}
/**
* 折线属性
*/
export interface PolylineStyleProps extends BaseStyleProps {
/**
* [number, number][] 点数组
* string 点之间使用空格分隔，形如：'100,10 250,150 200,110'
*/
points: [number, number][];
/**
* 标记将位于第一个点
*/
markerStart?: DisplayObject;
/**
* 标记将位于最后一点
*/
markerEnd?: DisplayObject;
/**
* 在折线除了 “起始点” 和 “终止点” 之外的每一个顶点上放置标记图形。
*/
markerMid?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
}
/**
* Polyline 折线解析属性
*/
export interface ParsedPolylineStyleProps extends ParsedBaseStyleProps {
/**
* [number, number][] 点数组
* string 点之间使用空格分隔，形如：'100,10 250,150 200,110'
*/
points: {
points: [number, number][];
segments: [number, number][];
totalLength: number;
};
/**
* 标记将位于第一个点
*/
markerStart?: DisplayObject;
/**
* 在折线除了 “起始点” 和 “终止点” 之外的每一个顶点上放置标记图形。
*/
markerMid?: DisplayObject;
/**
* 标记将位于最后一点
*/
markerEnd?: DisplayObject;
/**
* 相对于原始位置的偏移
*/
markerStartOffset?: number;
/**
* 相对于原始位置的偏移
*/
markerEndOffset?: number;
}
/**
* Polyline 折线
*/
export class Polyline extends GPolygon {
constructor({ style, ...rest }?: DisplayObjectConfig<PolylineStyleProps>);
/**
* 获取折线长度。
*/
getTotalLength(): number;
/**
* 沿路径返回给定距离的点。
* @param distance 必填，从起点出发的距离值
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
*/
getPointAtLength(distance: number, inWorldSpace?: boolean): Point;
/**
* 根据长度比例（取值范围 [0-1]）获取点。
* @param ratio 必填，长度比例
* @param inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false
*/
getPoint(ratio: number, inWorldSpace?: boolean): Point;
/**
* 获取起点的切向量。
*/
getStartTangent(): number[][];
/**
* 获取终点的切向量
*/
getEndTangent(): number[][];
}
// GText -------------------------------------------------------------------------------------
export type ColorType = string | null;
/**
* 文本解析属性
*/
export interface TextShapeStyleProps extends AbstractShapeStyleProps {
/**
* 必填项，文本内容，可以包含换行符，例如 "测试文本\n另起一行"
*/
text: string;
/**
* 在多行文本中，每一行可以在水平方向以锚点（anchor）对齐。
*/
textAlign?: CSSGlobalKeywords | 'center' | 'left' | 'right' | 'start' | 'end';
textVAlign?: CSSGlobalKeywords | 'center' | 'top' | 'bottom';
/**
* 字体样式
*/
fontStyle?: CSSGlobalKeywords | 'normal' | 'italic' | 'oblique';
/**
* 字体大小
*/
fontSize?: number | string;
/**
* 字体类型
*/
fontFamily?: string;
/**
* 字体粗细
*/
fontWeight?: CSSGlobalKeywords | 'normal' | 'bold' | 'bolder' | 'lighter' | number;
/**
* 行高
*/
lineHeight?: number | string;
/**
* 字符间距。
*/
letterSpacing?: number | string;
/**
* 文本描边
*/
textStroke?: ColorType | Pattern;
/** 文本描边透明度 */
textStrokeOpacity?: number | string;
/** 文本填充 */
textFill?: ColorType | Pattern;
/** 文本填充透明度 */
textFillOpacity?: number | string;
/** 文本行宽 */
textLineWidth?: string | number;
/** 文本行帽 */
textLineCap?: CanvasLineCap;
/** 文本行连接 */
textLineJoin?: CanvasLineJoin;
/** 文本行短划线 */
textLineDash?: number | string | (string | number)[];
/** 文本阴影类型 */
textShadowType?: 'inner' | 'outer' | 'both';
/** 文本阴影模糊 */
textShadowBlur?: number;
/** 文本阴影颜色 */
textShadowColor?: ColorType;
/** 文本阴影偏移X */
textShadowOffsetX?: number;
/** 文本阴影偏移 Y */
textShadowOffsetY?: number;
}
