Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adopt for Dart and Flutter #102

Open
beedrill opened this issue Jan 10, 2022 · 3 comments
Open

adopt for Dart and Flutter #102

beedrill opened this issue Jan 10, 2022 · 3 comments

Comments

@beedrill
Copy link

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
Copy link
Owner

skishore commented Jan 10, 2022

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
Copy link
Author

@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
Copy link

Mr-Pepe commented Jan 11, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants