feat: vuepressdocs
This commit is contained in:
parent
2042a35378
commit
78d0db5dd1
|
@ -1,7 +1,7 @@
|
|||
node_modules
|
||||
nodejs
|
||||
src_import_version
|
||||
# package-lock.json
|
||||
package-lock.json
|
||||
vuepress/.vuepress/secret.js
|
||||
helper/local
|
||||
coverage
|
||||
|
|
|
@ -112,7 +112,6 @@ declare interface DrawOption {
|
|||
</highlight-code>
|
||||
</div>
|
||||
|
||||
|
||||
## 3. 常规绘制实例
|
||||
|
||||
绘制模式默认为常规模式 `type=normal`
|
||||
|
@ -147,6 +146,78 @@ declare interface DrawOption {
|
|||
<codebox id='test-draw'></codebox>
|
||||
</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)
|
|
@ -132,3 +132,16 @@
|
|||
|
||||
## 3.0.1
|
||||
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
|
Loading…
Reference in New Issue