JavaFx实现-渐变效果之一

水深无声 2022-02-03 07:13 392阅读 0赞

自从JavaOne大会推出JavaFX后，我一直比较关注这个项目，它是一种利用Java的脚本技术，功能上近似于Flash。 它的优势在于，Flash虽有很好的功能和普及度，但它永远不能交付Java类库的大部分功能，而 JavaFX可以。因为也给了JavaFX一个“可能性”上的生存空间。  
  
![javafx01.jpg][] ![200902111234331119319.jpg][]  
  
但是由于JavaFX推出的太晚，兼之文档较少，很多人还是对其望而止步，干等下去也不是办法。所以我最近空闲时会写一些JavaFX的小例子以作练习之用。

![None.gif][] import  javafx.ui. \* ;  
![None.gif][] import  javafx.ui.canvas. \* ;  
![None.gif][] // 圆点渐变过滤器   
![ExpandedBlockStart.gif][] class  CircleTransition  extends  CompositeNode  \{  
![InBlock.gif][]   // 设定参数项 变量名：类型   
![InBlock.gif][]     attribute r: Number;  
![InBlock.gif][]    attribute d: Number;  
![InBlock.gif][]    attribute w: Number;  
![InBlock.gif][]    attribute h: Number;  
![InBlock.gif][]    attribute xp: Number;  
![InBlock.gif][]    attribute img: Image;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][] // 为参数赋值   
![None.gif][] attribute CircleTransition.r   =   \- 45 ;  
![None.gif][]attribute CircleTransition.d   =   16 ;  
![None.gif][]attribute CircleTransition.w   =   320 ;  
![None.gif][]attribute CircleTransition.h   =   240 ;  
![None.gif][]attribute CircleTransition.xp  =   \- w;  
![None.gif][] // 注入过滤器参数   
![ExpandedBlockStart.gif][] function CircleTransition.composeNode()  =  Group  \{  
![ExpandedSubBlockStart.gif][]  content:\[Clip  \{  
![InBlock.gif][]   // 注入shape   
![ExpandedSubBlockStart.gif][]     shape: Rect  \{ x: 0 , y: 0 , width:w, height:h \} ,  
![InBlock.gif][]     // 设定偏移   
![InBlock.gif][]     transform: translate( 10 ,  40 ),  
![InBlock.gif][]     // 注入Group   
![ExpandedSubBlockStart.gif][]     content: Group  \{  
![InBlock.gif][]     // 加载ImageView用以显示图像   
![ExpandedSubBlockStart.gif][]       content: \[ImageView  \{  
![InBlock.gif][]        transform: translate( \- 60 ,  \- 30 ),  
![InBlock.gif][]        image:  this .img,  
![InBlock.gif][]         // 分段绘制图像   
![ExpandedSubBlockStart.gif][]       \} , Subtract  \{  
![ExpandedSubBlockStart.gif][]        shape1: Rect  \{ x: 0 , y: 0 , width:w \* 4 , height:h \* 4  \} ,  
![InBlock.gif][]        fill:orange,  
![InBlock.gif][]         // bind   
![InBlock.gif][]         transform: bind \[rotate(r,  0 , h), translate( \- w \+ xp,  0 )\],  
![ExpandedSubBlockStart.gif][]        shape2: Union  \{  
![ExpandedSubBlockStart.gif][]          content: \[foreach (j in \[ 0 ..w / d\], i in \[ 0 ..h / d \* 2 \]) Circle  \{  
![InBlock.gif][]            radius: j,  
![InBlock.gif][]            cx: w \- j \* d,  
![InBlock.gif][]            cy: i \* d,  
![ExpandedSubBlockStart.gif][]          \} , Rect  \{  
![InBlock.gif][]            x: \- w, y: 0 , width:w \+ w / 2 , height:h \* 2 ,  
![ExpandedSubBlockEnd.gif][]          \} \]  
![ExpandedSubBlockEnd.gif][]        \}   
![ExpandedSubBlockEnd.gif][]      \} \],  
![ExpandedSubBlockEnd.gif][]    \}   
![ExpandedSubBlockStart.gif][]  \} , View  \{  
![ExpandedSubBlockStart.gif][]    content: GroupPanel  \{  
![ExpandedSubBlockStart.gif][]     var row  =  Row  \{alignment: BASELINE\}   
![ExpandedSubBlockStart.gif][]     var column1  =  Column  \{\}   
![ExpandedSubBlockStart.gif][]     var column2  =  Column  \{\}   
![InBlock.gif][]      // 鼠标设为默认   
![InBlock.gif][]       cursor: DEFAULT  
![InBlock.gif][]      rows: \[row\]  
![InBlock.gif][]      columns: \[column1, column2\]  
![ExpandedSubBlockStart.gif][]      content: \[SimpleLabel  \{  
![InBlock.gif][]        row: row  
![InBlock.gif][]        column: column1  
![InBlock.gif][]        text:  " 操作: "   
![ExpandedSubBlockStart.gif][]      \} , Button  \{  
![InBlock.gif][]        row: row  
![InBlock.gif][]        column: column2  
![InBlock.gif][]        opaque:  false   
![InBlock.gif][]        mnemonic: T  
![InBlock.gif][]        text:  " 变更图像 "   
![ExpandedSubBlockStart.gif][]        action: operation()  \{  
![InBlock.gif][]            xp  =  \[ 0 ,d..w \* 2 \] dur  2000 ;  
![ExpandedSubBlockEnd.gif][]        \}   
![ExpandedSubBlockEnd.gif][]      \} \]  
![ExpandedSubBlockEnd.gif][]    \}   
![ExpandedSubBlockEnd.gif][]  \}   
![ExpandedBlockEnd.gif][]\]\} ;  
![ExpandedBlockStart.gif][]Frame  \{  
![InBlock.gif][]  title  :  " JavaFX - 图像渐变效果1 "   
![InBlock.gif][]  width  :  350   
![InBlock.gif][]  height :  350   
![ExpandedSubBlockStart.gif][]  content: Canvas  \{ content: CircleTransition \{img:  \{ url:  " image.jpg "  \} \}  \}   
![InBlock.gif][]  centerOnScreen:  true   
![InBlock.gif][]  visible:  true   
![ExpandedBlockEnd.gif][]\} ;

