Skip to content

Commit

Permalink
feat(api): 新增插件操作
Browse files Browse the repository at this point in the history
  • Loading branch information
nihaojob committed Jul 6, 2024
1 parent 23209e8 commit f02e63d
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 0 deletions.
10 changes: 10 additions & 0 deletions .vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,16 @@ export default defineConfig({
// { text: '贡献指南', link: '/guide/community' },
]
},
{
text: '📦 APIs ',
collapsed: false,
items: [
{ text: '添加元素', link: '/api/AddBaseType' },
{ text: '锁定/解锁', link: '/api/Lock' },
{ text: '图层操作', link: '/api/Layer' },
{ text: '居中操作', link: '/api/Center' },
]
},
{
text: '🙌 贡献和社区',
collapsed: false,
Expand Down
29 changes: 29 additions & 0 deletions api/AddBaseType.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@

# AddBaseTypePlugin
将元素添加到画布中的方法封装,所有将元素添加到画布中的全部功能封装在该插件中。

[代码位置](https://github.com/nihaojob/vue-fabric-editor/blob/main/packages/core/plugin/AddBaseTypePlugin.ts)

### addBaseType
将fabricjs的元素添加到画布中,默认选中并对元素位置进行设置。

```js
addBaseType(item: fabric.Object,
options?: {
center: boolean; // 画布居中
scale: boolean; // 按画布宽度50%缩放
event: DragEvent; // 按鼠标拖拽事件坐标添加
})
```
#### options参数说明:

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---- | ---- | ---- | ---- | ---- |
| center | boolean | true | 画布居中 ||
| scale | boolean | false | 按画布宽度50%缩放 ||
| event | DragEvent | - | 按鼠标拖拽事件坐标添加% ||





52 changes: 52 additions & 0 deletions api/Center.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@

# CenterAlignPlugin
将单选/多选的元素进行水平/垂直/水平垂直居中。

[代码位置](https://github.com/nihaojob/vue-fabric-editor/blob/main/packages/core/plugin/CenterAlignPlugin.ts)


### center
将画布中当前选中的元素进行水平垂直居中操作。

```js
canvasEditor.center()
```


### centerH
将画布中当前选中的元素进行水平居中操作。

```js
canvasEditor.centerH()
```

### centerV
将画布中当前选中的元素进行垂直居中操作。

```js
canvasEditor.centerV()
```

### position
将画布中当前选中的元素按居中方式进行操作。

```js
canvasEditor.position(name: 'centerH' | 'center' | 'centerV')
```

#### name参数说明:

| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---- | ---- | ---- | ---- | ---- |
| center | - | - | 水平垂直居中 ||
| centerH | - | - | 水平居中 ||
| centerV | - | - | 垂直居中 ||









40 changes: 40 additions & 0 deletions api/Layer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

# LayerPlugin
对画布中元素图层层级操作封装。

[代码位置](https://github.com/nihaojob/vue-fabric-editor/blob/main/packages/core/plugin/LayerPlugin.ts)

### up
将画布中当前选中的元素向上移动一层。

```js
canvasEditor.up()
```

### down
将画布中当前选中的元素向下移动一层。

```js
canvasEditor.down()
```


### toFront
将画布中当前选中的元素移动的最顶层。

```js
canvasEditor.toFront()
```


### toBack
将画布中当前选中的元素移动的最后一层。

```js
canvasEditor.toBack()
```





31 changes: 31 additions & 0 deletions api/Lock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!--
* @Author: 秦少卫
* @Date: 2024-07-06 17:48:39
* @LastEditors: 秦少卫
* @LastEditTime: 2024-07-06 18:04:56
* @Description: file content
-->

# LockPlugin
将元素锁定/解锁方法封装。

[代码位置](https://github.com/nihaojob/vue-fabric-editor/blob/main/packages/core/plugin/LockPlugin.ts)

### lock
将画布中当前选中的元素锁定,让该元素不可选中、修改。

```js
canvasEditor.lock()
```

### position
将画布中当前选中的元素解锁,让该元素可选中、修改。

```js
canvasEditor.unLock()
```





0 comments on commit f02e63d

Please sign in to comment.