preface

Chinese character copying is a very easy function to use in Chinese education products, especially from grade one to grade three in primary school. It happened that I was working in an online education company as a COCOS game courseware developer. I wrote about two years of web writing about 18 years ago, and then somehow became a Cocos developer, but because my games run in a browser, I’ve always worked on the Web. In the open source project of Chinese character class I have contacted before, there is something called Hanzi-Writer which can actually meet most of the requirements. The CDN published by the author has a lot of swG-based stroke sequence data, which is very nice.

Cocos within

All apis of hanziWriter are supported. The specific effect can go to the website above to see.

The commonly used functions and features of hanziWriter are:

1. Support almost all commonly used Chinese strokes, support radical, all kinds of colors.

2. Perform animation automatically.

3. Automatically remind the next stroke when the stroke order is wrong.

4. Rich callback and callback parameters.

5. Support raw string operation, you can get the stroke sequence data to do whatever you want to do, progressive.

The principle of

It’s actually not that hard, and we all know that cocos fit strategies are thereDesign resolutionandActual screen resolutionTo convert the two resolutions, import hanzi-writer into a plug-in in COcos and generate the corresponding DOM node. Then apply the DOM node to the actual resolution and scale it according to the real word size. The main challenge here is getting the DOM nodes in the right place and scaling them properly.

In fact, this idea has been applied inside the CoCOS engine. For example, the video and input in the engine are actually covered by a new node on the Cocos container, which is why the hierarchy of these two things cannot be controlled. Why don’t you do it in cocos? First of all, video is H5 native API. Canvas may be able to parse video, but the efficiency is definitely very low. Input is because you need to call up the browser’s default behavior like the keyboard on the phone.

According to the above, the first need to obtain the current actual screen for the design size of the zoom rate, I found this API in the engine source code, my cocos engine version is 2.3.3, if this API is not used, you need to see the engine processing video tag file is useful for other methods.

let localView = cc.view; let scaleX = localView.getScaleX; // Returns the horizontal scaling ratio, which is the ratio of canvas pixel resolution to design resolution. let scaleY = localView.getScaleY; // Returns the vertical scale ratio, which is the scale of the canvas pixel resolution to the design resolution. let viewport = localView.getViewportRect; // Returns the Window clipping area. let dpr = localView.getDevicePixelRatio; // Returns the ratio of device or browser pixels.Copy the code

Finally, we need to use these data to calculate the screen coordinates, scaling, and deformation of the current Chinese character DOM. In practice, we also need to consider the paddding of coCOS container canvas, etc.

I already have this component in Cocos, and it’s pretty cool for my colleagues to use (because of the stroke order data), and there’s almost no art involved. She even made a tool for automatically generating stroke order of Chinese characters for the artists, which is also based on Hanzi-writer.

This is the first time for me to use the Web solution to deal with the business in CoCOS. The work which was expected to take at least 2 weeks was actually completed in less than 2 days, which can be regarded as integrating what I have learned as much as possible.

DemoGit. Project address.