Possibility of rendering only the first n strokes of a character?

[hcoohb]

Hi,

This library looks great and thanks for writing and sharing it !

I am aiming at generating some practice sheets that display stroke order on the left side.
While looking at the documentation, I could not find a straightforward way to render a fixed image of the character with only one stroke first, then with the first 2 strokes, then the first 3 strokes …
Is that something that could be done easily with this library? And if so, is it also possible to have the last stroke displayed as a different colour ?

Thanks and regards,
Fabien

[chanind]

Are you looking for something like in this demo: https://wenlincdl.com/demos/fanning? Hanzi Writer doesn't have an easy way to do that currently, but it shouldn't be hard to do using Hanzi Writer data directly (in this repo: https://github.com/chanind/hanzi-writer-data). I'll see if I can put together some documentation on how to use this data to make SVGs like that without going through Hanzi Writer.

[chanind]

v0.11.0 added 2 static methods HanziWriter.loadCharacterData(character) and HanziWriter.getScalingTransform(width, height) which should make it easier to do what you're talking about here. The docs on this are here: https://chanind.github.io/hanzi-writer/docs.html#raw-character-svg. There's also an example there of how to use these methods to do stroke fanning.

Closing this issue for now. If this isn't what you were looking to do we can reopen this issue again.

[hcoohb]

That is perfect !!!
Exactly what I needed
Thank you so much for implementing those features!

[hugolpz]

I love to functionality! Thanks @chanind for the code sample. 😁

Also, after a quick 5 mins online search, I noticed some solid html+svg to pdf js libs. It thus open the way to export pdf in order to print smart writing pad for paper-based studies. I collected some ideas there but it deserves a dedicated project I think.

[chanind]

@hcoohb 😀Glad it worked out! It was a great feature request!

@ALL:

Also, after a quick 5 mins online search, I noticed some solid html+svg to pdf js libs. It thus open the way to export pdf in order to print smart writing pad for paper-based studies. I collected some ideas there but it deserves a dedicated project I think.

That's a really cool idea! I hadn't thought about generating paper worksheets, but I don't see why it wouldn't be possible to autogenerate worksheets like that using this SVG data.