Render your Japanese writings with fun and taste
For the sake of simplicity, "Draw Me A Kanji" is shortened to dmak
Using dmak.js is easy, a lot easier than writing kanjis!
And... that's it! Include both
dmak.js files in your HTML file.
Up to you to use either:
or the jQuery plugin
NOTE: You need to include the additional
Dmak.js comes with a whole set of options to alter the way it behaves. Here is an explicit list of all parameters available to you followed by their default value.
uri- path to the SVG files folder.
skipLoad- skip SVG files loading.
autoplay- start drawing as soon as all SVG files are loaded.
height- height in pixels of a single paper surface.
width- width in pixels of a single paper surface.
viewBox.x- x position of the canvas.
viewBox.y- y position of the canvas.
viewBox.w- width of the canvas.
viewBox.h- height of the canvas.
step- positive integer which defines the speed of the drawing.
element- DOM element or its ID which is going to be a parent for drawing surface.
stroke.animated- enable or disable stroke animation.
stroke.order.visible- display stroke order.
stroke.order.attr.font-size- stroke order font size in pixels.
stroke.order.attr.fill- stroke order color.
stroke.attr.active- currently drawn stroke color.
stroke.attr.stroke- stroke color (can use "random" keyword here for random color).
stroke.attr.stroke-width- stroke width in pixels.
stroke.attr.stroke-linecap- ["butt", "square", "round"].
stroke.attr.stroke-linejoin- ["bevel", "round", "miter"].
grid.show- show or hide gridlines.
grid.attr.stroke- grid color.
grid.attr.stroke-width- grid width in pixels.
grid.attr.stroke-dasharray- ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."].
loaded- callback function which is executed when all SVG files are fully loaded
erased- callback function which is executed when a stroke is erased
drew- callback function which is executed when a stroke is drawn
- Chrome 1.0+
- Firefox 16.0+ (see: bugzilla.mozilla.org/show_bug.cgi?id=902879)
- Opera 17.0+
- Safari 3.0+
- IE 10.0+ (animation not supported)
- From @jakearchibald and his great article on Animated line drawing in SVG
- From @akeru and his kanjiviewer.js library.
And of course a huge thanks and support to KanjiVG for providing a whole set of SVG files.
Check Release list.
- Install nodejs
- Install grunt-cli
- Process dependencies by running
npm installin the repository root folder
- Build a new release by invoking
gruntin the repository root folder