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!
Prerequisite
All the hard work with SVG is done by Raphaël, a cool and simple Javascript library to play with vector graphic on the Web.
And... that's it! Include both raphael.js
and dmak.js
files in your HTML file.
Up to you to use either:
<div id="draw"></div>
<script>
var dmak = new Dmak('電車', {
'element' : "draw"
});
</script>
<div id="draw"></div>
<script>
// That's it!
$("#draw").dmak('電車');
</script>
NOTE: You need to include the additional jquery.dmak.js
file
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. false
autoplay
- start drawing as soon as all SVG files are loaded. true
height
- height in pixels of a single paper surface. 109
width
- width in pixels of a single paper surface. 109
viewBox.x
- x position of the canvas. 0
viewBox.y
- y position of the canvas. 0
viewBox.w
- width of the canvas. 109
viewBox.h
- height of the canvas. 109
step
- positive integer which defines the speed of the drawing. 0.03
element
- DOM element or its ID which is going to be a parent for drawing surface. "draw"
stroke.animated
- enable or disable stroke animation. true
stroke.order.visible
- display stroke order. false
stroke.order.attr.font-size
- stroke order font size in pixels. 8
stroke.order.attr.fill
- stroke order color. #999999
stroke.attr.active
- currently drawn stroke color. "#BF0000"
stroke.attr.stroke
- stroke color (can use "random" keyword here for random color). "#2C2C2C"
stroke.attr.stroke-width
- stroke width in pixels. 4
stroke.attr.stroke-linecap
- ["butt", "square", "round"]. "round
stroke.attr.stroke-linejoin
- ["bevel", "round", "miter"]. "round
grid.show
- show or hide gridlines. true
grid.attr.stroke
- grid color. "#CCCCCC"
grid.attr.stroke-width
- grid width in pixels. 0.5
grid.attr.stroke-dasharray
- ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]. "--"
loaded
- callback function which is executed when all SVG files are fully loadederased
- callback function which is executed when a stroke is eraseddrew
- callback function which is executed when a stroke is drawnFor basic samples please refer to demo folder, otherwise dive into drawmeakanji.com source code.
And of course a huge thanks and support to KanjiVG for providing a whole set of SVG files.
Check CONTRIBUTING.md
Check Release list.
npm install
in the repository root foldergrunt
in the repository root folderDraw Me A Kanji (dmak.js) was created by Matthieu Bilbille and released under the MIT License.