编辑器配置
基础 事件 样式 按钮组 光标 选择 控制 启用 内部编辑器
光标样式配置,应用运行中可实时修改 app.editor.config 生效。
同时元素拥有 独立的编辑配置 属性,可实时覆盖主配置。
关键属性
moveCursor: ICursorType
设置移动光标。
resizeCursor: IImageCursor
设置 resize 光标,支持传入变量旋转角度。
ts
{
url: `
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate({{rotation}},12,12)">
<path
fill-rule="evenodd"
d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z"
fill="black"
/>
</g>
</svg>` // svg字符串, {{rotation}}为旋转变量
x: 12 // x轴旋转中心点
y: 12 // y轴旋转中心点
}
rotateCursor: IImageCursor
设置 rotate 光标,支持传入变量旋转角度。
ts
{
url: `
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">
<path
fill-rule="evenodd"
d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z"
fill="black"
/>
</g>
</svg>` // svg字符串, {{rotation}}为旋转变量
x: 12 // x轴旋转中心点
y: 12 // y轴旋转中心点
}
skewCursor: IImageCursor
设置 skew 光标,支持传入变量旋转角度。
ts
{
url: `
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">
<path
fill-rule="evenodd"
d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z"
fill="black"
/>
</g>
</svg>` // svg字符串,{{rotation}}为旋转变量
x: 12 // x轴旋转中心点
y: 12 // y轴旋转中心点
}