LeaferJS

简体中文

English

简体中文

English

Appearance

编辑器配置 ​

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

​

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

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

关键属性 ​

spread: number ​

编辑器框向外的扩展值，可扩大编辑框与实际元素之间的间隙，默认为 0。

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 来自定义控制点功能类型。

resizeLine: IBoxInputData ｜ IBoxInputData[] ​

设置编辑框四周的隐藏控制线样式，可通过设置 height 来控制线条的粗细，默认为 10px。

并支持通过设置 pointType 来自定义控制点功能类型。

ts
resizeLine: [{ pointType: 'move' }, {}], // 限制只能左右拉伸

rect: IBoxInputData ​

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

rectThrough: boolean ​

交互事件是否可穿透 rect 区域，默认为 true。

如果不想编辑框内可以选中上层覆盖的其他元素，可以设为 false。

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

hoverPathType: 'path' | 'render-path' | 'box' | 'stroke' ​

hover元素描边采用的路径类型，默认为 'render-path'。

当元素设置圆角、curve 时，'path' 为原始路径，'render-path' 是应用了圆角、curve 时之后的最终渲染路径。

如需采用元素的 包围盒 作为渲染路径，可使用 'box' 或 'stroke'（描边包围盒）。

selectedStyle: IPathInputData ​

选中元素的样式（区分 hover 样式，多选元素时比较容易看出来），目前只能定义笔触、填充、简单阴影样式（会继承基础样式）。

selectedPathType: 'path' | 'render-path' | 'box' | 'stroke' ​

选中元素描边采用的路径类型，默认为 'render-path'。

当元素设置圆角、curve 时，'path' 为原始路径，'render-path' 是应用了圆角、curve 时之后的最终渲染路径。

如需采用元素的 包围盒 作为渲染路径，可使用 'box' 或 'stroke'（描边包围盒）。

遮罩层 ​

mask: string | boolean ​

是否添加全局半透明覆盖遮罩层，可设置颜色值，如 rgba(0,0,0,0.8)，默认为 false。

设为 true 或色彩值时，选中元素会突出显示，其他区域变暗，适用于裁剪、截图等场景。

突出显示 ​

bright: boolean ​

突出显示，并置顶渲染选中元素，默认为 false，查看示例。

源于元素 bright 属性。

dimOthers: boolean | number ​

淡化其他元素，突出选中元素，通过叠加透明度来淡化元素，默认为 false，查看示例。

设为 true 时会自动设置 0.2 的透明度，也可设置一个透明度数值。

源于元素 dim / dimskip 属性。

另可通过设置编辑器 dimTarget 属性确定淡化内容的范围（支持数组）。

示例 ​

显示所有控制点 ​

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)

突出显示，置顶渲染元素 ​

ts
// #突出显示，置顶渲染元素 [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) // 模拟旋转元素

突出显示并置顶渲染，淡化其他元素 ​

ts
// #突出显示并置顶渲染，淡化其他元素 [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) // 模拟旋转元素

突出主体，淡化其他元素 ​

ts
// #突出主体、淡化其他元素 [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) // 模拟旋转元素

Released under the MIT License.

Copyright © 2023-2026 Chao (Leafer) Wan