文字 Text

文字 Text 是图形对象的一种，用于创建一个文字的图形实例，包含文字的内容、位置、大小、字体等信息，用于渲染引擎进行绘制及交互操作。

示例

import { Text } from '@visactor/vgraph';

const text = new Text({
    x: 50,
    y: 100,
    fontSize: 14,
    text: '很长很长\n很长很长很长很长很长很长很长很长',
    width: 50,
    height: 100,
    lineHeight: 16,
    textOverflow: 'clip',
    textBaseline: 'top',
});

Text 配置项

字段	类型	描述
text	string	文字内容
x	number	文字 x 坐标
y	number	文字 y 坐标
width	number	文字最大宽度
height	string | object	文字最大高度
textOverflow	'clip' | 'ellipsis'	文字溢出，当文字内容超出 width 或 height 指定的宽高时发生溢出。clip表示裁剪溢出的文字，ellipsis表示用...表示溢出的文字。默认值为clip。可参考CSS text-overflow
textAlign	'start' | 'center' | 'end' | 'left' | 'right'	文本横向对齐方式，若设置为start或left，则此时的 x 表示文本左侧坐标；若设置为center，则 x 表示文本中心 x 坐标；若设置为end或right，则 x 表示文本右侧坐标。默认值为start。可参考CSS text-align
textBaseline	'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'	文本垂直向对齐方式，默认值为top, 若设置为top或hanging，则此时的 y 表示文本顶部坐标；若设置为middle，则 y 表示文本中心 y 坐标；若设置为alphabetic，ideographic 或 bottom，则 y 表示文本底部坐标
fontSize	number	字体大小，默认值为 12 .
lineHeight	number	行高
fontStyle	'normal' | 'italic' | 'oblique'	字体样式，可参考CSS font-style
fontVariant	'normal' | 'small-caps'	字体变体，可参考CSS font-vatiant
fontWeight	'normal' | 'bold' | 'bolder' | 'lighter' | number	字体的粗细程度，可参考CSS font-weight
fontFamily	string	字体家族，可参考CSS font-family

通用配置项

以下为所有图形对象的公共配置项：

字段	类型	描述
opacity	number	透明度
fillStyle	string	填充色
strokeStyle	string	描边颜色
lineWidth	number	描边宽度
lineDash	number | number[]	划线模式，可参考CanvasRenderingContext2D.setLineDash()
shadowBlur	number	阴影模糊量，可参考CanvasRenderingContext2D.shadowBlur
shadowColor	string	阴影色
shadowOffsetX	number	阴影水平偏移量，可参考CanvasRenderingContext2D.shadowOffsetX
shadowOffsetY	number	阴影垂直偏移量，可参考CanvasRenderingContext2D.shadowOffsetY
clip	ShapeBase	裁剪形状，将指定形状设置为裁剪路径，位于该裁剪形状路径范围内的部分将会保留，其余部分会被剔除，可参考CanvasRenderingContext2D.clip()
cursor	string	当该形状获得光标焦点时，光标的类型。详情参考CSS Cursor

注：颜色字符串目前可支持以下格式：

类型	样例	描述
rgb	rgb(255, 255, 255)	用 RGB 模式表示的白色
rgba	rgba(255, 255, 255, 1.0)	用 RGBA 模式表示的白色
hsl	hsl(13, 100%, 10%)	用 HSL 模式表示的颜色，等价于rgb(56, 12, 0)
hsla	hsla(13, 100%, 10%, 0.4)	用 HSL 模式表示的颜色，等价于rgba(56, 12, 0, 0.4)
hex	#fff	用三位十六进制数表示的纯色，可忽略大小写
hex	#FF00FF	用六位十六进制数表示的纯色，可忽略大小写
hex	#3037ffff	用八位十六进制数表示的带透明度的颜色，可忽略大小写
name	cyan	用颜色名表示的颜色
linear gradient	l(0) 0:#fff 0.5:#7ec2f3 1:#1890ff	线性渐变，表达式为l(deg) step1:color1 step2:color2 ...，表示线性倾斜角度为 deg ，插值分别在 step1, step2...处插值颜色为 color1, color2... 的线性渐变
radial gradient	r(0.5,0.5,0) 0:#fff 0.5:#7ec2f3 1:#1890ff	径向渐变，表达式为r(cx, cy, r0) r1:color1 r2:color2 ...，表示在包围盒内相对坐标为 (cx, cy) 处为圆心，起始半径 r0，半径分别为 r1, r2...处插值颜色为 color1, color2... 的径向渐变
picture	p(a)./pattern.png	图片，表达式为p(repeat)url，当 repeat 值为 a 时表示背景重复方式为 repeat ；为 x 时表示 repeat-x ；为 y 时表示 repeat-y ；为 n 时表示 no-repeat。参数 url 表示图像路径。可参考CSS background-repeat

可访问属性

属性	类型	描述
type	'text'	形状类型
capture	boolean	是否被焦点捕获
animating	boolean	是否是动画
destroyed	boolean	是否被摧毁
parent	any	父形状节点

实例方法

实例方法	返回值	描述
getBBox()	BBox	获取包围盒位置与大小
isOverflow()	boolean	文本是否溢出，只有文本设置了 宽度的情况下可能会溢出。
translate(x: number, y: number)	void	平移
scale(xRatio: number, yRatio?: number)	void	缩放
rotate(deg: number, radian: boolean)	void	中心旋转， radian 用于指定参数 deg 是否为弧度制，是则为 true ， 否则为 false ，默认值为 false
rawRotate(deg: number, radian: boolean)	void	根据 matrix 原点旋转，定义与 rotate 相同
clone()	IShape	获取一个形状的副本
show()	void	显示形状
hide()	void	隐藏形状
get(k: string)	any	获取该形状名为 k 的属性
set(k: string, v: any)	IShape	将该形状名为 k 的属性值设置为 v
set(data: Record<string, any>)	IShape	传入一个对象，批量设置属性
on(eventName: string, callback: () => void)	void	设置一个事件发生时的触发器
off(eventName: string, callback: () => void)	void	设置一个事件停止时的触发器
emit(eventName: string, data: Record<string, any>)	void	触发指定的事件