Leon Fan's Weblog: All things about technology

Traditional Chinese handwriting is beautiful and elegant, and it is symbol of chinese traditional spirit. I am interesting in how we can emulate it in JavaFX. Here I create a simple demo to show it.

• Make sure you have image editor like Adobe Illustrator or Photoshop
• Download JavaFX 1.1 Production Suite and install it.
• Create a serial of layers in photoshop which demo the whole chinese character writing process. Here I create 11 layers to show one chinese character.
  
• Following tutorial: Getting Started With JavaFX 1.1 Production Suite, we can export our pictures into .fxz file which can be use in JavaFX. You need uncheck "Preserve 'JFX:' IDs only" during exporting to get an id for each node in exported file:

• Create a new JavaFX project in NetBeans and copy that exported file into your project

In NetBeans project, I only need writing few line of code to make it work:

var content = FXDLoader.loadContent("{__DIR__}res/handwriting.fxz");
var x: Integer;

Timeline {
  repeatCount: Timeline.INDEFINITE
  keyFrames: [
    at(0s) { x => 1 },
    at(3s) { x => 11 tween Interpolator.LINEAR}
  ]
}.play();

var node = bind content.getNode("layer{x}");

Stage {
    title: "Application title"
    width: 425
    height: 425
    scene: Scene {
        content: bind [content.getNode("background"), node]
        }
}
      

Here is the demo:

Here is java web start way to run it as desktop: Traditional Chinese Handwriting Demo