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

README.md

@@ -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: "s"}
-    撇折: {shape: "㇜", letter: "n"}
+    撇折: {shape: "𠃋", letter: "n"}
-    撇点: {shape: "㇛", letter: "m"}
+    撇点: {shape: "𡿨", letter: "m"}
     斜钩: {shape: "㇂", letter: "y", sameLetterTo: "卧钩"}
-    横: {shape: "㇐", letter: "j"}
+    横: {shape: "一", letter: "j"}
-    横折: {shape: "㇕", letter: "c"}
+    横折: {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: "e", sameLetterTo: "横撇"}
-    点: {shape: "㇔", letter: "k"}
+    点: {shape: "丶", letter: "k"}
-    竖: {shape: "㇑", letter: "f"}
+    点2: {shape: "㇀", letter: "d"}
+    竖: {shape: "丨", letter: "f"}
     竖弯: {shape: "㇄", letter: "b"}
-    竖弯钩: {shape: "㇟", letter: "u"}
+    竖弯钩: {shape: "乚", letter: "u"}
-    竖折折: {shape: "㇞", letter: "x", sameLetterTo: "竖折撇"}
+    竖折折: {shape: "𠃑", letter: "x", sameLetterTo: "竖折撇"}
     竖折折钩: {shape: "㇉", letter: "z"}
     竖折撇: {shape: "ㄣ", letter: "x", sameLetterTo: "竖折折"}
-    竖提: {shape: "㇙", letter: "h"}
+    竖提: {shape: "𠄌", letter: "h"}
-    竖钩: {shape: "㇚", letter: "g"}
+    竖钩: {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;

helper/README.en.md

@@ -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)
 

helper/README.md

@@ -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)
 

helper/version.md

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

package.json

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

src/cnchar-types/package.json

@@ -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/"
-}
+}

src/cnchar-types/plugin/draw/index.d.ts

@@ -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;

src/cnchar/alias/cnchar-all/package.json

@@ -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"
     }
 }

src/cnchar/alias/hanzi-util-base/package.json

@@ -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"
     }
 }

src/cnchar/alias/hanzi-util/package.json

@@ -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"
     }
 }

src/cnchar/main/package.json

@@ -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"
     }
 }

src/cnchar/main/version.ts

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

src/cnchar/plugin/draw/package.json

@@ -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"
     }
 }

src/cnchar/plugin/draw/writer.ts

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

src/cnchar/plugin/idiom/package.json

@@ -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"
     }
 }

src/cnchar/plugin/order/package.json

@@ -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"
     }
 }

src/cnchar/plugin/poly/package.json

@@ -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"
     }
 }

src/cnchar/plugin/radical/package.json

@@ -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"
     }
 }

src/cnchar/plugin/trad/package.json

@@ -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"
     }
 }

src/cnchar/plugin/xhy/package.json

@@ -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"
     }
 }