feat: vuepressdocs

This commit is contained in:
tackchen 2021-08-07 14:08:56 +08:00
parent 2042a35378
commit 78d0db5dd1
3 changed files with 88 additions and 4 deletions

2
.gitignore vendored
View File

@ -1,7 +1,7 @@
node_modules node_modules
nodejs nodejs
src_import_version src_import_version
# package-lock.json package-lock.json
vuepress/.vuepress/secret.js vuepress/.vuepress/secret.js
helper/local helper/local
coverage coverage

View File

@ -112,7 +112,6 @@ declare interface DrawOption {
</highlight-code> </highlight-code>
</div> </div>
## 3. 常规绘制实例 ## 3. 常规绘制实例
绘制模式默认为常规模式 `type=normal` 绘制模式默认为常规模式 `type=normal`
@ -147,6 +146,78 @@ declare interface DrawOption {
<codebox id='test-draw'></codebox> <codebox id='test-draw'></codebox>
</div> </div>
## 7. 微信小程序中使用 ## 7. 绘制动画控制
cnchar.draw 方法会返回一个 writer 对象
```ts
declare interface IWriter {
option: IDrawOption;
el: HTMLElement;
type: TDrawType;
text: Array<string>;
writers: Array<HanziWriter>;
startAnimation(): boolean;
pauseAnimation(): void;
resumeAnimation(): void;
drawNextStroke(onComplete?: ()=>void): boolean;
}
```
`drawType = animation`以下几个api可以用户控制动画
绘制模式分为`连续绘制` 和 `单笔画绘制`,默认为连续绘制模式
单笔划绘制模式需要 `option.animation.autoAnimate = false` 且调用 `drawNextStroke` 方法
### 7.1 startAnimation
`option.animation.autoAnimate = false`调用该api可以开始绘制且开启`动连续绘制模式`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.startAnimation();
```
### 7.2 pauseAnimation & resumeAnimation
当处于 `连续绘制模式`调用这两个api可以暂停绘制和恢复绘制
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION
});
writer.pauseAnimation();
writer.resumeAnimation();
```
### 7.3 drawNextStroke
该 api 用于开启 **单笔绘制模式**
首先需要使用参数 `option.animation.autoAnimate = false`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.drawNextStroke(()=>{
// 当前笔画绘制完成的回调
});
```
## 8. 微信小程序中使用
该库由 HanziWriter 驱动目前仅支持在web环境下使用如需微信小程序使用请参考 [HanziWriter API](https://hanziwriter.org/docs.html#wechat-miniprograms) 该库由 HanziWriter 驱动目前仅支持在web环境下使用如需微信小程序使用请参考 [HanziWriter API](https://hanziwriter.org/docs.html#wechat-miniprograms)

View File

@ -132,3 +132,16 @@
## 3.0.1 ## 3.0.1
1. 打包配置修改 tsconfig.json 1. 打包配置修改 tsconfig.json
## 3.0.2
1. 修正 归 字默认读音
2. 宝盖头 的第二笔名称由 撇点 修改为 点2
3. 增加 order 方法detail 返回 letter属性
4. 增加 难民 逃难 多音词
5. 修改一些笔画foldCount和type错误
6. 增加单元测试
7. 代码仓库移除npm文件夹
## 3.0.3
1. 增加繁体字 裡迴讚
2. 增加 draw 插件绘制控制api startAnimation pauseAnimation resumeAnimation drawNextStroke