图像 Image

图像 Image 是图形对象的一种，用于创建一个图像的图形实例，包含图像的位置、大小及图像纹理信息，用于渲染引擎进行绘制及交互操作。

示例

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

const image = new Image({
    left: 300,
    top: 100,
    width: 164,
    height: 51,
    url: 'https://url/to/img.svg',
});

Image 配置项

字段	类型	描述
left	number	图像左侧坐标
top	number	图像顶部坐标
width	number	图像宽度
height	number	图像高度
url	string | object	图像源路径

注：关于 left, top, width, height 配置可参考Rect

通用配置项

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

字段	类型	描述
opacity	number	透明度
fillStyle	string	填充色
strokeStyle	string	描边颜色
lineWidth	number	描边宽度
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	'image'	形状类型
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	触发指定的事件