矩形 Rect

矩形 Rect 是图形对象的一种，用于创建一个矩形的图形实例，包含矩形的位置、大小、圆角半径等信息，用于渲染引擎进行绘制及交互操作。

示例

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

const rect = new Rect({
    left: 80,
    top: 20,
    width: 50,
    height: 80,
    strokeStyle: 'blue',
    fillStyle: '#ccc',
    radius: [0, 10],
});

Rect 配置项

字段	类型	描述
left	number	矩形左侧坐标
top	number	矩形顶部坐标
width	number	矩形宽度
height	number	矩形高度
radius	number | number[]	矩形圆角

注：矩形圆角，若指定为某数字r，则矩形四个角的圆角半径均为r；若指定为长度为4的数组[r0, r1, r2, r3]，则依次指定了矩形左上、右上、右下、左下的圆角半径；若指定为长度为2的数组[r0, r1]，则指定矩形左上、右上、右下、左下的圆角半径分别为 r0, r1, r1, r0。

通用配置项

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

字段	类型	描述
opacity	number	透明度
fillStyle	string	填充色
strokeStyle	string	描边颜色
lineWidth	number	描边宽度
lineDash	number | number[]	划线模式，可参考CanvasRenderingContext2D.setLineDash()
lineDashOffset	number | number[]	虚线起始偏移，可参考CanvasRenderingContext2D.lineDashOffset
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	'rect'	形状类型
capture	boolean	是否被焦点捕获
animating	boolean	是否是动画
destroyed	boolean	是否被摧毁
parent	any	父形状节点

实例方法

实例方法	返回值	描述
getBBox()	BBox	获取包围盒位置与大小
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	触发指定的事件