![200902111234331129183.jpg][]  
  
效果图：  
![200902111234331150363.gif][]  
  
第一次写代码的感觉就是效率太慢……  
  
由解释到执行的效率比Swing还不能令人忍受（当然，有代码优化的余地，但还是太慢）  
  
且抛去效率问题不提，桌面JavaFX现在还有一个比较关键的问题，那就是如何部署。对于从前没有安装过JRE的用户来说，JRE体积太大，而且现在从浏览器上进行按需安装（如使用Java Start Web等）的用户体验也不是特别好。   
  
目前Sun的官方解决思路是为JRE引入一种新型的部署模型，初次下载时体积非常小，只有在需要时才下载其他的JRE组件。但是具体的效果如何，我们还需拭目以待。

PS:如果Windows能普及jre该有多好啊……

本文转自 cping 51CTO博客，原文链接:http://blog.51cto.com/cping1982/130165

[javafx01.jpg]: https://p-blog.csdn.net/images/p_blog_csdn_net/cping1982/javafx01.jpg
[200902111234331119319.jpg]: /images/20220203/bf4e78cf7ff44c0690d7d1dd0b1890f3.png
[None.gif]: /images/20220203/2ab78c9a68a946cba2f823e8703e7bf0.png
[ExpandedBlockStart.gif]: /images/20220203/b9b92a776a8148e5aceb2ddb43b9c68f.png
[InBlock.gif]: /images/20220203/d9e693200e1b4de29a2747d8b21cbd43.png
[ExpandedBlockEnd.gif]: /images/20220203/67fca0ef65484052abc37d5cc4522194.png
[ExpandedSubBlockStart.gif]: /images/20220203/2287a0e2d8b74920a2ea858643006720.png
[ExpandedSubBlockEnd.gif]: /images/20220203/9289adb5c1554cdc8acf7352d249b396.png
[200902111234331129183.jpg]: /images/20220203/b470e99a24024e4dab40a78901f3de0d.png
[200902111234331150363.gif]: /images/20220203/76f775cce2f1404da50c2cc262e3555b.png