What to change to make it work?

krmanik commented 4 years ago

I have implemeted HanziWriter using json data from svgsKana but for the characters with more curve seems not working as expected. So what to be change in order to make it work?

demo (1)

magychan35 commented 4 years ago

I want to creat the same please for my videos. Can you tell me how can I let kanji letters appear on the viewer screen like this?

edberteliezer commented 4 years ago

@magychan35 It uses https://github.com/chanind/hanzi-writer for the writing features and uses AnimCJK data for the kanji order and image data. You should read the documentations to apply the code yourself. If not possible you should hire a web developer to do it for you. And lucky you, there someone already combined both hanzi writer and animCJK here: https://github.com/chanind/hanzi-writer-data-jp And here https://github.com/infinyte7/Write-Kanji

edberteliezer commented 4 years ago

@infinyte7 the problem is that the お kana is has two parts that is supposed to be played together. look here: https://github.com/parsimonhi/animCJK/blob/master/svgsKana/12362.svg?short_path=bf55bb6

<path style="--d:2s;" pathLength="3333" clip-path="url(#z12362c2a)" d="M 287,100 338,140 311,847 282,898 234,906 218,900 165,836 158,764 243,671 525,536 748,543 835,691 763,820 588,917"/>
<path style="--d:2s;" pathLength="3333" clip-path="url(#z12362c2b)" d="M 287,1712 338,1672 311,965 282,914 234,906 218,900 165,836 158,764 243,671 525,536 748,543 835,691 763,820 588,917"/>

Notice the delay is both 2s. There are 2 paths that is supposed to be played at the same time, Hence, your animation is cut off.

The solution (I think) to for you to:

Code a JavaScript that can identify the duplicate delay and play it together as one. I am not familiar with Hanzi Writter so I am not sure the possibility of this.
Edit it with an image editor and combine the separated path into one path.

krmanik commented 4 years ago

@magychan35

I want to creat the same please for my videos. Can you tell me how can I let kanji letters appear on the viewer screen like this?

You can check my implementation. https://github.com/infinyte7/Write-Kanji

https://github.com/infinyte7/Write-Kanji/blob/master/Versions/Version%201.1/back.html

I have used HanziWriter by chanind

@edberteliezer I will implement that.

parsimonhi commented 4 years ago

Hello,

This is a difficult problem because for characters with a stroke that overlaps on itself, it is necessary to split the stroke in 2 (otherwise there is a bad rendering around the point where the stroke overlaps).

May be you can try to modify the svg (the duration and delay of the animation and the coordinates of the medians of strokes that overlaps).

Below is a sample of a modified svg for the small あ (modified parts are in bold):

</svg>

Edit: this doesn't work well with safari because safari doesn't support the svg "pathLength" attribute. You can correct this bug by replacing in the css for each stroke the value of stroke-dasharray by the actual pathLength of the stroke + 4, and the value of stroke-dashoffset by the actual pathLength of the stroke + 6 (and of course by removing the svg pathLength attribute). This can be done automatically using for instance javascript and a css variable.

krmanik commented 4 years ago

Thanks for detailed explanation. I have understood this implementation. I will add this to my project.

parsimonhi commented 4 years ago

Note that the safari bug concerning svg "pathLength" attribute will be corrected soon (it is already corrected in beta versions of safari). So it is probably unnecessary to try to correct this bug.

parsimonhi / animCJK

What to change to make it work? #8