search

parsimonhi / animCJK

Draw animated Japanese characters (Kanji and Kana), Korean characters (Hanja) and Chinese characters (Hanzi) in correct stroke order using svg, free open-source code.
284 stars 72 forks source link

の stroke animation starting possition #4

Closed MrBushid0 closed 5 years ago

MrBushid0 commented 6 years ago

Hi,

Thank you for your hard work. The project is a life saver for a site I'm working on atm.

I noticed that the animation for の starts at the wrong coordinates. Unfortunately, I'm just staring with SVG so I'm not proficient with it yet, not sure how to fix it.

Purely out of curiosity, why is の using 2 paths instead of just 1 path? you can see a line separator at the intersection of both paths.

parsimonhi commented 6 years ago

Hi,

Thank you for your report. I fixed the error in the "の" drawing.

The reason why there are 2 paths in the svg of "の" is that the starting point of "の" is too close from the the top part of the stroke (thus this top part and the starting point are drawn at the same moment). So i had to cut the stroke in two "sub-strokes" and use some special "medians" in order to solve this issue (the same trick is applied on "あ", "お", etc. that have an overlapping stroke). However, i made a mistake in the svg of "の" so even after applying the above trick, the top part of the stroke and the starting point were still drawn at the same moment because the starting point of the 2nd sub-stroke i used in the svg of "の" was too close from the top of the stroke. I just modified some coordinates in the svg to solve the issue.

Somewhat complicated, but i didn't find a simpler way to do the job until now.