A desktop web application for learning Chinese and its character stroke order.
By default, when you execute npm start, the application runs on
http://localhost:1275. You can change the port and all other Express
settings in the index.js file.
The current characters are cached in client/cache/. At the moment, the client
applications needs the server to fetch the stroke order for characters it
doesn't know. If you want the page to be static, set the USE_CACHE_ONLY
flag to true in client/js/main.js.
If you are interested in how the stroke order is internally represented, enter
something like http://localhost:1275/strokeorder/我 into your web browser.
A JSON structure will appear which encodes the vector image for each stroke.
The stroke order sequence is courtesy of
EON Media Limited. When you visit a page like
Chinese Hideout which
uses EON's API, the canvas shown is very static and all in all the page doesn't
look nice. I wanted to change that, so I reverse-engineered the API so that
this project uses SVGs on the client side instead of canvases. Together with
CSS3, this makes animating the stroke order so easy that only stuff like
transition: clip-path 0.2s; and clip-path: inset(...) is needed for
the individual SVG paths.
Visit sigalor.github.io/chinese-learner to try out this application.