feat: vuepressdocs
This commit is contained in:
parent
2042a35378
commit
78d0db5dd1
|
@ -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
|
||||||
|
|
|
@ -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)
|
|
@ -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
|
Loading…
Reference in New Issue