What missing here?

[krmanik]

I used https://gist.github.com/robflaherty/1616367 script to convert animCJK kana data. https://github.com/parsimonhi/animCJK/blob/master/svgsKana/12370.svg to json.
げ.json file

{
    "strokes": [
        "M 195 145 C 184 145 181 160 187 167 C 200 187 194 211 192 233 C 184 284 171 334 164 386 C 151 468 143 552 147 636 C 148 694 150 753 170 808 C 177 829 189 849 208 861 C 223 869 245 863 249 846 C 252 831 245 815 246 800 C 246 766 254 734 261 702 C 266 680 273 660 279 640 C 282 632 280 622 271 619 C 261 616 253 624 250 632 C 245 642 242 652 236 660 C 225 679 217 700 206 718 C 200 696 201 673 199 650 C 195 555 209 460 227 367 C 238 317 255 269 268 220 C 270 200 256 183 243 170 C 230 158 214 146 195 145 Z",
        "M 794 315 C 731 321 670 341 608 352 C 542 365 474 374 407 385 C 398 387 387 390 386 400 C 386 411 398 417 407 421 C 426 430 447 433 467 427 C 520 414 574 407 627 400 C 692 393 756 387 821 382 C 831 381 841 381 850 379 C 861 373 862 357 854 348 C 841 329 818 316 794 315 Z",
        "M 628 106 C 618 106 605 112 605 123 C 607 133 618 138 624 146 C 640 162 640 186 642 208 C 644 251 643 296 644 340 C 644 462 645 585 622 705 C 607 776 578 845 534 904 C 530 911 531 924 541 926 C 554 927 563 916 571 907 C 621 849 665 783 684 708 C 702 635 704 559 707 484 C 710 387 706 290 710 192 C 712 182 721 173 717 162 C 712 147 698 138 686 128 C 670 115 649 105 628 106 Z",
        "M 789 123 C 780 123 777 138 785 142 C 799 152 814 161 826 174 C 847 195 861 222 879 245 C 886 253 901 256 909 247 C 920 236 917 220 915 206 C 912 185 900 164 880 153 C 857 140 831 132 805 125 C 800 124 795 123 789 123 Z",
        "M 857 54 C 848 54 845 69 853 72 C 868 83 884 92 896 106 C 916 127 931 153 948 178 C 956 186 972 187 979 177 C 990 163 985 145 982 130 C 977 111 966 93 947 84 C 923 70 895 62 868 55 C 864 54 861 54 857 54 Z"
    ]
}

Then pass it to HanziWriter from localhost data folder but getting following error.

Anything missing here?

[chanind]

You also need a medians array, which specifies the animation path of the stroke. strokes is the shape of the stroke.

[krmanik]

Thanks, I have added the medians but the individual strokes get flipped. Any idea?
げ.json file

{
    "strokes": [
        "M 195 145 C 184 145 181 160 187 167 C 200 187 194 211 192 233 C 184 284 171 334 164 386 C 151 468 143 552 147 636 C 148 694 150 753 170 808 C 177 829 189 849 208 861 C 223 869 245 863 249 846 C 252 831 245 815 246 800 C 246 766 254 734 261 702 C 266 680 273 660 279 640 C 282 632 280 622 271 619 C 261 616 253 624 250 632 C 245 642 242 652 236 660 C 225 679 217 700 206 718 C 200 696 201 673 199 650 C 195 555 209 460 227 367 C 238 317 255 269 268 220 C 270 200 256 183 243 170 C 230 158 214 146 195 145 Z",
        "M 794 315 C 731 321 670 341 608 352 C 542 365 474 374 407 385 C 398 387 387 390 386 400 C 386 411 398 417 407 421 C 426 430 447 433 467 427 C 520 414 574 407 627 400 C 692 393 756 387 821 382 C 831 381 841 381 850 379 C 861 373 862 357 854 348 C 841 329 818 316 794 315 Z",
        "M 628 106 C 618 106 605 112 605 123 C 607 133 618 138 624 146 C 640 162 640 186 642 208 C 644 251 643 296 644 340 C 644 462 645 585 622 705 C 607 776 578 845 534 904 C 530 911 531 924 541 926 C 554 927 563 916 571 907 C 621 849 665 783 684 708 C 702 635 704 559 707 484 C 710 387 706 290 710 192 C 712 182 721 173 717 162 C 712 147 698 138 686 128 C 670 115 649 105 628 106 Z",
        "M 789 123 C 780 123 777 138 785 142 C 799 152 814 161 826 174 C 847 195 861 222 879 245 C 886 253 901 256 909 247 C 920 236 917 220 915 206 C 912 185 900 164 880 153 C 857 140 831 132 805 125 C 800 124 795 123 789 123 Z",
        "M 857 54 C 848 54 845 69 853 72 C 868 83 884 92 896 106 C 916 127 931 153 948 178 C 956 186 972 187 979 177 C 990 163 985 145 982 130 C 977 111 966 93 947 84 C 923 70 895 62 868 55 C 864 54 861 54 857 54 Z"
    ],
    "medians": [
        [[195,157],[234,202],[157,716],[199,842],[217,847],[266,637]],
        [[397,399],[766,347],[845,357]],
        [[617,120],[687,152],[673,621],[639,790],[543,918]],
        [[794,134],[883,178],[899,242]],
        [[863,64],[947,110],[969,172]]
    ]
}

---

[krmanik]

I visualized it in https://yqnn.github.io/svg-path-editor/ for any error but I think path data correct.

