JavaFX, 之“立体”球

Author: Silveira

原文

这是一个展示JavaFX 2D图形，特效，渐变的简单教程。

首先我们创建一个Frame，在坐标（120，140）处绘制一个长60像素，宽20像素，黑色填充的椭圆。然后再坐标（100，100）处绘制一个半径为50，红色填充的圆。组合起来以后，圆看起来就像一个立体的球，而椭圆则是他的阴影。

1. import javafx.application.*;
2. import javafx.scene.paint.*;
3. import javafx.scene.geometry.*;
5. Frame {
6. title: "JavaFX Sphere", width: 300, height: 300, visible: true
7. stage: Stage {
8. content: [
9. Ellipse {
10. centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
11. fill: Color.BLACK
12. },
13. Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
14. ]
15. }
16. }

import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.geometry.*;  Frame {     title: "JavaFX Sphere", width: 300, height: 300, visible: true     stage: Stage {         content: [             Ellipse {                  centerX: 120, centerY: 140, radiusX: 60, radiusY: 20                  fill: Color.BLACK             },             Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }         ]     } } 

现在添加点特效让他更加逼真。

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

首先我们得把引用加到Import中，import javafx.scene.effect.*，然后调用gaussian blur effect（高斯渐变？）效果到椭圆上，代码如下：

1. effect: GaussianBlur{ radius: 20 }

effect: GaussianBlur{ radius: 20 } 

就这样简单的一句话，特效就出来了，下面是原来的椭圆： 这个是添加了渐变的椭圆：

