Hanzi Writer 是 javascript 免費開源庫咸包，根據(jù)漢字書寫時按照筆畫順序的特征，可以播放正確筆畫順序的描邊動畫和練習測試幔戏。 支持簡體字和繁體字刀疙。
安裝
在 script 標簽加載 Hanzi Writer
最簡單選項是直接從 jsdelivr CDN 加載 Hanzi Writer JS 。只需將以下內(nèi)容放入你的網(wǎng)頁的頭部:
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script>
你也可以拷貝一個下載 Hanzi Writer javascript 文件:
hanzi-writer.min.js - 生產(chǎn)壓縮版 (32 kb, 9kb 壓縮后的)
hanzi-writer.js - 開發(fā)未壓縮版本 (72 kb)
上面的腳本將在腳本加載后使全局 HanziWriter 變量可用湃交。
通過 npm 加載 Hanzi Writer
如果你想在 webpack 或 node.js 中包含 Hanzi Writer熟空，你可以從 npm install hanzi-writer 安裝。然后搞莺，你可以在你的代碼中包含 Hanzi Writer
const HanziWriter = require('hanzi-writer');
如果你想在舊版本 IE10/IE11 使用 Hanzi Writer息罗，你需要為 Promise api 提供一個填充工具
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
微信小程序使用
Hanzi Writer Wechat Miniprogram Plugin (微信小程序組件)
Installation
npm install hanzi-writer-miniprogram
Usage
In your page.json, first add the following to enable the hanzi-writer-view component:
{
"usingComponents": {
"hanzi-writer-view": "hanzi-writer-miniprogram/hanzi-writer-view"
}
}
Then, add a hanzi-writer-view component to your page. You must add an id, width, and height, like below:
<hanzi-writer-view id="hz-writer" width="300" height="300" />
Then in your page, you can control the view via createHanziWriterContext(options), like below:
import createHanziWriterContext from 'hanzi-writer-miniprogram';
Page({
onLoad: function() {
this.writerCtx = createHanziWriterContext({
id: 'hz-writer',
character: '你',
page: this,
});
// You can call any normal HanziWriter method here
this.writerCtx.loopCharacterAnimation();
}
});
This method requires the id from the hanzi-writer-view component in wxml, and the current page.
https://openbase.com/js/hanzi-writer-miniprogram
https://hanziwriter.org/cn/docs.html
https://juejin.cn/post/6866314175849693197
