-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
162 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | - | 按鼠标拖拽事件坐标添加% | 否 | | ||
|
||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | - | - | 垂直居中 | 是 | | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | ||
``` | ||
|
||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | ||
``` | ||
|
||
|
||
|
||
|
||
|