- 浏览: 149100 次
- 性别:
- 来自: 北京
最新评论
-
mingway:
很强大啊,学习
JavaFX技巧:纯Java代码调用JavaFX的例子 -
jixuan1989:
sun的域名已死
JavaFX 中文学习资源 -
houxuanyun:
个股纷纷
JavaFX技巧:纯Java代码调用JavaFX的例子 -
houxuanyun:
[/size][size=xx-small]
JavaFX技巧:纯Java代码调用JavaFX的例子 -
田智伟:
最近才开始关注javaFX恳请指点!
JavaFX 中文学习资源
( 其他JAVAFX相关参考文章: JavaFX 多维数组 用JavaFX的Effect功能编写许愿树(1) JavaFX 1.1和1.0的兼容性 JavaFX和Java之间的互操作性 JavaFX的Effect功能例子:编写许愿树程序(3) )
在文章“用JavaFX的Effect功能编写许愿树程序(1)”中,我们介绍了用JavaFX作出白云蓝天绿树的构图。接下来我们制作冒泡的动画,使得在白云中不断有气泡升起。然后我们再画上星星。
我们创建一个JavaFX类Bubble,它是javafx.scene.shape.Circle类的子类,然后加上动画就可以实现气泡升腾的效果,我们一起来看看代码:
/* * Bubble.fx * * JavaFX技术交流 http://javafxguy.iteye.com * */ package wishtree; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.scene.effect.GaussianBlur; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import java.lang.Math.*; /** * @author Henry Zhang * JavaFX编程技巧及应用 http://www.javafxblogs.com */ public class Bubble extends Circle { var counter = 0; var startCounter = 10.0; var radiusDelta = -0.15; var destinationY:Double = 200; var timeline : Timeline = Timeline { repeatCount: Timeline.INDEFINITE keyFrames : [ KeyFrame { time : 100ms action: function () { moveOneStep(); } } ] } init { effect = GaussianBlur { radius: 3} fill = Color.WHITE; radius = 4; resetStatus(); timeline.play(); } function moveOneStep() : Void { counter++; if ( counter > startCounter) { if ( not visible ) visible = true; centerY -= 2; radius += radiusDelta; if ( radius < 1 or radius > 4 ) radiusDelta = -radiusDelta; } if ( centerY < destinationY+100 ) { visible = false; if ( opacity > 0.03 ) opacity -= 0.03 else opacity = 0; visible = true; } if ( centerY < destinationY ) { resetStatus(); } } // JavaFX Game Demo http://www.javafxgame.com function resetStatus(): Void { visible = false; centerY = 500 + random()*50; centerX = 200 + random()*350; counter = 0; startCounter = 80 + random()*400; destinationY = 150+random()*30; radius = 1 + random()*2; opacity = 0.6; } }
首先,在init块和resetStatus()函数中我们初始化气泡的大小,透明度,位置等变量。我们在resetStatus()里调用了java.lang.Math里的随机函数random(),使得气泡的出现位置是随机的。从这可以看出JavaFX调用Java的便易性。在确定了初始状态后,我们定义一个动画的时间线(timeline)实例,里面只有一个关键帧(KeyFrame)。相关代码如下:
var timeline : Timeline = Timeline { repeatCount: Timeline.INDEFINITE keyFrames : [ KeyFrame { time : 100ms action: function () { moveOneStep(); } } ] } . . . . function moveOneStep() : Void { counter++; if ( counter > startCounter) { if ( not visible ) visible = true; centerY -= 2; radius += radiusDelta; if ( radius < 1 or radius > 4 ) radiusDelta = -radiusDelta; } if ( centerY < destinationY+100 ) { visible = false; if ( opacity > 0.03 ) opacity -= 0.03 else opacity = 0; visible = true; } if ( centerY < destinationY ) { resetStatus(); } }
每隔100ms,timeline都会调用处理函数moveOneStep(),从而可以不断改变气泡的状态,产生动画效果。在这个函数中,我们需要改变的实例变量有centerY,opacity,visible,radius。counter变量则是作为时间计数器,以控制状态的变化。这样,一个若隐若现、一张一弛不断上升的气泡就完成了。
下一步,我们再创建一个Star类,用来显示悬挂的“愿望星”。每���星星可以看作是个10个结点连线组成的多边形,所以我们通过扩展Polygon类来编制星星的代码,一起来看看:
/*
* Star.fx
*
* http://www.javafxblogs.com
* http://javafxguy.iteye.com
*/
package wishtree;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.*;
import javafx.scene.shape.Polygon;
import java.lang.Math.*;
/**
* @author Henry Zhang
*
* http://www.javafxblogs.com http://javafxguy.iteye.com
*
*/
public class Star extends Polygon {
def r1 : Double = 18;
def r2 : Double = r1 / 1.6;
var r = [r1, r2];
var strokeColor =
[ Color.PINK, Color.YELLOW, Color.GOLDENROD, Color.CYAN,
Color.PURPLE, Color.BLUEVIOLET, Color.CORAL, Color.CRIMSON ];
var fillColor =
[ Color.GOLD, Color.BLUE, Color.RED, Color.DARKSLATEBLUE,
Color.DARKORANGE, Color.MAGENTA, Color.BROWN, Color.CHOCOLATE ];
init {
// compute the coordinates of the star polygon
points = for ( i in [0..9] ) [
r[i mod 2] * cos( toRadians(i*36) ),
r[i mod 2] * sin( toRadians(i*36) )
];
blocksMouse = true;
strokeWidth = 1; // 本文 发 表 于 http://javafxguy.iteye.com
var which : Integer = random() * sizeof(strokeColor) as Integer;
stroke = strokeColor[which];
fill = LinearGradient {
startX: 0 startY: 0 endX: 0 endY: 1.0
proportional: true
stops: [
Stop { offset: 0.1 color: Color.WHITE }
Stop { offset: 1.0 color: fillColor[which] }
]
};
effect = DropShadow { color: Color.WHITE };
}
}
在init块中,我们用for语句来计算星星的10个接点,每次循环产生一个节点的(x,y)坐标,共计10组,最后产生的一个sequence赋值给points变量,我们可以看到JavaFX的代码非常简洁:
points = for ( i in [0..9] ) [ r[i mod 2] * cos( toRadians(i*36) ), r[i mod 2] * sin( toRadians(i*36) ) ];
fill变量我们再次采用了LinearGradient的渐变效果,填充的颜色是随机选择的。我们还增加了DropShadow的影子效果,在星星的背后加上了白色的影子,增强了视觉效果。blocksMouse属性是屏蔽鼠标事件传给星星下面的其他图形。
这个星星类产生的实例位置都是在坐标(0,0)的位置,在下面的程序中,我们会通过改变translateX和translateY的值,动态地把星星挂在树上。
我们对Main.fx略为修改一下,首先把数个泡泡加入scene中:
for ( i in [1..5] ) Bubble { }
然后在许愿树的图形上增加鼠标点击的处理,每当点击到树叶和树枝时,会在该处挂上一颗星星,在鼠标事件(MouseEvent)中,x,y属性可以告诉我们点击的位置,然后我们就可以设置星星出现的地方。通过insert操作,我们把新创建的星星增加到scene中。注意,这里采用了currentIndex计数器来确保星星是出现在云层下方,我们可以看到被云层遮掩的星星:
var tree : ImageView = ImageView { x: 80 y: 0 image: Image { url: "{__DIR__}images/tree.png" width: 640 preserveRatio: true } onMousePressed: function(e:MouseEvent) : Void { if ( e.y < 343 ) { var s = Star{ translateX: e.x translateY: e.y } ; insert s after stage.scene.content[currentIndex++]; } } };
完整的代码如下:
/* * Main.fx * * http://www.javafxblogs.com http://javafxguy.iteye.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 currentIndex = 0; var tree : ImageView = ImageView { x: 80 y: 0 image: Image { url: "{__DIR__}images/tree.png" width: 640 preserveRatio: true } onMousePressed: function(e:MouseEvent) : Void { if ( e.y < 343 ) { var s = Star{ translateX: e.x translateY: e.y } ; insert s after stage.scene.content[currentIndex++]; } } }; 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 ImageView { x: 560 y: 500 image: tree2 }, ImageView { x: 460 y: 470 image: tree2 }, // JavaFX Sample code ImageView { x: 60 y: 500 image: tree2 }, ImageView { x: 190 y: 470 image: tree2 }, tree, // “用JavaFX的Effect实现许愿树(1)” 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 } }, for ( i in [1..5] ) Bubble { }, 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 } } ] } } //用JavaFX的Effect功能编写许愿树程序 var idx = for ( n in stage.scene.content ) if ( n == tree ) indexof n else [] ; currentIndex = idx[0];
现在代码基本完整了,每次点击愿望树,都会生成一个五彩的星星,快来点击下面点击下面截图挂颗愿望星吧(JDK 1.5以上的环境,最好是JDK1.6 U10以上):
在下一篇文章中,我们介绍如何把愿望写在星星上。
未完待续, 完整代码可在下一篇文章中下载:
更多文章:
JavaFX技术应用博客 JavaFX许愿树程序:Effect功能的应用(2) JavaFX 多维数组的使用
JavaFX技术交流和应用 JavaFX的Effect功能例子:编写许愿树程序(3)
发表评论
-
JavaFX技巧介绍
2009-11-15 20:39 2532Javafx的官网中发布了一系列实用的JavaFX编程技巧 ... -
端到端的JavaFX完整示例:许愿树 Online版
2009-08-19 21:33 3577JavaFX的主要功能是作为富客户端开发平台。在实际的应用中, ... -
怎样在JavaFX中实现菜单
2009-08-01 00:07 9281也许是JavaFX设计者认为在RIA中有没有菜单无足轻重,当前 ... -
Java的Swing应用中使用JavaFX的功能
2009-07-06 15:56 7459本文本来打算在JavaFX论 ... -
JavaFX技巧:纯Java代码调用JavaFX的例子
2009-06-21 18:17 10598自JavaFX 1.0发布之后,本人撰写的文章Jav ... -
怎样用JavaFX编写游戏:吃豆人(Pac-Man)之四
2009-06-20 17:45 3758加入javafx 圈子 JavaFX吃豆 ... -
怎样用JavaFX编写游戏:吃豆人(Pac-Man)之三
2009-06-07 00:07 2031本周发表了第4篇文章。在这篇文章中,主要介绍 ... -
怎样用JavaFX编写游戏:吃豆人(Pac-Man)之二
2009-05-29 23:49 2548上周介绍了关于编写JavaFX吃豆人游戏的前2篇文章。本周发表 ... -
怎样用JavaFX编写游戏:吃豆人(Pac-Man)
2009-05-22 17:33 7438去年在JavaFX 1.0发布不久 ... -
JavaFX的Effect功能例子:编写许愿树程序(3)
2009-05-18 13:40 2024重点推荐JavaFX文章:怎样用JavaFX编写游戏:吃豆 ... -
JavaFX的Effect功能例子:编写许愿树程序 (1)
2009-05-12 17:40 5007相关文章: [在JavaFX使用多维数组 ] [自己 ... -
在JavaFX 如何使用多维数组
2009-05-10 19:06 2368JavaFX中的sequence是和java语言的数组类似的一 ... -
自己编程写的JavaFX 演示游戏,请大家看看
2009-01-02 23:50 170982009-05-22:重点推荐JavaFX文章: 怎样用Jav ...
相关推荐
JavaFX+官方教程:RIA+应用开发
javafx2.0,java,javafx,例子,代码 Sun公司(已于20092008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语 言开发富互联网应用程序(RIA)。JavaFX Script编程语言(以下称为JavaFX)是Sun微...
JavaFX 官方教程:RIA 应用开发
javaFX 3D API 实现水分子模拟结构 idea工程
JavaFx 官方源码例子,功能强大适合初学者,高手学习研究,建议用官方提供的netbean开发打开
javafx的单机版许愿树,从网上看到的实例,学习了一下加了几行代码,备份
资源名称:JavaFX 官方教程:RIA 应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数...
资源名称:JAVA FX官方教程:RIA应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数百万...
javafx之fxml例子_用户登录,基于netbeans javafx fxml实例
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 7: Graphics Chapter 8: ...
JavaFX 构建GUI 应用程序 第1 课:JavaFX GUI 简介 第2 课:使用声明性语法 ........ 第8 课:使GUI 元素具有交互
JavaFX高级教程:JavaFX2.0的FXML语言.docx 官方中文文档
JavaFX高级教程:部署JavaFX2.0应用 官方中午文档
Javafx 2.0: Introduction by Example
Wish Tree,许愿树,帮助你实现梦想园地,使用JavaFX语言开发的一个小程序,希望对学习JavaFX的朋友有一定的帮助。
JavaFX Script编程语言(以下称为JavaFX)是Sun微...JavaMail是实现邮件发送和接收功能而提供的一套标准开发类库,支持常用的邮件协议,如SMTP、POP3、IMAP,开发人员使用JavaMail编写邮件程序时,无需考虑底层的...
一个使用javafx编写电子相片管理程序 1. 系统分析 前言:随着数码相机的普及,越来越多的人拥有大量的数字像片。本程序的目的是编写一个能够对数字像片进行管理和查看的应用程序。 1.1 问题描述 图片管理器可作为...
使用 JavaFX 客户端平台用 Java 编写的扫雷游戏。 在 Eclipse 中打开扫雷 使用您最喜欢的 git 客户端,克隆存储库。 Windows 用户可以使用 。 $ git clone https://github.com/foobarman/javafx-minesweeper.git ...
JavaFX_SqliteDB 与SQLite数据库集成 这是一个简单的应用程序,它: 创建一个SQLite数据库 使用javabeans 扩展菜单 SQL查询:preparedstatement 枚举 XML文件 下载正在运行的应用程序的副本: 影片示范 笔记 ...
NULL 博文链接:https://somefuture.iteye.com/blog/1290256