现在我们给圆添加一个RadialGradient(光线渐变？）让他看起来更像一个球。代码如下：

1. RadialGradient {
2. centerX: 75, centerY: 75, radius: 50, proportional: false
3. stops: [
4. Stop {offset: 0.0 color: Color.WHITE},
5. Stop {offset: 0.3 color: Color.RED},
6. Stop {offset: 1.0 color: Color.DARKRED},
7. ]
8. }

RadialGradient {    centerX: 75, centerY: 75, radius: 50, proportional: false    stops: [       Stop {offset: 0.0 color: Color.WHITE},       Stop {offset: 0.3 color: Color.RED},       Stop {offset: 1.0 color: Color.DARKRED},    ] } 

首先让我们来看颜色是如何变化的，从白色开始，在30%的位置变化为红色，剩下的部分渐变到深红色。这样制造出来的渐变如下： 对应于我们的光线渐变，指定坐标在(75,75)，半径为50.则其效果如下图：

在应用光学渐变之前，我们的圆如下： 应用渐变之后变得立体起来：

完整的代码如下，简单明了

1. import javafx.application.*;
2. import javafx.scene.paint.*;
3. import javafx.scene.effect.*;
4. import javafx.scene.geometry.*;
6. Frame {
7. title: "JavaFX Sphere", width: 300, height: 300, visible: true
8. stage: Stage {
9. content: [
10. Ellipse {
11. centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
12. fill: Color.BLACK
13. effect: GaussianBlur{ radius: 20 }
14. },
15. Circle {
16. centerX: 100, centerY: 100, radius: 50
17. fill: RadialGradient {
18. centerX: 75, centerY: 75, radius: 50, proportional: false
19. stops: [
20. Stop {offset: 0.0 color: Color.WHITE},
21. Stop {offset: 0.3 color: Color.RED},
22. Stop {offset: 1.0 color: Color.DARKRED},
23. ]
24. }
25. }
26. ]
27. }
28. }

import javafx.application.*; import javafx.scene.paint.*; import javafx.scene.effect.*; import javafx.scene.geometry.*;  Frame {     title: "JavaFX Sphere", width: 300, height: 300, visible: true     stage: Stage {         content: [             Ellipse {                 centerX: 120, centerY: 140, radiusX: 60, radiusY: 20                 fill: Color.BLACK                 effect: GaussianBlur{ radius: 20 }             },             Circle {                 centerX: 100, centerY: 100, radius: 50                 fill: RadialGradient {                     centerX: 75, centerY: 75, radius: 50, proportional: false                     stops: [                         Stop {offset: 0.0 color: Color.WHITE},                         Stop {offset: 0.3 color: Color.RED},                         Stop {offset: 1.0 color: Color.DARKRED},                     ]                 }             }         ]     } } 

最终效果截图

10个高质量Icon图标资源网站

Copy From:http://softbbs.pconline.com.cn/9038608.html

如果你是一名Web前端设计师的话，那么在页面设计过程中，你肯定为找不到合适的修饰图标而郁闷过，当然，我也不例外，所以当我看到这个介绍高 质量Icon图标资源的文章时，就像是激流中突然抓住了一棵救命稻草一样，可能，这些高质量的Icon图标资源也会让你有同样的感受吧。

Vistaicons Iconspedia fasticon Iconarchive freeiconsdownload dryicons BestFreeIcons icondrawer feedicons freeiconsweb

JavaFX之 Digital Number

JavaFX对2D的支持比Swing要好多了，Swing只是给你了一张白白的画布和一只笔，看似自由度很高，不过复杂性也同样比较高，因为所有的都是一笔一画出来的。

JavaFX里面就不一样了，类似Swing里面的Component，JavaFX geometry包下面的对象就是一些经过包装过的常用2D对象，它们都继承与javafx.scene.Node且实现了javafx.animation.Interpolatable接口，所以都具有事件处理，缩放，坐标转换，角度转换的功能，有了这些就可以轻松的绘制你想要的图形，并且是具备事件处理，很方便就能交互的图形。

我的老主板有一个监控软件，可以显示CPU，主板温度，风扇转速，其中转速这里是用 的类似电子表里面的数字显示，感觉还是比较漂亮的，以前学Swing的时候也想照着做一个，不过全无头绪，现在看见JavaFX了，自然眼前一亮，用Geometry包绝对很简单。

先来个截图： 点击Button按钮，下面的数字加1再Mod 10, 代码不多，也就花了半天时间，主要的思路就是把数字分成八个部分，然后先绘制好第一个部分，剩下的部分通过转换位置，角度来实现，至于透明效果，javaFX里面只需要指定窗口样式为透明，Fill为Null就可以，简单！！ 源代码

Java SE 6 Update 10 RC

前段时间去下JDK的时候还是Beta，现在已经是RC了，估计离正式发布也不远了，呵呵,最近看的JavaFX里面用到了桌面透明和不规则窗口，都需要Update 10才行啊，早点出吧。 New Feature Download

JavaFX之我见

RIA从去年到现在一直是一个很热门的话题，从微软的SliverLight,到Adobe的Flex，Java的JavaFX，谁会是未来的主流，谁会成为最终的胜者，现在都还难以定论。就开发状态而言，SliverLight现在是Beta2，Flex也已经到Version3了，JavaFX从去年开始我就看到过了，不过一年的时间过去了，前段时间才出Preview，哎，说实话，Java的东西最大的优势还是在于有一大堆开源免费的解决方案，不然也真的看不出什么好的了，最近我同事一直在关注SliverLight，SliverLight我始终还是提不起兴趣，微软的东西，看上去很美，谁用谁知道吧。Flex也不想去尝试，Flex跟SliverLight也是一路货啊，很强大，不过都是价格不菲，按说盗版真没发达，搞个盗版来玩玩还是很容易的，不过盗版用起来总是让人感觉挺悬乎的。所以最终我还是选择JavaFX学学吧，就算到时候JavaFX很垃圾了，似乎也还可以转到Flex去，就像JavaFX的Hans Muller 一样转战Flex。

这几天都在看JavaFX的相关资料，总体感觉JavaFX还是很强的，不过关于JavaFX的资料太少了，或许你会不相信，Google上搜索一下JavaFX，1,750,000个相关结果，关键的关键是JavaFX的改动太大了，从去年到现在，以前的JavaFX只有3个常用的包，javafx.ui,javafx.ui.canvas,这两个Package在现在的Preview里面已经完全空空如也，这么大的改动Sun也不说一声，害得我下了一本JavaFX的书，准备看图索骥，边看边练，结果HelloWorld都跑不通，还好NetBeans里面有Code Snippet，用了这个才完成了Hello World，汗。。。

而且Java官方网站的例子实在太少了，教程也少得可怜，像API doc，我一开始在网站上找了很久都没找到，后来偶然间打开Preview SDK的安装目录，才知道API Doc藏得这么深，，这个API Doc从界面上来说比以前传统的JavaAPI Doc好看多了，不过里面的内容很多都很“简洁”。 还有一些杂七杂八的让人感觉很不爽的东东，比如说www.javafx.com这个网站,应该也算JavaFX的一个门面了，在FireFox里面看起来还是比较酷的，不过在IE里面就不行了，页面都乱了，哎，粗制滥造啊。还有JavaFX Preview本身的问题，JavaFX里面有些特性是需要JDK Update 10Beta版的，比如窗口透明特性，这点Sun应该在官方网站上说明，我第一天用Preview的时候，Netbeans无故死了好几次，后来想想可能是代码的预览功能，每改动一次代码，预览界面就会刷新一下，这个刷新的过程比较卡，我编HelloWorld的时候都需要好几秒，而且预览界面似乎就是简单的Run了一下，这样每一个预览都开一个新的Frame，可能到后面就内存泄漏了，到后来我就不怎么用Preview，这么慢，还不如直接点击Run。

说了这么多JavaFX的缺点，还是打算好好学一下，毕竟java里面开源的，免费的多，而且其他的不熟啊，还是Java的熟悉，最近听说Sun的日子不好过啊，还有谣言说要被富士通收购，晕，这样的话java不就完了，，，

Syntax Highlighter

今天偶然看到一篇文章JavaFX Brush for Syntax Highlighter ，里面提到了在网页上对JavaFX的代码进行语法高亮，只需要一个JS文件就够了，看效果还挺不错的。其实以前也看到过很多网站都有Java的语法高亮，Google了一下，果然发现一个开源的语法高亮的东东，http://code.google.com/p/syntaxhighlighter/。看效果跟上面提到的那个JavaFx的还挺像，闲着也是闲着，就照着他的Guide把博客里面的一些代码加了语法高亮，具体步骤. 不过很讨厌的是语法高亮后的每一行都加上了li标签，这个是JavaScript动态加的，我改了模板，对语法高亮的li格式再定义了一下，还是显示li的图标。。。