leafer-x-clip-resize-inner-editor

leafer 图片裁剪 内部编辑器插件

安装

npm i leafer-x-clip-resize-inner-editor

特点

1. 添加了自定义元素 ClipImage（裁剪的必要元素）
2. 实现：移动、缩放、旋转裁剪，支持图片拉伸
3. 基于 innerEditor 开发规范开发，支持双击开启/关闭内部编辑
4. 详细使用方式移步 [playground]

样式

1. 基础线框样式和旋转按钮会继承配置的编辑器样式
2. 其他控制点为表现出明显的裁剪,使用了新的裁剪样式

截图示例

GIF 示例

快速使用

import { App } from 'leafer-ui'
import { ClipImage, ClipResizeEditor } from 'leafer-x-clip-resize-inner-editor'
import '@leafer-in/editor'
import '@leafer-in/viewport'
import '@leafer-in/view'

// 为元素注册内部编辑器
ClipImage.setEditInner(ClipResizeEditor.name)

const app = new App({
  view: window,
  editor: {},
})

// 最简创建, 默认无剪裁
const ui = new ClipImage({
  url: '/static/test2.jpg',
  editable: true,
})

app.tree.add(ui)

License

MIT License © 2024-PRESENT XiaDeYu

MIT License © 2023-PRESENT Chao (Leafer) Wan