Shape Editor

Shape Editor —— 轻松实现形状编辑。

📆 更新日志

当前为 v1.0.0-alpha，查看更新日志。

📦 安装插件（本地安装）

本插件不发布于公开 NPM 仓库，通过本地 .tgz 文件安装使用，需购买插件授权后才能使用。

第一步：获取插件包

购买后，你将获得一个名为 pxgrow-shape-editor-1.0.0-alpha.tgz 的安装包。

将该文件放置在你的项目根目录下的 pxgrow 文件夹中统一管理，安装后请勿删除。

第二步：本地安装命令

根据你使用的包管理器，选择以下方式之一：

npmpnpmyarnbun

npm install ./pxgrow/pxgrow-shape-editor-1.0.0-alpha.tgz

pnpm add ./pxgrow/pxgrow-shape-editor-1.0.0-alpha.tgz

yarn add ./pxgrow/pxgrow-shape-editor-1.0.0-alpha.tgz

bun add ./pxgrow/pxgrow-shape-editor-1.0.0-alpha.tgz

将在 package.json 中自动增加本地依赖:

"@pxgrow/shape-editor": "file:pxgrow/pxgrow-shape-editor-1.0.0-alpha.tgz"

或通过 script 标签引入，使用全局变量 PxGrow.shapeEditor 访问插件内部功能。

需解压 pxgrow-shape-editor-1.0.0-alpha.tgz 文件，复制 package/dist/shape-editor.js 使用。

web

html

<script src="/lib/pxgrow/shape-editor.js"></script>
<script>
  const { EllipseEditTool } = PxGrow.shapeEditor
</script>

示例

Ellipse 元素

// #Shape Editor [Ellipse 元素]
import { App, Ellipse } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import '@pxgrow/shape-editor'  // 导入形状编辑插件

const app = new App({
    view: window, editor: {
        EllipseEditTool: { // 编辑工具配置
            // point: {} // 基础控制点样式
            // startPoint: { stroke: 'red' } // 起点样式
            // endPoint: {} // 结束点样式
            // innerPoint: {} // 内径控制点样式
        }
    }
})

const ellipse = new Ellipse({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: "#32cd79",
    editable: true
})

app.tree.add(ellipse)

// 模拟点击元素，显示编辑工具
setTimeout(() => {
    app.editor.select(ellipse)
}, 600)

Ellipse 弧线

// #Shape Editor [Ellipse 弧线]
import { App, Ellipse } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import '@pxgrow/shape-editor' // 导入形状编辑插件

const app = new App({
    view: window, editor: {
        editBoxType: 'stroke',
        EllipseEditTool: {
            innerPoint: { visible: false } // 隐藏内径控制点
        }
    }
})

const ellipse = new Ellipse({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    innerRadius: 1,
    closed: false, // 建议加上，可节省性能
    stroke: 'black',
    strokeAlign: 'center',
    strokeWidth: 20,
    editable: true
})

app.tree.add(ellipse)

// 模拟点击元素，显示编辑工具
setTimeout(() => {
    app.editor.select(ellipse)
}, 600)

Shape Editor ​

📆 更新日志 ​

📦 安装插件（本地安装） ​

第一步：获取插件包 ​

第二步：本地安装命令 ​

示例 ​

Ellipse 元素 ​

Ellipse 弧线 ​