Strokes

Medians

[krmanik]

I have used css property to flip vertically;

.kanji {
  transform: scaleY(-1);
}

And it works,

Any other better solutions?

[chanind]

I'm not sure why, but MakeMeAHanzi data is flipped vertically, so Hanzi Writer just works with that and flips the character back before rendering. If you flip your character data vertically it should work. MakeMeAHanzi character data is always within a 1024 x 1024 bounding box {x: 0, y: -124}, {x: 1024, y: 900}, but notice that the y-axis starts at -124. Again, not sure why this is, but it's just what MakeMeAHanzi does, so Hanzi Writer expects that.

[krmanik]

Okay, Thank you,
In HanziWriter, can we translate the characters? Or are there any other approach?

Can you get the PR for json character data for svgsKana?

[krmanik]

Curved at bottom not getting drawn. What will be the solution?

{"strokes" : ["M 504 281 C 474 281 450 302 422 310 C 380 325 336 333 292 342 C 258 347 224 348 190 343 C 162 338 137 324 113 311 C 107 308 101 312 100 317 C 98 329 107 338 113 346 C 137 375 173 390 210 394 C 269 401 328 388 385 375 C 424 365 463 355 502 346 C 520 341 538 332 549 315 C 554 304 546 290 534 288 C 525 283 514 280 504 281 Z","M 295 89 C 287 88 276 92 275 102 C 274 112 285 117 291 124 C 301 134 309 148 308 163 C 310 219 306 276 306 333 C 304 354 301 376 303 398 C 303 480 303 562 302 644 C 303 671 298 697 297 724 C 293 758 290 792 282 825 C 278 838 273 853 261 860 C 248 866 235 860 223 856 C 204 849 204 909 223 916 C 244 924 268 932 290 924 C 313 917 326 896 334 874 C 348 836 349 794 352 754 C 355 702 357 651 358 599 C 357 569 357 538 357 508 C 358 447 362 387 362 327 C 364 283 364 238 373 195 C 376 179 383 163 379 147 C 373 126 356 110 337 101 C 324 94 310 88 295 89 Z","M 643 503 C 558 504 475 530 399 566 C 359 585 320 607 281 629 C 241 653 202 678 169 711 C 146 736 129 769 133 803 C 134 831 145 859 167 878 C 185 896 199 906 223 916 C 242 923 242 863 223 856 C 202 846 191 836 180 817 C 170 793 180 765 196 746 C 224 710 265 688 303 664 C 351 634 402 609 456 591 C 485 581 515 572 546 565 C 602 554 661 554 714 575 C 750 591 781 623 786 663 C 791 696 785 730 768 758 C 743 800 703 829 663 855 C 638 871 612 884 587 899 C 580 903 573 912 578 920 C 583 929 594 927 602 925 C 644 915 684 897 721 875 C 756 855 789 830 816 800 C 839 774 854 742 856 707 C 858 679 856 649 847 622 C 839 598 824 576 806 560 C 780 535 748 519 714 510 C 691 504 667 502 643 503 Z","M 713 177 C 701 176 694 193 704 200 C 726 217 752 231 768 255 C 791 284 807 317 826 347 C 837 361 857 368 874 363 C 886 357 889 342 889 329 C 888 305 873 284 859 265 C 837 238 810 213 778 199 C 760 190 741 183 722 178 C 719 177 716 177 713 177 Z"],"medians" : [[[111.6,323.2],[174,363.7],[327,362.1],[535.2,309.4]],[[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]],[[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]],[[710,189],[794,229],[868,350]]]}

What to change to make it work?

[chanind]

oh this is really difficult, Hanzi Writer isn't set up to work with strokes that loop back on themselves like Hiragana does because the parts where the stroke overlaps itself will break the SVG animation. Probably we'd need to add support for something like multi-part strokes so that the looping parts of the strokes could be represented by discreet segments, sort of like you do here. Sadly, there's not support for this built-in yet, since this never happens with Chinese characters / Kanji, so there hasn't been a need. It's something that could be added potentially.

In the case you have above, it looks like the median for the second-part of the looping stroke is messed up. It looks like it's going really far off-screen, so it's expecting you to draw that big off-screen part:

In HanziWriter, can we translate the characters? Or are there any other approach?

Currently HanziWriter is hardcoded to expect the character to be flipped vertically, and to be centered within {x: 0, y: -124}, {x: 1024, y: 900}, since that's what MakeMeAHanzi uses. We could add support for different bounding boxes, and non-flipped characters, but it just hasn't been an issue yet since all the data is from MakeMeAHanzi. For now, the easiest solution would just be to make sure all data matches that MakeMeAHanzi format, so you would just need to adjust the data points of your SVG to match that.

Can you get the PR for json character data for svgsKana?

Sadly, this won't be possible without first adding support for multi-part strokes to avoid the issues with strokes looping back on themselves that happens in kana. It should be possible though, just need to put together a PR.

[krmanik]

Thank you explaining all the things.
Hope to see support for loop back strokes in next release.
I will try to implement that if possible by me.

[krmanik]

Earlier I have tried to implement for kana but didn't work.
@ailectra has created the kana data and its working without modifying existing hanzi-writer.js code. It will be nice if the kana data merge to hanzi-writer-data-jp.
https://github.com/ailectra/kana-json

[krmanik]

[chanind]

interesting - so this skips stroke animations to avoid the issues with the stroke looping back on itself?

[Namnp1521]

hi krmanik, pls guide me how to do that json files? by what edittor? thank you so much