编辑器配置

基础     事件     样式     按钮组     光标     选择     控制     启用     内部编辑器

样式配置，应用运行中可实时修改 app.editor.config 生效。

同时元素拥有 独立的编辑配置 属性，可实时覆盖主配置。

关键属性

stroke: string

设置控制点和编辑框的描边颜色，默认为 #836DFF。

strokeWidth: number

设置控制点和编辑框的描边大小。

pointSize: number

设置控制点的大小。

pointRadius: number

设置控制点的圆角半径

精确控制样式

point: IBoxInputData ｜ IBoxInputData[]

设置控制点样式，可单独设置 4 个点。

并支持通过设置 pointType = 'button' ｜'rotate' 来自定义功能。

point: [
  {},
  {
    // 支持 Box 元素的所有属性
    pointType: 'button',
    event: {
      tap: function () {
        alert('button')
      },
    },
    fill: {
      // 使用图片
      type: 'image',
      url: '/image/leafer.jpg',
    },
  }, // 变为自定义按钮
  { pointType: 'rotate' }, // 变为旋转按钮
  {},
]

middlePoint: IBoxInputData｜ IBoxInputData[]

设置中间控制点样式（会继承基础样式），可单独设置 4 个点，为空时不显示， 默认为空。

rect: IBoxInputData

设置编辑框的样式（会继承基础样式）。

area: IRectInputData

框选区域的样式（会继承基础样式）。

旋转按钮

circle: IBoxInputData

设置独立旋转控制点样式（会继承基础样式）， 为空时不显示， 默认为空。

并支持通过设置 pointType = 'button' 来自定义功能。

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 样式，目前只能定义笔触和填充样式（会继承基础样式）。

遮罩

mask: string | boolean

设置遮罩的颜色值（适用于裁剪图片场景），true 表示颜色值 rgba(0,0,0,0.8)，默认为无。

示例

显示所有控制点

// #图形编辑器 [显示所有控制点]
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.target = rect

快速修改样式

// #图形编辑器 [快速修改样式]
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.target = rect

自定义样式

默认会继承基础样式， 只需覆盖新的样式。

// #图形编辑器 [自定义样式]
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.target = rect

显示底部旋转控制点

默认会继承基础样式， 只需覆盖新的样式。

// #图形编辑器 [显示旋转控制点]
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.target = rect