https://github.com/dream-num/pentool
Pen tool
https://github.com/dream-num/pentool
Last synced: 3 months ago
JSON representation
Pen tool
- Host: GitHub
- URL: https://github.com/dream-num/pentool
- Owner: dream-num
- License: mit
- Created: 2020-05-15T08:22:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-29T06:18:38.000Z (almost 5 years ago)
- Last Synced: 2025-03-13T03:49:18.315Z (3 months ago)
- Language: TypeScript
- Size: 263 KB
- Stars: 66
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README-zh.md
- License: LICENSE
Awesome Lists containing this project
README
# pen-tool
[English](./README.md) | 简体中文
## 概述
基于canvas的路径绘制工具。
背景：在经常遇到的h5编辑器中，总有各式各样的组件，但是遍寻市面上大多数h5编辑器，没有找到一个满意的轻量级的路径绘制工具，于是决心自己根据现有的想法开发一个。考虑到typescript相对于js的优势，本项目以ts构建。如有不完善的地方或需要新增的功能，请大家踊跃提issue。
### 目录结构
```
|-- pen-tool
|-- lib ts声明文件
| |-- constant.d.ts
| |-- cursorConfig.d.ts
| |-- penTool.d.ts
|-- output ts编译目录
| |-- constant.js
| |-- cursorConfig.js
| |-- penTool.js
|-- src 源文件目录
| |-- classes.ts
| |-- constant.ts
| |-- cursorConfig.ts
| |-- interface.ts
| |-- penTool.ts
|-- static
| |-- demo.js
| |-- example.png
| |-- rose.png
|-- demo.js demo的js文件
|-- gulpfile.js gulp打包配置
|-- index.html demo的入口html
|-- index.esm.js
|-- index.umd.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- README-zh.md
|-- tsconfig.json
```
### 开发
- 编译
```
> tsc
```
- 打包
```
> gulp
```
### 使用方式
#### cdn 引入
```
...
EnablePen
...
let pen = new PenTool("canvas");
document.getElementById("btn").addEventListener("click", function() {
pen.enablePen();
})
```
#### npm import
```
npm install pen-tool
```
- index.html
```
EnablePen
```
- index.js
```
import PenTool from 'pen-tool'
let pen = new PenTool("canvas", {
pathFillColor: 'red',
isFillPath: true
// ...
});
document.getElementById("btn").addEventListener("click", function() {
pen.enablePen();
})
```
### 示例
启动服务后打开index.html即可查看示例。根目录下的`index.html` 及 `demo.js` 为示例文件。
或查看在线 [Demo](https://mengshukeji.github.io/PenTool/)
### 参数说明
一般来说，路径绘制时曲线是必不可少的，但是随手绘制的贝塞尔曲线不可能一步到位。针对这个问题，我们对于曲线给出了一个调整的手柄，通过手柄控制曲线的绘制。
初始化pen-tool
```
var pen = new Pen(canvasId, options);
```
- canvasId: `string` 绘制路径的画布。请确保钢笔工具初始化时dom已存在
- options: `IPenOptions` optional
- circle: `PenCircle` 路径关键点配置
- radius: `number` 关键点半径
- stroke: `String | CanvasGradient | CanvasPattern` 关键点绘制线条颜色/渐变
- fill: `String | CanvasGradient | CanvasPattern` 关键点填充颜色/渐变
- line: `PebLine` 曲线控制手柄线条配置
- stroke: `String | CanvasGradient | CanvasPattern`
- fill: `String | CanvasGradient | CanvasPattern`
- pathColor: `string` 路径线条颜色
- pathFillColor: `string` 路径填充颜色
- isFillPath: `boolean` 是否填充路径，默认`false`不填充
更多详细参数信息请参见 `lib/penTool.d.ts`
#### 退出绘制
- 退出绘制
在钢笔工具开启时，第一次按下`ESC`进入路径编辑模式，此时可以通过移动路径关键点来修改绘制形状; 第二次按下`ESC`或在路径编辑模式下点击空白处，退出绘制。
- 编辑路径
已经退出绘制后想要重新编辑路径，此时只需要 *双击* 路径区域就可重新进入路径编辑模式。关于路径区域的判定请参见 [isPointInPath](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath)
#### 直线曲线功能
- 改变path类型
在路径编辑模式下：双击关键点，若当前关键点为直线类型，则关键点变为曲线类型，连接前后两个关键点与当前关键点的直线为曲线，反之亦然。
- 曲线控制手柄
对于曲线的控制手柄，移动手柄位置可以改变曲线的贝塞尔函数，但是控制手柄的移动会影响曲线关键点两端的路径。
在移动手柄的同时按下`Alt`键，此时可以只控制该手柄端的曲线。
### 后续功能
当前项目只是简单的实现路径绘制与编辑，还称不上强大，我们未来还会不停地完善，当前的目标：
- [ ] 支持路径在canvas中移动
- [ ] 支持多路径绘制
### License
[MIT License](./LICENSE)