feat: 3.0.3完成 增加draw绘制动画控制api

This commit is contained in:
tackchen 2021-08-06 22:26:38 +08:00
parent 978dd5ba3e
commit 2042a35378
20 changed files with 302 additions and 50 deletions

146
README.md
View File

@ -34,7 +34,7 @@
<h3>🚀 功能全面、多端支持的汉字拼音笔画 js 库</h3>
**[English](https://github.com/theajack/cnchar/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/cnchar) | [备用文档地址](https://cnchar.js.org) | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new) | [Gitee](https://gitee.com/theajack/cnchar) | QQ交流群: 958278438**
**[English](https://github.com/theajack/cnchar/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/cnchar) | [备用文档地址](https://cnchar.js.org) | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new) | [Gitee](https://gitee.com/theajack/cnchar)**
---
@ -60,7 +60,11 @@
* [5.2 可视化绘制汉字: draw](#52-%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BB%98%E5%88%B6%E6%B1%89%E5%AD%97-draw)
+ [5.2.1 使用](#521-%E4%BD%BF%E7%94%A8)
+ [5.2.2 参数](#522-%E5%8F%82%E6%95%B0)
+ [5.2.3 微信小程序中使用](#523-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8)
+ [5.2.3 绘制控制api](#523-%E7%BB%98%E5%88%B6%E6%8E%A7%E5%88%B6api)
- [5.2.3.1 startAnimation](#5231-startanimation)
- [5.2.3.2 pauseAnimation & resumeAnimation](#5232-pauseanimation--resumeanimation)
- [5.2.3.3 drawNextStroke](#5233-drawnextstroke)
+ [5.2.4 微信小程序中使用](#524-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8)
* [5.3 繁体、简体、火星文互转: convert](#53-%E7%B9%81%E4%BD%93%E7%AE%80%E4%BD%93%E7%81%AB%E6%98%9F%E6%96%87%E4%BA%92%E8%BD%AC-convert)
* [5.4 笔画序列推出原汉字: orderToWord](#54-%E7%AC%94%E7%94%BB%E5%BA%8F%E5%88%97%E6%8E%A8%E5%87%BA%E5%8E%9F%E6%B1%89%E5%AD%97-ordertoword)
* [5.5 通过拼音查询原汉字: spellToWord](#55-%E9%80%9A%E8%BF%87%E6%8B%BC%E9%9F%B3%E6%9F%A5%E8%AF%A2%E5%8E%9F%E6%B1%89%E5%AD%97-spelltoword)
@ -444,7 +448,78 @@ declare interface DrawOption {
```
##### 5.2.3 微信小程序中使用
##### 5.2.3 绘制控制api
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` 方法
###### 5.2.3.1 startAnimation
`option.animation.autoAnimate = false`调用该api可以开始绘制且开启`动连续绘制模式`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.startAnimation();
```
###### 5.2.3.2 pauseAnimation & resumeAnimation
当处于 `连续绘制模式`调用这两个api可以暂停绘制和恢复绘制
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION
});
writer.pauseAnimation();
writer.resumeAnimation();
```
###### 5.2.3.3 drawNextStroke
该 api 用于开启 **单笔绘制模式**
首先需要使用参数 `option.animation.autoAnimate = false`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.drawNextStroke(()=>{
// 当前笔画绘制完成的回调
});
```
##### 5.2.4 微信小程序中使用
该库由 HanziWriter 驱动目前仅支持在web环境下使用如需微信小程序使用请参考 [HanziWriter API](https://hanziwriter.org/docs.html#wechat-miniprograms)
@ -496,35 +571,70 @@ var dict = cnchar.orderToWord.orders; // dict 是一个包含所有笔画数的
弯钩: {shape: "㇁", letter: "t"}
捺: {shape: "㇏", letter: "l"}
提: {shape: "㇀", letter: "i"}
撇: {shape: "", letter: "s"}
撇折: {shape: "", letter: "n"}
撇点: {shape: "", letter: "m"}
撇: {shape: "丿", letter: "s"}
撇折: {shape: "𠃋", letter: "n"}
撇点: {shape: "𡿨", letter: "m"}
斜钩: {shape: "㇂", letter: "y", sameLetterTo: "卧钩"}
横: {shape: "", letter: "j"}
横折: {shape: "", letter: "c"}
横: {shape: "", letter: "j"}
横折: {shape: "𠃍", letter: "c"}
横折弯: {shape: "㇍", letter: "v", sameLetterTo: "横折折"}
横折折: {shape: "㇅", letter: "v", sameLetterTo: "横折弯"}
横折折折: {shape: "㇎", letter: "q"}
横折折折钩: {shape: "", letter: "w", sameLetterTo: "横撇弯钩"}
横折折折钩: {shape: "𠄎", letter: "w", sameLetterTo: "横撇弯钩"}
横折折撇: {shape: "㇋", letter: "a"}
横折提: {shape: "㇊", letter: "p"}
横折钩: {shape: "", letter: "r"}
横折钩: {shape: "𠃌", letter: "r"}
横撇: {shape: "㇇", letter: "e", sameLetterTo: "横钩"}
横撇弯钩: {shape: "㇌", letter: "w", sameLetterTo: "横折折折钩"}
横斜钩: {shape: "⺄", letter: "o"}
横钩: {shape: "㇖", letter: "e", sameLetterTo: "横撇"}
点: {shape: "", letter: "k"}
竖: {shape: "㇑", letter: "f"}
横钩: {shape: "乛", letter: "e", sameLetterTo: "横撇"}
点: {shape: "", letter: "k"}
点2: {shape: "㇀", letter: "d"}
竖: {shape: "丨", letter: "f"}
竖弯: {shape: "㇄", letter: "b"}
竖弯钩: {shape: "", letter: "u"}
竖折折: {shape: "", letter: "x", sameLetterTo: "竖折撇"}
竖弯钩: {shape: "", letter: "u"}
竖折折: {shape: "𠃑", letter: "x", sameLetterTo: "竖折撇"}
竖折折钩: {shape: "㇉", letter: "z"}
竖折撇: {shape: "ㄣ", letter: "x", sameLetterTo: "竖折折"}
竖提: {shape: "", letter: "h"}
竖钩: {shape: "", letter: "g"}
竖提: {shape: "𠄌", letter: "h"}
竖钩: {shape: "", letter: "g"}
}
```
<details>
<summary>展开笔画详情</summary>
| 名称 | 定义 | 形状 |
|---|---|---|
| 横折折撇 | `a` | ㇋ |
| 竖弯 | `b` | ㇄ |
| 横折 | `c` | 𠃍 |
| 点2 | `d` | ㇀ |
| 横斜钩 | `o` | ⺄ |
| 横 | `j` | 一 |
| 捺 | `l` | ㇏ |
| 横折钩 | `r` | 𠃌 |
| 竖 | `f` | 丨 |
| 竖钩 | `g` | 亅 |
| 点 | `k` | |
| 撇 | `s` | 丿 |
| 撇折 | `n` | 𠃋 |
| 竖折撇/竖折折 | `x` | ㄣ|𠃑 |
| 横折折折钩/横撇弯钩 | `w` | 𠄎|㇌ |
| 竖折折钩 | `z` | ㇉ |
| 提 | `i` | ㇀ |
| 弯钩 | `t` | ㇁ |
| 斜钩/卧钩 | `y` | ㇂|㇃ |
| 横折折/横折弯 | `v` | ㇅|㇍ |
| 横撇/横钩 | `e` | ㇇|乛 |
| 横折提 | `p` | ㇊ |
| 横折折折 | `q` | ㇎ |
| 竖提 | `h` | 𠄌 |
| 撇点 | `m` | 𡿨 |
| 竖弯钩 | `u` | 乚 |
</details>
注:其中以下五对笔画没有进行区分,使用的是同样的字母表示:
**卧钩 = 斜钩**、**横折弯 = 横折折**、**横折折折钩 = 横撇弯钩**、**横撇 = 横钩**、**竖折折 = 竖折撇**
@ -880,7 +990,7 @@ cnchar.setPolyPhrase(json: {[key: string]: string}): void;
设置汉字笔顺, 依赖 `cnchar-order`
添加的笔顺必须是字母,详情对应关系参见 [stroke-table](https://github.com/theajack/cnchar/blob/master/src/cnchar/plugin/order/dict/stroke-table.json)
添加的笔顺必须是字母,详情对应关系参见 [stroke-table](https://github.com/theajack/cnchar/blob/master/src/plugin/order/stroke-table.json)
```ts
cnchar.setOrder(word: string, order: string): void;

View File

@ -350,7 +350,78 @@ declare interface DrawOption {
};
```
##### 5.2.3 Use in WeChat Mini Program
##### 5.2.3 Drawing control api
The cnchar.draw method returns a writer object
```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;
}
```
When `drawType = animation`, the following APIs can be used by the user to control the animation
The drawing mode is divided into `continuous drawing` and `single-stroke drawing`, the default is continuous drawing mode
Single stroke drawing mode requires `option.animation.autoAnimate = false` and call the `drawNextStroke` method
###### 5.2.3.1 startAnimation
When `option.animation.autoAnimate = false`, call this api to start drawing, and enable `motion continuous drawing mode`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.startAnimation();
```
###### 5.2.3.2 pauseAnimation & resumeAnimation
When in `continuous drawing mode`, call these two apis to pause drawing and resume drawing
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION
});
writer.pauseAnimation();
writer.resumeAnimation();
```
###### 5.2.3.3 drawNextStroke
This api is used to enable **single-stroke drawing mode**
First, you need to use the parameter `option.animation.autoAnimate = false`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.drawNextStroke(()=>{
// Callback when the current stroke is drawn
});
```
##### 5.2.4 Use in WeChat Mini Program
The library is driven by HanziWriter, and currently only supports use in the web environment. If you need to use WeChat Mini Programs, please refer to [HanziWriter API](https://hanziwriter.org/docs.html#wechat-miniprograms)

View File

@ -355,7 +355,78 @@ declare interface DrawOption {
```
##### 5.2.3 微信小程序中使用
##### 5.2.3 绘制控制api
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` 方法
###### 5.2.3.1 startAnimation
`option.animation.autoAnimate = false`调用该api可以开始绘制且开启`动连续绘制模式`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.startAnimation();
```
###### 5.2.3.2 pauseAnimation & resumeAnimation
当处于 `连续绘制模式`调用这两个api可以暂停绘制和恢复绘制
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION
});
writer.pauseAnimation();
writer.resumeAnimation();
```
###### 5.2.3.3 drawNextStroke
该 api 用于开启 **单笔绘制模式**
首先需要使用参数 `option.animation.autoAnimate = false`
```js
const writer = cnchar.draw('你好', {
type: cnchar.draw.TYPE.ANIMATION,
animation: {
autoAnimate: false,
}
});
writer.drawNextStroke(()=>{
// 当前笔画绘制完成的回调
});
```
##### 5.2.4 微信小程序中使用
该库由 HanziWriter 驱动目前仅支持在web环境下使用如需微信小程序使用请参考 [HanziWriter API](https://hanziwriter.org/docs.html#wechat-miniprograms)

View File

@ -142,5 +142,6 @@
6. 增加单元测试
7. 代码仓库移除npm文件夹
## 3.0.3 doing
1. 增加繁体字 裡迴讚
## 3.0.3
1. 增加繁体字 裡迴讚
2. 增加 draw 插件绘制控制api startAnimation pauseAnimation resumeAnimation drawNextStroke

View File

@ -1,6 +1,6 @@
{
"name": "cnchar",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "index.html",
"author": "theajack <contact@theajack.com>",

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-types",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "index.js",
"scripts": {},
@ -24,4 +24,4 @@
"url": "https://github.com/theajack/cnchar/issues"
},
"homepage": "https://www.theajack.com/cnchar/"
}
}

View File

@ -29,7 +29,6 @@ export declare interface IWriter {
type: TDrawType;
text: Array<string>;
writers: Array<HanziWriter>;
init (): void;
startAnimation(): boolean;
drawNextStroke(onComplete?: ()=>void): boolean;
pauseAnimation(): void;

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-all",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.all.min.js",
"unpkg": "cnchar.all.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "hanzi-util-base",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "hanzi.base.min.js",
"unpkg": "hanzi.base.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "hanzi-util",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "hanzi.util.min.js",
"unpkg": "hanzi.util.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.min.js",
"scripts": {},
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1 +1 @@
export default '3.0.2';
export default '3.0.3';

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-draw",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.draw.min.js",
"unpkg": "cnchar.draw.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -71,7 +71,7 @@ export class Writer implements IWriter {
}
this.init();
}
init (): void {
private init (): void {
if (svg === null) {
return;
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-idiom",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.idiom.min.js",
"unpkg": "cnchar.idiom.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-order",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.order.min.js",
"unpkg": "cnchar.order.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-poly",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.poly.min.js",
"unpkg": "cnchar.poly.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-radical",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.radical.min.js",
"unpkg": "cnchar.radical.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-trad",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.trad.min.js",
"unpkg": "cnchar.trad.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "cnchar-xhy",
"version": "3.0.2",
"version": "3.0.3",
"description": "功能全面、多端支持的汉字拼音笔画js库支持多音字、繁体字、火星文",
"main": "cnchar.xhy.min.js",
"unpkg": "cnchar.xhy.min.js",
@ -27,6 +27,6 @@
},
"homepage": "https://www.theajack.com/cnchar/",
"dependencies": {
"cnchar-types": "^3.0.2"
"cnchar-types": "^3.0.3"
}
}