如何使用 Cocos 輕松實(shí)現(xiàn)漢字臨摹？

漢字的臨摹是語文類教育產(chǎn)品中非常容易用到的功能，尤其是小學(xué)一到三年級(jí)，本篇由社區(qū)同學(xué) amaterasu 為大家?guī)砗?jiǎn)單易用的用于 web 平臺(tái)漢字臨摹組件分享，歡迎閱讀！

我在一個(gè)在線教育類的公司做 Cocos 游戲課件的研發(fā)。在 18 年之前，我寫過大約兩年的 web，雖然后來莫名其妙的變成了 Cocos 開發(fā)者，但由于我的游戲是在瀏覽器內(nèi)運(yùn)行的，平常一直在研究 web 方面的東西。

在以前接觸過的漢字類的開源項(xiàng)目中，有一個(gè)名叫 hanzi-writer 的東西其實(shí)是能滿足大部分需求的，作者公布的 cdn 上有很多基于 svg 的筆順數(shù)據(jù)，很贊。

支持 hanziWriter 所有的 api。

hanziWriter 比較常用的功能與特點(diǎn)有：

1.支持幾乎所有常用漢字的筆畫，支持偏旁部首，各類顏色。

2.自動(dòng)執(zhí)行動(dòng)畫。

3.錯(cuò)誤筆順時(shí)自動(dòng)提醒下一筆。

4.豐富的回調(diào)與回調(diào)參數(shù)。

5.支持原始字符串的操作，你可以獲取到筆順數(shù)據(jù)后去做任何你想做的事情，漸進(jìn)式。

其實(shí)原理并不難，我們都知道 Cocos 的適配策略里是有設(shè)計(jì)分辨率和屏幕實(shí)際分辨率兩種分辨率的轉(zhuǎn)換的。

在 Cocos 內(nèi)將 hanzi-writer 導(dǎo)入為插件，并且生成對(duì)應(yīng)的 dom 節(jié)點(diǎn)，然后將這個(gè) dom 節(jié)點(diǎn)先應(yīng)用為實(shí)際分辨率，再根據(jù)真正的字的大小對(duì)其進(jìn)行縮放就行了。

這里主要的難點(diǎn)就是如何將 dom 節(jié)點(diǎn)放到正確的位置，并進(jìn)行正確的縮放。

這個(gè)思想其實(shí) Cocos 引擎內(nèi)部是有應(yīng)用過的，比如引擎內(nèi)的 video 和 input 其實(shí)都是在 Cocos 上新建了一個(gè)全新的節(jié)點(diǎn)覆蓋在 canvas 容器上，這也是為啥不能控制這兩個(gè)玩意的層級(jí)。

為什么不在 Cocos 內(nèi)做呢？

首先 video 是 H5 原生 api，canvas 解析視頻或許可以，但是效率肯定很低的，input 是因?yàn)樾枰{(diào)起手機(jī)端的鍵盤之類的瀏覽器默認(rèn)行為。

按上邊說的，首先需要獲得當(dāng)前實(shí)際屏幕對(duì)于設(shè)計(jì)尺寸的縮放率，這個(gè) api 我在引擎源碼內(nèi)找到了。

我的 Cocos 引擎版本是 2.3.3，如果這個(gè) api 用不了就需要去看看引擎處理 video 標(biāo)簽的文件內(nèi)是否有用別的方法。

let localView = cc.view;  let scaleX = localView.getScaleX; // 返回橫軸的縮放比，這個(gè)縮放比是將畫布像素分辨率放到設(shè)計(jì)分辨率的比例。  let scaleY = localView.getScaleY; // 返回縱軸的縮放比，這個(gè)縮放比是將畫布像素分辨率縮放到設(shè)計(jì)分辨率的比例。  let viewport = localView.getViewportRect; // 返回視窗剪裁區(qū)域。  let dpr = localView.getDevicePixelRatio; // 返回設(shè)備或?yàn)g覽器像素比例。

最終我們需要拿這些數(shù)據(jù)去計(jì)算當(dāng)前的漢字 dom 在屏幕的坐標(biāo)、縮放和變形等，實(shí)際中還需要考慮 Cocos 容器 canvas 的 paddding 等等。

在 Cocos 內(nèi)我已經(jīng)做好了這個(gè)組件，同事用起來也很爽（因?yàn)橛泄P順的數(shù)據(jù)），也幾乎用不到美術(shù)參與進(jìn)來。

甚至還給美術(shù)小姐姐們做了一個(gè)自動(dòng)生成漢字筆順的工具，也是基于 hanzi-writer 去寫的。

這是我第一次用 web 的解決方案去處理 Cocos 內(nèi)的業(yè)務(wù)，戳【閱讀原文】跳轉(zhuǎn)獲取源碼。

原本預(yù)計(jì)最少 2 周的工作其實(shí)實(shí)際只用了不到 2 天就完成了，算是將自己所學(xué)盡量融匯一下，也很高興在這里貢獻(xiàn)給大家。