JavaFX许愿树程序:Effect功能的应用(1)

分类: JAVAFX技术, 许愿树.
标签: ,

看了同事用写了个许愿树程序(C/S架构的),其中client端的图形界面是由flash来实现。那么如果这个界面用JavaFX来写会怎样呢?我想这一定是很有趣的事情,于是就决定动手写个程序,比较一下。


JavaFX博客:http://www.javafxblogs.com/


首先写个主程序,把画面的Scene做出来。在这个画面中,蓝天背景和白云都需要使用图形效果(effect),在JavaFX中支持了多种图形效果,Lighting,Blur,Shadow等等,可以大大丰富我们的用户界面。我们的程序采用线性渐变(LinearGradient)效果来画蓝天,用高斯模糊(GaussianBlur)效果来画白云,程序如下:

/*
 * Main.fx
 *
 * http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author Henry Zhang
 * JavaFX编程  http://developers.sun.com.cn/blog/henry
 * JavaFX技术交流应用  http://www.javafxblogs.com
 */

var xx = 170;
var yy = 430;

var tree : ImageView = ImageView {
   x: 80
   y: 0
   image: Image {
            url: "{__DIR__}images/tree.png"
            width: 640
            preserveRatio: true
          }
   };

var tree2 =
  Image {
    url: "{__DIR__}images/tree2.png"
    width: 130
    preserveRatio: true
 };

var stage =
  Stage {
    title: "Wish Tree"
    width: 830
    height: 620
    resizable: false

    scene: Scene {
           fill: LinearGradient {
                  startX: 0,
                  startY: 0.0,
                  endX: 0,
                  endY: 1.0
                  proportional: true
                  stops: [
                    Stop { offset: 0.0
                           color: Color.web("#14acf8") },
                    Stop { offset: 1.0
                           color: Color.web("#a4e6f8") }
                         ]
                   }

    content: [
      ImageView {
        x: 50
        y: 280
        image: Image {
                 url: "{__DIR__}images/cloud2.png"
                 preserveRatio: true
                 width: 160
               }
        effect: GaussianBlur { radius: 25 }
      },
      ImageView {
        x: 520
        y: 300
        image: Image {
            url: "{__DIR__}images/cloud2.png"
            preserveRatio: true
            width: 150
            }
        effect:  GaussianBlur { radius: 33 }
      }, // http://www.javafxgame.com  JavaFX Demo Game

      ImageView {
        x: 560
        y: 500
        image: tree2
      },
      ImageView {
        x: 460
        y: 470
        image: tree2
     }, // http://www.compare-review-information.com JavaFX Sample code
      ImageView {
        x: 60
        y: 500
        image: tree2
      },
      ImageView {
        x: 190
        y: 470
        image: tree2
      },

      tree,

      ImageView {
        x: 120
        y: 360
        image: Image {
          url: "{__DIR__}images/sign.png"
          width: 180
          preserveRatio: true
        }
      },
      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect: GaussianBlur { radius: 40 }
      },
      ImageView {
        x: 520
        y: 90
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 100
        }
        effect:  GaussianBlur { radius: 20}
      },
      ImageView {
        x: 620
        y: 190
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 180
        }
        effect:  GaussianBlur { radius: 25}
      },
      ImageView {
        x: 600
        y: 380
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 150
        }
        effect:  GaussianBlur { radius: 33 }
      },
      ImageView {
        x: 0
        y: 490
        image: Image {
          url: "{__DIR__}images/cloud.png"
        }
        effect:  GaussianBlur { radius: 30 }
      },
      Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }
      ]
    }
}


在程序中,我们把Stage的scene属性用渐变效果填充,可以得到蓝天的效果。在这个渐变效果中,startX和endX的值一样,startY和endY的值不同,因此是沿着Y方向(竖直)的渐变方式。起始颜色为深蓝(”#14acf8″),结束颜色为浅蓝(”#a4e6f8″),在整个Stage的Y方向均匀变化,相关代码如下:

       fill: LinearGradient {
               startX: 0
               startY: 0
               endX: 0
               endY: 1.0
               proportional: true
               stops: [ Stop { offset: 0.0 color: Color.web("#14acf8") },
                        Stop { offset: 1.0 color: Color.web("#a4e6f8") }]
             }

白云的模糊效果是通过高斯算法来获取,例如在下面代码中,ImageView的effect属性:
GaussianBlur{ radius: 40 },radius表示模糊渐变发范围的大小,数值越大,模糊度越大。

      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect:  GaussianBlur { radius: 40 }
      }


由于我们需要显示几朵不同大小的白云,我们需要把白云Image(cloud2.png)作大小调整,上面码中,我们通过改变width的值,并设置preserveRatio=true来保证长宽比例不变,这样就“创造”出不同大小的云块。相关代码段如下:( 本文见:http://www.javafxblogs.com )


  preserveRatio: true
  width: 250


还有要说明的一点是,在木牌子上的“许愿树”3个字,我们采用了维度变换( PerspectiveTransform )的效果,可以把2维的文字变成具有3维感觉的字形,呈梯形状。在PerspectiveTransform需要定义梯形的4个角的坐标,从而把原来长方形的区域映射成变形的字体。相关代码如下:

 Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }


好了,到这里许愿树程序的界面就完成了,在下一篇文章中会继续介绍如何在树上“悬挂”愿望星星。如果你有JDK 1.5以上的环境(JDK1.6更佳),快点击下图来看看这个JavaFX版本的“愿望树”吧。当你的浏览器首次运行JavaFX程序时,会有一些等待下载的时间。



点击启动WishTree程序

点击启动程序

参见:http://www.javafxblogs.com( 未完待续, 完整代码可在下一篇文章中下载 )

评论 (0) 2009年05月12日