adopt for Dart and Flutter
beedrill opened this issue · comments
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?
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.
@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.
@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.