《JavaFx本质论》读书笔记1(1-2章)

JavaFX入门

最新推荐文章于 2024-07-13 12:24:02 发布

原创最新推荐文章于 2024-07-13 12:24:02 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaFX #读书 #HP

javaFx 专栏收录该内容

1 篇文章

订阅专栏

本文介绍JavaFX的基本使用，包括创建简单的图形界面、实现图形渐变及阴影效果，并探讨了如何通过绑定、事件处理和动画实现交互。

一.初识JavaFx:

用于RIA的开发，属于静态标记语言，感觉功能很强大，例如2010的冬奥会的官网就是用JavaFx实现。如果还想了解更多的功能，访问如下网站www.javafx.com.

二.界面组成：

javaFx的界面由两部分组成即Stage和Sense,在Sense上可放置各种组件最终实现效果,利用NeatBeans生成一个JavaFxStage文件:将会看到下面的代码：

package mysecode_javaFx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

/**
 * @author hp
 */

Stage {
    title: "Application title"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 30
                content: "Application content"
            }
        ]
    }
}

会有一个窗体出来。

三：自己动手编写的例子

1.实现三个带圆角的矩形和一个圆，有颜色的渐变和阴影

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package mysecode_javaFx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.effect.DropShadow;

/**
 * @author hp
 */

 /**
 *定义三个矩形
 */
def rectangleSequence = for (i in [0..2])
            Rectangle {
                x: 60 * i + 30//x坐标
                y: 50//y坐标
                height: 50
                width: 40
                arcHeight: 10//实现圆角效果
                arcWidth: 10
                fill: Color.rgb(10 + (i * 50), 100 + (i * 40), i * 50)//填充颜色
                effect: DropShadow {//实现影音效果
                    offsetX: 5.0//如果值为正，则在右面添加影音,负值就相反
                    offsetY: 5.0//如果值为正，则在下面添加影音,负值就相反
                }
            }
            /*
            *舞台
            */
Stage {
    title: "Application title"
    scene: Scene {//场景
        width: 350
        height: 180
        content: [//内容
            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 30
                content: "Shades of Green"
            }
            rectangleSequence,//前面定义的三个矩形
           //定义一个圆
           Circle {
                centerX: 100, centerY: 130//圆心坐标
                radius: 20//半径
                fill: RadialGradient {//填充实现颜色的渐变
                    centerX: 0.25
                    centerY: 0.75
                    radius: 0.9
                    stops: [//白色过渡到蓝色
                        Stop {
                            offset: 0
                            color: Color.WHITE
                        },
                        Stop {
                            offset: 1
                            color: Color.BLUE
                        }
                    ]
                }
                effect: DropShadow {//添加阴影
                    offsetX: 5.0
                    offsetY: 3.0
                    radius: 5.0
                    color: Color.BLUE
                    spread: 0.0
                }
            }
        ]
    }
}

三.动起来（Do Things）

在JavaFx中通过三种机制实现互动，即bind,event handle,Annimation(绑定，事件处理，动画)。

bind:通过将一些属性相关联，例如将A和B相关联，则A变B也跟着变。

event handle:即事件数量，例如鼠标处理事件

annimation:动画，要实现动画其中TimeLine的定义十分重要，它是由一系列的KeyFrame（关键帧）组成