search

skishore / makemeahanzi

Free, open-source Chinese character data
https://www.skishore.me/makemeahanzi/
Other
1.82k stars 466 forks source link

adopt for Dart and Flutter #102

Open beedrill opened 2 years ago

beedrill commented 2 years ago

Hi, I am trying to use this data to make my Dart/Flutter app. As I can't directly use SVG data from this project(I need to animate multiple words, and also Flutter's SVG support is not good), I'll need to realize the animation myself from the median and stroke in graphic.txt. Is there some guidance on how this animation is done? Or which part of the Javascript code I should be looking at here?

skishore commented 2 years ago

Canvas is a possible alternative to SVGs for drawing these graphics. You can parse the stroke paths and issue the corresponding drawing commands on a canvas. Here's an example: https://github.com/skishore/inkstone/blob/library/src/handwriting.js#L114-L153

This code happens to handle all the SVG commands that occur in the Make Me a Hanzi data. There are also general-purpose libraries that can render any SVG image to canvas. I have not used them so I can't recommend one myself.

If you want to animated filling in the stroke, too - well, it's going to be tricky, but it can be done the same way. It will take more geometric calculations to figure out what portions of the stroke to draw up to.

beedrill commented 2 years ago

@skishore Hi Shaunak, thank you for the prompt reply, indeed I am looking for the animation stroke, that is why I am asking for the original code that generated those SVGs, so I can implement the equivalence using Dart animation.

Mr-Pepe commented 2 years ago

@beedrill Have you tried this package? I hope that's what you are looking for.

Disclaimer: I am the author of the package. I was facing the same problem as you and did the work already so you don't have to do it ;) Feel free to open an issue on Github if you are missing functionality.