Example code stroke json data

[tingan]

Hi, void initState() { super.initState(); _pageController = PageController(); _strokeOrderAnimationControllers = [ StrokeOrderAnimationController( "{'strokes': ['M 440 788 Q 497 731 535 718 Q 553 717 562 732 Q 569 748 564 767 Q 546 815 477 828 Q 438 841 421 834 Q 414 831 418 817 Q 421 804 440 788 Z', 'M 532 448 Q 532 547 546 570 Q 559 589 546 601 Q 524 620 486 636 Q 462 645 413 615 Q 371 599 306 589 Q 290 588 299 578 Q 309 568 324 562 Q 343 558 370 565 Q 406 575 441 587 Q 460 594 467 584 Q 473 566 475 538 Q 482 271 470 110 Q 469 80 459 67 Q 453 61 369 82 Q 342 95 344 79 Q 411 27 450 -13 Q 463 -32 480 -38 Q 490 -42 499 -32 Q 541 16 540 77 Q 533 207 532 403 L 532 448 Z', 'M 117 401 Q 104 401 102 392 Q 101 385 117 377 Q 163 352 192 363 Q 309 397 320 395 Q 333 392 323 365 Q 280 256 240 205 Q 200 147 126 86 Q 111 73 122 71 Q 132 70 153 80 Q 220 114 275 172 Q 327 224 394 362 Q 404 384 416 397 Q 431 409 422 419 Q 412 432 374 445 Q 353 455 305 434 Q 215 412 117 401 Z', 'M 567 407 Q 639 452 745 526 Q 767 542 793 552 Q 817 562 806 582 Q 793 601 765 618 Q 740 634 725 632 Q 712 631 715 616 Q 719 582 641 505 Q 601 465 556 420 C 535 399 542 391 567 407 Z', 'M 556 420 Q 543 436 532 448 C 512 470 515 427 532 403 Q 737 114 799 116 Q 871 126 933 135 Q 960 138 960 145 Q 961 152 930 165 Q 777 217 733 253 Q 678 296 567 407 L 556 420 Z'], 'medians': [[[428, 824], [503, 781], [533, 756], [539, 741]], [[309, 579], [358, 580], [462, 613], [482, 608], [508, 581], [505, 121], [500, 59], [478, 24], [355, 78]], [[110, 391], [149, 384], [198, 387], [322, 418], [339, 417], [367, 402], [345, 333], [273, 208], [201, 129], [125, 78]], [[725, 621], [743, 596], [749, 578], [743, 570], [656, 489], [569, 421], [569, 415]], [[532, 441], [551, 399], [568, 378], [678, 259], [750, 194], [801, 163], [954, 145]]], 'radStrokes': [1, 2, 3, 4]}", this, above code snippet is from the example project of stroke order animation, I don't understand it. how you generate the "{'strokes': ['M 440 788 Q 49 .... why not just use real hanzi character like "永", if i want to show another hanzi character strokes, how can i do? how can I get these "{'strokes': ['M 440 788 Q 497. Thanks.

[Mr-Pepe]

You can find the stroke order data in the Make Me a Hanzi project. You can download the data for offline usage directly from here.

This package was originally designed for offline use and leaves it to the user to provide the data.

I you want to download the data for a character directly, you can download it, e.g., for 永, from here: https://cdn.jsdelivr.net/npm/hanzi-writer-data@2.0.1/%E6%B0%B8.json

[tingan]

Thank you very much for helping. But in Make me a hanzi project, I only find the many SVG files for different characters. there is no such json file for character. I wonder how do they convert svg file into the required stroke JSON file. because If the offline data don't container some character, later maybe i can convert the svg file for the missing character. as the hanzi-write-data project did contain the json files for each character. But it seems there is no tools to connect or convert from svg file to json file. I still don't know how they did this. make me a hanzi svg file to hanzi-write-data json file. But your help is enough for me to go forward. Thanks.

[Mr-Pepe]

You can find the JSON data for stroke orders here.

The Make Me a Hanzi project deals with exactly the problem of getting stroke information from SVGs. I have never really looked into the details but I think it has something to do with Voronoi diagrams. Feel free to check out the project. Unfortunately, it's pretty dead now and I don't know if there is a maintained fork.