search

hugolpz / animCJK

Draw animated Japanese characters (Kanji and Kana) and Chinese characters (Hanzi) in correct stroke order using svg, free open-source code.
https://hugolpz.github.io/animCJK/
1 stars 0 forks source link

Hack the image factory #1

Closed hugolpz closed 3 years ago

hugolpz commented 3 years ago

Finally, I dit it (pure javascript+HTML, nothing else): http://gooo.free.fr/animCJK/official/samples/imageFactory.html Note 1: the svgs folder of the demo online contains only the MakeMeAHanzi svg for the characters 鼠貓牛虎兔龍蛇馬羊猴雞狗 Note 2: the same code can generate images for any characters of animCJK project or MakeMeAHanzi project. Just put the svg files you need in the svgs folder (see below)

To make a demo on your own website that use all the svgs of MakeMeAHanzi project:

  1. create a folder named "imageFactory" (any other name is ok)
  2. create a subfolder of your "imageFactory" folder called "samples"
  3. get "imageFactory.html" file from animCJK project (https://github.com/parsimonhi/animCJK/tree/master/samples), put it in your "samples" folder.
  4. create a subfolder of your "samples" folder called "_js"
  5. get "Animated_GIF.js" and "magicAcjk.js" from animCJK project (https://github.com/parsimonhi/animCJK/tree/master/samples/_js), put them in your "_js" folder. Note that "Animated_GIF.js" can also be downloaded from Animated_GIF project (https://github.com/sole/Animated_GIF/dist). Note that Animated_GIF project itself is derived from several other projects. Update 2018/11/05: get also "brushingAcjk.js" from animCJK project.
  6. get the "svgs" folder from MakeMeAHanzi project (https://github.com/skishore/makemeahanzi), put it in your "imageFactory" folder, or if you already put the "svgs" folder elsewhere on your website, replace "../svgs/" in "imageFactory.html" file by a relative path to your "svgs" folder.

You can also use the svg of animCJK that are in its "svgsJa" and "svgsZhHans" folders (https://github.com/parsimonhi/animCJK/tree/master), but here, it's the MakeMeAHanzi project blog! ;-)

Pending issue: no transparency for the animated gif images.

Any comments are welcome.

Have fun!