相关文章:
[在JavaFX使用多维数组
] [自己编程写的JavaFX 演示游戏
] [JavaFX和Java之间的互操作性
] [JavaFX的Effect功能例子:编写许愿树程序(2)
] [JavaFX的Effect功能例子:编写许愿树程序(3)
]
本文着重介绍了用JavaFX的effect功能来实现用户图形界面(GUI)。
看了同事用NetBeans来开发PHP的许愿树程序(C/S架构的),其中client端的图形界面是由flash来实现。那么如果这个界面用JavaFX来写会怎样呢?我想这一定是很有趣的事情,于是就决定动手写个程序,比较一下。
我们首先写个主程序,把画面的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://javafxguy.iteye.com
* 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 }
}, ( JavaFX Demo Game http://www.javafxgame.com )
ImageView {
x: 560
y: 500
image: tree2
},
ImageView {
x: 460
y: 470
image: tree2
},
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方向均匀变化,相关代码如下:(作者:Henry Zhang 发表于:http://javafxguy.iteye.com)
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来保证长宽比例不变,这样就“创造”出不同大小的云块。相关代码段如下:
(本文参见:JavaFX许愿树
http://www.javafxblogs.com/javafx-effect-wish/)
preserveRatio: true
width: 250
还有要说明的一点是,在木牌子上的“许愿树”3个字,我们采用了维度变换( PerspectiveTransform )的效果,可以把2维的文字变成具有3维感觉的字形,呈梯形状。在PerspectiveTransform需要定义梯形的4个角的坐标,从而把原来长方形的区域映射成变形的字体。相关代码如下: (作者:Henry Zhang 发表于:http://javafxguy.iteye.com)
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 U10以上更佳),快点击下图来看看这个JavaFX版本的“愿望树”吧。当你的浏览器首次运行JavaFX程序时,会有一些等待下载的时间。
本文同步发表于:JavaFX编程应用:许愿树
( 未完待续, 下一篇: 用JavaFX的Effect功能编写许愿树程序(2)
)
Hobby Master 飞机 坦克 军事 模型
JavaFX例子和实例
JavaFX培训教程
分享到:
- 2009-05-12 17:40
- 浏览 5014
- 评论(0)
- 论坛回复 / 浏览 (0 / 2377)
- 查看更多
相关推荐
JavaFX+官方教程:RIA+应用开发
javafx2.0,java,javafx,例子,代码 Sun公司(已于20092008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语 言开发富互联网应用程序(RIA)。JavaFX Script编程语言(以下称为JavaFX)是Sun微...
JavaFX 使用指南 JavaFX 是一个基于 Java 语言的软件平台,...JavaFX 是一个功能强大且灵活的平台,适用于开发桌面应用程序、移动应用程序和网络应用程序。但是,JavaFX 的学习曲线陡峭,需要一定的编程经验和知识。
JavaFX 官方教程:RIA 应用开发
JavaFx 官方源码例子,功能强大适合初学者,高手学习研究,建议用官方提供的netbean开发打开
javaFX 3D API 实现水分子模拟结构 idea工程
javafx的单机版许愿树,从网上看到的实例,学习了一下加了几行代码,备份
资源名称:JavaFX 官方教程:RIA 应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数...
资源名称:JAVA FX官方教程:RIA应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数百万...
javafx之fxml例子_用户登录,基于netbeans javafx fxml实例
Chapter 1: Getting Started Chapter 2: JavaFX and Jigsaw Chapter 3: JavaFX Fundamentals Chapter 4: Lambdas and Properties Chapter 5: Layouts and Scene Builder Chapter 6: User Interface Controls Chapter...
JavaFX高级教程:JavaFX2.0的FXML语言.docx 官方中文文档
JavaFX 构建GUI 应用程序 第1 课:JavaFX GUI 简介 第2 课:使用声明性语法 ........ 第8 课:使GUI 元素具有交互
JavaFX_SqliteDB 与SQLite数据库集成 这是一个简单的应用程序,它: 创建一个SQLite数据库 使用javabeans 扩展菜单 SQL查询:preparedstatement 枚举 XML文件 下载正在运行的应用程序的副本: 影片示范 笔记 ...
JavaFX高级教程:部署JavaFX2.0应用 官方中午文档
Javafx 2.0: Introduction by Example
* Effect:Effect 是 JavaFx 中的效果类,提供了视觉效果的功能。 * Image:Image 是 JavaFx 中的图像类,提供了图像处理的功能。 * Media:Media 是 JavaFx 中的媒体类,提供了音频和视频处理的功能。 JavaFx 函数...
Wish Tree,许愿树,帮助你实现梦想园地,使用JavaFX语言开发的一个小程序,希望对学习JavaFX的朋友有一定的帮助。
一个使用javafx编写电子相片管理程序 1. 系统分析 前言:随着数码相机的普及,越来越多的人拥有大量的数字像片。本程序的目的是编写一个能够对数字像片进行管理和查看的应用程序。 1.1 问题描述 图片管理器可作为...
JavaFX Script编程语言(以下称为JavaFX)是Sun微...JavaMail是实现邮件发送和接收功能而提供的一套标准开发类库,支持常用的邮件协议,如SMTP、POP3、IMAP,开发人员使用JavaMail编写邮件程序时,无需考虑底层的...