编辑器配置
关键属性
editSize: 'auto' | 'size' | 'scale'
调整尺寸大小的方式，默认为 auto。
auto： 根据元素的 editSize 属性自动选择 size 或 scale。
size： 修改元素的 宽高、路径 达到调整大小的目的。
scale： 修改元素的 缩放属性 达到调整大小的目的。
事件
keyEvent: boolean
是否接收键盘事件（如方向键移动），默认为 true。
快速修改样式
stroke: string
设置控制点和编辑框的描边颜色，默认为 #836DFF。
strokeWidth: number
设置控制点和编辑框的描边大小。
pointSize: number
设置控制点的大小。
pointRadius: number
设置控制点的圆角半径
精确控制样式
point: IBoxInputData ｜ IBoxInputData[]
设置控制点样式，可单独设置 4 个点。
middlePoint: IBoxInputData｜ IBoxInputData[]
设置中间控制点样式（会继承基础样式），可单独设置 4 个点，为空时不显示， 默认为空。
rotatePoint: IBoxInputData
设置独立旋转控制点样式（会继承基础样式）， 为空时不显示， 默认为空。
rect: IBoxInputData
设置编辑框的样式（会继承基础样式）。
area: IRectInputData
框选区域的样式（会继承基础样式）。
按钮组
buttonsDirection: 'top' | 'right' | 'bottom' | 'left'
按钮组的方位， 默认为 bottom。
buttonsFixed: boolean
按钮组是否仍保持固定方向（不受元素旋转影响）。
buttonsMargin: number,
按钮组到编辑框的外边距， 默认为 12。
隐藏
hideOnMove: boolean
是否在移动元素时隐藏编辑框， 默认为否。
hideOnSmall: boolean | number
是否在元素很小的时候隐藏编辑器控制点，默认为 true。
可以设置一个最小的 size, 默认最小的 size 为 10 (表示 10 x 10 的大小)。
光标
moveCursor： ICursorType
设置移动光标。
resizeCursor: IImageCursor
设置 resize 光标，支持传入变量旋转角度。
{
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 光标，支持传入变量旋转角度。
{
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 光标，支持传入变量旋转角度。
{
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轴旋转中心点
}限制
around: Around
指定中心点旋转、缩放大小， 默认为无。
设置 'center' 表示正中心点 {x:0.5, y: 0.5}, 设置 {x:1, y:1} 表示右下角，相对编辑框宽高比例。
lockRatio: boolean | 'corner'
固定比例, 默认为 false。
设置 'corner' 表示只固定 4 个角的缩放比例，中间点可自由调整。
rotateGap: number
旋转吸附间隔，当靠近间隔点时，慢慢旋转会被吸附到间隔点上，默认为每 45 度。
选择器
selector: boolean
是否启用编辑选择器， 默认启用。
可以通过交互来选取 editable 元素， 并支持显示 hover 状态。
hover: boolean
是否显示 hover 状态，默认显示。
hoverStyle: IPathInputData
hover 样式，目前只能定义笔触和填充样式（会继承基础样式）。
select: 'press' | 'tap'
点选的触发方式，默认为 press。
press 为鼠标按下触发， tap 为单击触发。
boxSelect: boolean
是否启用框选功能， 默认启用。
continuousSelect: boolean
单击是否可以连续多选元素，一般用于手机端多选元素，默认关闭。
启用
moveable: boolean
是否启用移动， 默认启用。
resizeable: boolean
是否启用编辑大小， 默认启用。
rotateable: boolean
是否启用旋转， 默认启用。
skewable: boolean
是否启用倾斜， 默认启用。
示例
显示所有控制点
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: {
rotatePoint: {},
middlePoint: {},
buttonsDirection: 'top'
}
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect快速修改样式
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: { stroke: '#0d99ff', pointSize: 8, pointRadius: 0 }
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect自定义样式
默认会继承基础样式， 只需覆盖新的样式。
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: {
point: { cornerRadius: 0 },
middlePoint: {},
rotatePoint: { width: 16, height: 16 },
rect: { dashPattern: [3, 2] }
}
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect按中心点缩放
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: { around: 'center' }
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect固定比例缩放
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: { lockRatio: true }
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect禁用旋转
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: { rotateable: false }
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect禁用缩放
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({
view: window,
editor: { resizeable: false }
})
const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.target = rect