Editor Configuration
Basic Events Styles Button Groups Cursor Selection Control Enable Internal Editor
Style configuration. It can be modified in real time during application runtime via app.editor.config.
At the same time, elements have an independent editor configuration property, which can override the main configuration in real time.
Key Properties
spread: number
The outward expansion value of the editor frame. It increases the spacing between the edit box and the actual element. Default is 0.
stroke: string
Sets the stroke color of control points and the edit box. Default is #836DFF.
strokeWidth: number
Sets the stroke width of control points and the edit box.
pointSize: number
Sets the size of control points.
pointRadius: number
Sets the corner radius of control points.
Precise Control Style
point: IBoxInputData ｜ IBoxInputData[]
Defines the style of control points. You can set all 4 points individually.
It also supports defining control point functionality types via pointType.
point: { pointType: 'resize' }, // default resize buttonpoint: [
{
// supports all Box element properties
pointType: 'button', // becomes a custom button
event: {
tap: function () {
alert('button')
},
},
fill: {
// use image
type: 'image',
url: '/image/leafer.jpg',
},
},
{ pointType: 'rotate' }, // becomes rotate button
{ pointType: 'resize-rotate' }, // resize + rotate button
{ pointType: 'skew' }, // skew button
]middlePoint: IBoxInputData｜ IBoxInputData[]
Defines the style of middle control points (inherits base styles). You can set all 4 points individually. Empty means not displayed. Default is empty.
It also supports defining control point functionality types via pointType.
resizeLine: IBoxInputData ｜ IBoxInputData[]
Defines the style of hidden resize lines around the edit box. You can control line thickness by setting height. Default is 10px.
It also supports defining control point functionality types via pointType.
resizeLine: [{ pointType: 'move' }, {}], // only allow horizontal resizingrect: IBoxInputData
Defines the style of the edit box (inherits base styles).
rectThrough: boolean
Whether pointer events can pass through the rect area. Default is true.
If you do not want elements underneath the edit box to be selectable, set this to false.
area: IRectInputData
Style of the selection area (inherits base styles).
Rotation Button
circle: IBoxInputData
Defines the style of the independent rotation control point (inherits base styles). Empty means not displayed. Default is empty.
It also supports defining control point functionality types via pointType.
circle: {
pointType: 'button',
cursor: 'pointer',
event: {
tap: function () {
alert('button')
},
},
}, // becomes a custom buttoncircleDirection: 'top' | 'right' | 'bottom' | 'left'
Position of the independent rotation control point. Default is bottom (if buttonsDirection is bottom, then top).
circleMargin: number
Margin between the independent rotation control point and the edit box. Defaults to buttonsMargin.
Hover State
hover: boolean
Whether to show hover state. Enabled by default.
hoverStyle: IPathInputData
Hover style. Currently only stroke, fill, and simple shadow styles are supported (inherits base styles).
selectedStyle: IPathInputData
Style of selected elements (different from hover style; useful for multi-selection visibility). Currently only stroke, fill, and simple shadow styles are supported (inherits base styles).
selectedPathType: 'path' | 'render-path'
Path type used when rendering selected element outlines. Default is 'render-path'.
When elements use rounded corners or curves, 'path' is the original path, while 'render-path' is the final rendered path after applying rounded corners and curves.
Mask Layer
mask: string | boolean
Whether to add a global semi-transparent overlay mask. You can set a color value such as rgba(0,0,0,0.8). Default is false.
When set to true or a color value, the selected element is highlighted while other areas are darkened. Suitable for cropping, screenshots, etc.
Highlight
bright: boolean
Highlights and renders the selected element on top. Default is false. View example.
Derived from the element bright property.
dimOthers: boolean | number
Dims other elements to emphasize the selected element by reducing opacity. Default is false. View example.
When set to true, opacity is automatically set to 0.2. You can also specify a numeric opacity value.
Derived from element dim / dimskip properties.
You can also use the editor dimTarget property to define the scope of dimming (supports arrays).
Examples
Show all control points
// #图形编辑器 [显示所有控制点]
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)Quick style modification
// #图形编辑器 [快速修改样式]
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)Custom styles
Base styles are inherited by default; only override the new styles.
// #图形编辑器 [自定义样式]
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)Show bottom rotation control point
Base styles are inherited by default; only override the new styles.
// #图形编辑器 [显示旋转控制点]
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)Custom control point types
// #图形编辑器 [自定义 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)// #图形编辑器 [自定义 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)// #图形编辑器 [自定义 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)Drag control points to change font size, drag border to change text width/height
// #图形编辑器 [拖拽控制点修改字体大小，拖拽边框控制文本宽高]
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)Highlight and bring element to front
// #突出显示，置顶渲染元素 [App]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/bright' // 导入突出显示元素插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
bright: true, // 突出显示、置顶渲染选中元素
}
})
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
app.tree.add(Rect.one({ editable: true, fill: '#32cd79' }, 260, 150))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 320, 100))
setTimeout(() => { app.editor.select(app.tree.children[1]) }, 1000) // 模拟旋转元素Highlight and bring to front, dim other elements
// #突出显示并置顶渲染，淡化其他元素 [App]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/bright' // 导入突出显示元素插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
bright: true, // 突出显示、置顶渲染选中元素
dimOthers: true, // 淡化其他元素
//dimOthers: 0.2 // 可指定淡化的透明度
}
})
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
app.tree.add(Rect.one({ editable: true, fill: '#32cd79' }, 260, 150))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 320, 100))
setTimeout(() => { app.editor.select(app.tree.children[1]) }, 1000) // 模拟旋转元素Highlight main element, dim others
// #突出主体、淡化其他元素 [App]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/bright' // 导入突出显示元素插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
const app = new App({
view: window,
editor: {
dimOthers: true, // 淡化其他元素，突出选中元素
//dimOthers: 0.2 // 可指定淡化的透明度
}
})
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
app.tree.add(Rect.one({ editable: true, fill: '#32cd79' }, 260, 150))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 320, 100))
setTimeout(() => { app.editor.select(app.tree.children[1]) }, 1000) // 模拟旋转元素