矩形（Rect）

矩形是 vkedit 中最基础的图形元素，支持填充色和描边。常用于创建边框、背景色块、容器。

安装

import { RectPlugin } from 'vkedit'

host.installPlugin('rect-plugin', RectPlugin)

安装后，工具栏会显示矩形按钮。点击按钮后在画布上拖拽即可创建矩形。

通过代码创建

import { AddElementCommand } from 'vkedit'

const elementManager = host.getPlugin('element-manager-plugin')
const rect = elementManager.createElement('rect')

// 设置位置和尺寸（毫米）
rect.xmm = 10
rect.ymm = 10
rect.wmm = 50
rect.hmm = 30

// 设置样式
rect.fill = '#6366f1'
rect.stroke = '#4338ca'
rect.strokeWidthMM = 0.2

host.executeCommand(new AddElementCommand(host, rect))

属性

基础属性（继承自 BaseGraphicElement）

属性	类型	默认值	说明
xmm	number	5	X 坐标（毫米）
ymm	number	5	Y 坐标（毫米）
wmm	number	30	宽度（毫米）
hmm	number	30	高度（毫米）
rotation	number	0	旋转角度（度）
scaleX	number	1	水平缩放
scaleY	number	1	垂直缩放
visible	boolean	true	是否可见
locked	boolean	false	是否锁定
draggable	boolean	true	是否可拖拽

毫米与像素

xmm/ymm/wmm/hmm 以毫米为单位。对应的像素属性 x/y/width/height 是计算属性（= 毫米 × DPM），设置时会自动反算毫米值，但建议直接使用毫米属性。

矩形特有属性

属性	类型	默认值	说明
fill	string	''	填充颜色
stroke	string	'black'	描边颜色
strokeWidthMM	number	0.2	描边宽度（毫米）

下一步

• 文本元素 -- 在矩形上叠加文字
• 线条元素 -- 绘制分隔线
• 元素创建 -- 了解元素创建的完整流程