编辑器配置
基础 事件 样式 按钮组 光标 选择 控制 启用 内部编辑器
样式配置，应用运行中可实时修改 app.editor.config 生效。
同时元素拥有 独立的编辑配置 属性，可实时覆盖主配置。
关键属性
stroke: string
设置控制点和编辑框的描边颜色，默认为 #836DFF。
strokeWidth: number
设置控制点和编辑框的描边大小。
pointSize: number
设置控制点的大小。
pointRadius: number
设置控制点的圆角半径
精确控制样式
point: IBoxInputData ｜ IBoxInputData[]
设置控制点样式，可单独设置 4 个点。
并支持通过设置 pointType 来自定义控制点功能类型。
ts
point: { pointType: 'resize' }, // 默认 resize 按钮ts
point: [
{
// 支持 Box 元素的所有属性
pointType: 'button', // 变为自定义按钮
event: {
tap: function () {
alert('button')
},
},
fill: {
// 使用图片
type: 'image',
url: '/image/leafer.jpg',
},
},
{ pointType: 'rotate' }, // 变为旋转按钮
{ pointType: 'resize-rotate' }, // 变为 resize + 旋转按钮
{ pointType: 'skew' }, // 变为倾斜按钮
]middlePoint: IBoxInputData｜ IBoxInputData[]
设置中间控制点样式（会继承基础样式），可单独设置 4 个点，为空时不显示， 默认为空。
并支持通过设置 pointType 来自定义控制点功能类型。
rect: IBoxInputData
设置编辑框的样式（会继承基础样式）。
area: IRectInputData
框选区域的样式（会继承基础样式）。
旋转按钮
circle: IBoxInputData
设置独立旋转控制点样式（会继承基础样式）， 为空时不显示， 默认为空。
并支持通过设置 pointType 来自定义控制点功能类型。
ts
circle: {
pointType: 'button',
cursor: 'pointer',
event: {
tap: function () {
alert('button')
},
},
}, // 变为自定义按钮circleDirection: 'top' | 'right' | 'bottom' | 'left'
独立旋转控制点的方位， 默认为 bottom（如果 buttonsDirection 为 bottom ，则为 top）。
circleMargin: number,
独立旋转控制点到编辑框的外边距， 默认采用 buttonsMargin。
光标移入
hover: boolean
是否显示 hover 状态，默认显示。
hoverStyle: IPathInputData
hover 样式，目前只能定义笔触和填充样式（会继承基础样式）。
selectedStyle: IPathInputData
选中元素的样式（区分 hover 样式，多选元素时比较容易看出来），目前只能定义笔触和填充样式（会继承基础样式）。
遮罩
mask: string | boolean
设置遮罩的颜色值（适用于裁剪图片场景），true 表示颜色值 rgba(0,0,0,0.8)，默认为无。
示例
显示所有控制点
ts
// #图形编辑器 [显示所有控制点]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
circle: {},
middlePoint: {},
buttonsDirection: 'top'
}
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)快速修改样式
ts
// #图形编辑器 [快速修改样式]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: { stroke: '#0d99ff', pointSize: 8, pointRadius: 0 }
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)自定义样式
默认会继承基础样式， 只需覆盖新的样式。
ts
// #图形编辑器 [自定义样式]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
point: { cornerRadius: 0 },
middlePoint: {},
circle: { width: 16, height: 16 },
rect: { dashPattern: [3, 2] }
}
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)显示底部旋转控制点
默认会继承基础样式， 只需覆盖新的样式。
ts
// #图形编辑器 [显示旋转控制点]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: { circle: {} }
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)自定义控制点功能类型
ts
// #图形编辑器 [自定义 point 控制点功能类型]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
pointSize: 24,
point: [
{ pointType: 'resize' }, // 默认 resize 按钮
{
// 支持 Box 元素的所有属性
pointType: 'button', // 变为自定义按钮
event: {
tap: function () {
alert('button')
},
},
fill: {
// 使用图片
type: 'image',
url: '/image/leafer.jpg',
},
},
{ pointType: 'rotate' }, // 变为旋转按钮
{ pointType: 'resize-rotate' }, // 变为 resize + 旋转按钮
]
}
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)ts
// #图形编辑器 [自定义 middlePoint 控制点功能类型]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
pointSize: 24,
point: { width: 12, height: 12 },
middlePoint: [
{ pointType: 'resize' }, // 默认 resize 按钮
{
// 支持 Box 元素的所有属性
pointType: 'button', // 变为自定义按钮
event: {
tap: function () {
alert('button')
},
},
fill: {
// 使用图片
type: 'image',
url: '/image/leafer.jpg',
},
},
{ pointType: 'rotate' }, // 变为旋转按钮
{ pointType: 'resize-rotate' }, // 变为 resize + 旋转按钮
]
}
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)ts
// #图形编辑器 [自定义 circle 控制点功能类型]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
circle:
{
// 支持 Box 元素的所有属性
pointType: 'button', // 变为自定义按钮
width: 24,
height: 24,
event: {
tap: function () {
alert('button')
},
},
fill: {
// 使用图片
type: 'image',
url: '/image/leafer.jpg',
},
}
}
})
const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)
app.editor.select(rect)拖拽控制点修改字体大小，拖拽边框控制文本宽高
ts
// #图形编辑器 [拖拽控制点修改字体大小，拖拽边框控制文本宽高]
import { App, Text } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/text-editor' // 导入文本编辑插件 (可选)
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
editSize: 'size', // 默认修改元素宽高
point: {
editConfig: { editSize: 'font-size' } // 拖拽控制点修改字体大小
}
}
})
const text = Text.one({
text: 'Action is the proper fruit of knowledge.',
editable: true, fill: '#FFE04B', fontSize: 16,
}, 100, 100, 100)
app.tree.add(text)
app.editor.select(text)