2009-10-30

JFXtras Core 入門 - Shape (4)

JavaFX JFXtras

シェイプの4回目です。

今回は

MultiRoundRectangle
Rays
RegularPolygon
ResizableEllipse

を描いてみようと思います。

org.jfxtras.scene.shape.MultiRoundRectangle

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.MultiRoundRectangle;

Stage {
    title: "JFXtras Shape MultiRoundRectangle"
    width: 150
    height: 150
    scene: Scene {
        content: [
            MultiRoundRectangle {
                x: 10
                y: 10
                width: 80
                height: 80
                topLeftWidth: 10
                topLeftHeight: 10
                bottomLeftWidth: 20
                bottomLeftHeight: 20
                topRightWidth: 30
                topRightHeight: 30
                bottomRightWidth: 0
                bottomRightHeight: 0
                fill: Color.BLUEVIOLET
            }
        ]
    }
}

プロパティ	説明
topLeftWidth	左上角の弧の横方向の半径
topLeftHeight	左上角の弧の縦方向の半径
bottomLeftWidth	左下角の弧の横方向の半径
bottomLeftHeight	左下角の弧の縦方向の半径
topRightWidth	右上角の弧の横方向の半径
topRightHeight	右上角の弧の縦方向の半径
bottomRightWidth	右下角の弧の横方向の半径
bottomRightHeight	右下角の弧の縦方向の半径

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.MultiRoundRectangle.html

org.jfxtras.scene.shape.Rays

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Rays;

Stage {
    title: "JFXtras Shape Rays"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Rays {
                rounded: false
                extent: 0.7
                centerX: 60
                centerY: 60
                radius: 50
                rays: 5
                fill: Color.DARKGOLDENROD
            }
        ]
    }
}

プロパティ	説明
extent	Rayの先端の拡がり。0.0 から 1.0 までの範囲で 1.0 が一番拡がりが大きい
rays	Rayの数
rounded	Rayの先端を丸めるかどうか。true にすると丸める

extent: 0.4, rays: 4

Asterisk にも似ていると思います。

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Rays.html

org.jfxtras.scene.shape.RegularPolygon

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.RegularPolygon;

Stage {
    title: "JFXtras Shape RegularPolygon"
    width: 150
    height: 150
    scene: Scene {
        content: [
            RegularPolygon {
                centerX: 50
                centerY: 50
                radius: 40
                sides: 6
                fill: Color.HOTPINK
            }
        ]
    }
}

プロパティ	説明
sides	辺の数

sides: 8

正○角形なわけですね。
http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.RegularPolygon.html

org.jfxtras.scene.shape.ResizableEllipse

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.ResizableEllipse;

Stage {
    title: "JFXtras Shape ResizableEllipse"
    width: 150
    height: 150
    scene: Scene {
        content: [
            ResizableEllipse {
                fill: Color.PALEVIOLETRED
            }
        ]
    }
}

特に設定の必要なプロパティはありません。デフォルトでは~~コンテナノードの縦横サイズから自分のサイズを決定します。~~縦横 200, 200 になります。width, height を好みの大きさに設定することもできます。（使いどころがよくわかりませんけど。。。）

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.ResizableEllipse.html

今日はここまで。シェイプは次回が最終回です。

追記
ResizableEllipse のデフォルトのサイズについて修正しました。

2009-10-26

JFXtras Core 入門 - Shape (3)

JavaFX JFXtras

シェイプの3回目です。

今回は

Cross
Donut
ETriangle
ITriangle
Lauburu

を描いてみようと思います。

org.jfxtras.scene.shape.Cross

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Cross;

Stage {
    title: "JFXtras Shape Cross"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Cross {
                centerX: 50
                centerY: 50
                radius: 40
                width: 20
                roundness: 0.5
                fill: Color.AQUA
            }
        ]
    }
}

Cross のプロパティで特に難しいものは無いと思います。前回の Asterisk に似ています。

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Cross.html

org.jfxtras.scene.shape.Donut

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Donut;

Stage {
    title: "JFXtras Shape Donut"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Donut {
                centerX: 60
                centerY: 60
                outerRadius: 50
                innerRadius: 20
                sides: 0
                fill: Color.CHOCOLATE
            }
        ]
    }
}

プロパティ	説明
innerRadius	内側の円の半径
outerRadius	外側の円の半径
sides	辺の数

sides: 5

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Donut.html

org.jfxtras.scene.shape.ETriangle

package jfxtrasexamples.shape;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.ETriangle;

Stage {
    title: "JFXtras Shape ETriangle"
    width: 150
    height: 150
    scene: Scene {
        content: [
            ETriangle {
                x: 30
                y: 80
                width: 70
                fill: Color.BLUE
            }
        ]
    }
}

プロパティ	説明
width	一辺の幅
x	三角形の左下の X 座標
y	三角形の左下の Y 座標

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.ETriangle.html

org.jfxtras.scene.shape.ITriangle

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.ITriangle;

Stage {
    title: "JFXtras Shape ITriangle"
    width: 150
    height: 150
    scene: Scene {
        content: [
            ITriangle {
                x: 40
                y: 100
                width: 60
                height: 80
                fill: Color.SILVER
            }
        ]
    }
}

プロパティ	説明
width	底辺の幅
height	三角形の高さ

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.ITriangle.html

org.jfxtras.scene.shape.Lauburu

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Lauburu;

Stage {
    title: "JFXtras Shape Lauburu"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Lauburu {
                centerX: 60
                centerY: 60
                radius: 50
                fill: Color.RED
            }
        ]
    }
}

難しいプロパティは無いと思います。

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Lauburu.html

今日はここまで。シェイプはあと2回続きます。ちょっと長いでしょうか。（笑って誤魔化す）

2009-10-25

WidgetFX 1.2.4 がリリースされたようです

JavaFX WidgetFX

http://steveonjava.com/2009/10/24/widgetfx-1-2-4-released-happy-halloween/

WidgetFX 1.2.4 がリリースされたようです。
以下の問題が改善されたもよう。

日本語環境 Windows におけるオートスタートの問題
64bit JVM 環境におけるオートスタートの問題
有効期限切れだった WidgetFX のデジタル証明書の更新
その他幾つかの小さいなバグ

日本語環境 Windows なんたらという問題は正確には英語圏以外の国の Windows 環境で起こる問題で、US 版とはスタートアップフォルダの場所が異なりショートカットを作れなくて、次回以降に WidgetFX を自動起動できないという問題です。
Google グループ

これで US 版に合わせて自分でフォルダを作ったり、Java コンソールで嫌なスタックトレースを見ずに済みます。

2009-10-25

JavaFX のテキストをセンタリングする

JavaFX

JavaFX で文字列のセンタリング - hidemonのブログ

外しているかもしれませんが...
JavaFX のテキストをセンタリングする為に MigLayout を使って面倒を感じられているようなので。

外部のライブラリを使わずに標準の JavaFX API だけで文字列をセンタリングできます。

一つはテキストのレンダリング後のサイズを使ってセンタリングします。
どうやら以前は問題があったとのことですが、今は動作します。

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.TextOrigin;

var width = 200;
var height = 200;

Stage {
    title: "Text Centering 1"
    width: 250
    height: 250
    scene: Scene {
        var text: Text;
        content: [
                    Rectangle {
                        width: bind width
                        height: bind height
                        fill: Color.YELLOWGREEN
                    }
                    text = Text {
                        font : Font {
                            size : 16
                        }
                        content: "Hello"
                        textOrigin: TextOrigin.TOP
                        translateX: bind (width - text.boundsInLocal.width) / 2;
                        translateY: bind (height - text.boundsInLocal.height) / 2;
                    }
        ]
    }
}

実行結果

二つ目の方法は JavaFX 1.2 から追加されたレイアウトの一つ Stack を使う方法。
Stack はその上に配置されたノードをデフォルトでセンタリングしながら重ねて積み上げていくレイアウトです。
このデフォルトは nodeHPos, nodeVPos の設定値を変えることで変更できます。

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.layout.Stack;
import javafx.scene.paint.Color;

var width = 200;
var height = 200;

Stage {
    title: "Text Centering 2"
    width: 250
    height: 250
    scene:  Scene {
        content: [
            Stack {
                content: [
                    Rectangle {
                        width: bind width
                        height: bind height
                        fill: Color.YELLOWGREEN
                    }
                    Text {
                        font : Font {
                            size : 16
                        }
                        content: "Hello"
                    }
                ]
            }
        ]
    }
}

実行結果

他にも方法はあるかも知れませんが、ぱっと思いつくのはこんな感じ。外していたらごめんなさい。

2009-10-22

JFXtras Core 入門 - Shape (2)

JavaFX JFXtras

シェイプの2回目です。前回は Arrow で矢印を描いてみました。JFXtras Core 0.5 の org.jfxtras.scene.shape パッケージには他にも沢山のシェイプがあります。

org.jfxtras.scene.shape パッケージのクラス

Almond
Arrow
Asterisk
Astroid
Balloon
Cross
Donut
ETriangle
ITriangle
Lauburu
MultiRoundRectangle
Rays
RegularPolygon
ResizableEllipse
ResizableRectangle
ReuleauxTriangle
RoundPin
RTriangle
Star2

今回はこれらのうち

Almond
Asterisk
Astroid
Balloon
Cross
Donut

を描いてみようと思います。

org.jfxtras.scene.shape.Almond

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Almond;

Stage {
    title: "JFXtras Shape Almond"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Almond {
                centerX: 50
                centerY: 50
                width: 50
                fill: Color.ORANGE
            }
        ]
    }
}

プロパティ	説明
centerX	シェイプの中心の X 座標
centerY	シェイプの中心の X 座標
width	アーモンドの一番太い部分の幅

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Almond.html

org.jfxtras.scene.shape.Asterisk

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Asterisk;

Stage {
    title: "JFXtras Shape Asterisk"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Asterisk {
                centerX: 50
                centerY: 50
                radius: 30
                width: 10
                beams: 6
                roundness: 0.5
                fill: Color.BLUE
            }
        ]
    }
}

プロパティ	説明
beams	中心から外側へ放射状に伸びる柱の数
radius	中心から柱の先端までの半径
roundness	柱の先端の丸み。0.0 から 1.0 までの範囲で 1.0 が一番丸い
width	柱一本の幅

radius: 50, width: 20, beams: 3, roundness: 0

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Asterisk.html

org.jfxtras.scene.shape.Astroid

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Astroid;

Stage {
    title: "JFXtras Shape Astroid"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Astroid {
                centerX: 50
                centerY: 50
                radius: 40
                fill: Color.RED
            }
        ]
    }
}

プロパティの意味は他のシェイプと同様なので割愛します。

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Astroid.html

org.jfxtras.scene.shape.Balloon

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Balloon;

Stage {
    title: "JFXtras Shape Balloon"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Balloon {
                x: 30
                y: 30
                width: 50
                height: 50
                arc: 20
                tabWidth: 20
                tabHeight: 10
                tabDisplacement: 0.5
                tabLocation: Balloon.TAB_AT_LEFT
                anglePosition: Balloon.NONE
                fill: Color.YELLOW
            }
        ]
    }
}

プロパティ	説明
anglePosition	タブ（耳？正式名称がわかりません）の向き
arc	角の丸み
tabDisplacement	タブ（耳？）の一辺上の位置。0.0 から 1.0 までの値で 0.5 が中央
tabHeight	タブ（耳？）の高さ（長さ）
tabLocation	タブ（耳？）を配置する位置
tabWidth	タブ（耳？）の幅（太さ）

anglePosition と tabDisplacement には設定する定数が定義されているので詳しくは API のドキュメントを参照してください。

anglePosition: Balloon.ANGLE_AT_START, arc: 30, tabDisplacement: 1.0, tabHeight: 40, tabLocation: Balloon.TAB_AT_RIGHT, tabWidth: 10

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Balloon.html

2009-10-21

JFXtras Core 入門 - Shape (1)

JavaFX JFXtras

JFXtras Core 入門ということでこれから書いていこうと思いますが、第一回目は Shape （シェイプ）です。
JFXtras のバージョンは 0.5 を使います。

shape とは、英和辞典で引いてみると、形、形状、輪郭などと書かれており、何らかの図形と解釈しておけば良いと思います。
JavaFX には標準で javafx.scene.shape パッケージがあり、その中には抽象基底クラスの Shape クラスと、それを継承した Line、Arc、Circle、Ellipse、Rectangle、Polygon などのサブクラスがあるので、JFXtras を使わなくても図形を描画することができます。
ただ、JavaFX 標準のクラスは汎用的なクラスの為、少し複雑な形を描こうとすると、ほんのちょっと面倒なこともあります。（そうは言っても JavaFX 標準の機能だけでも他の言語、他のプラットフォームよりも簡単になっていると思います）
例えば、矢印を JavaFX 標準の機能で極力簡単に描こうとすると、以下のようになります。
JavaFX の Shape は Node のサブクラスの為、シーングラフに追加して構成することができます。

import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Rectangle;
...
Stage {
    title: "JavaFX Arrow"
    width: 150
    height: 120
    scene: Scene {
        content: [
            Rectangle {
                x: 10, y: 20
                width: 50, height: 30
                fill: Color.GREEN
                stroke: Color.BLACK
            }
            Polygon {
                points : [ 60,5, 115,30, 60,65 ]
                fill: Color.GREEN
                stroke: Color.BLACK
            }
        ]
    }
}

上の例は、Rectangle （矩形）と Polygon （多角形）を組み合わせて、矢印を描いています。手抜きの為、二つのシェイプの境界の黒い線が残ってしまっています。

org.jfxtras.scene.shape.Arrow

これはとても簡単ですが、JFXtras のシェイプを使うことでもう少し簡単に描くことができます。
JFXtras にはよく使われそうなシェイプがあらかじめ定義されていて、矢印も定義されています。Arrow クラスです。
以下は JFXtras の Arrow の例です。

import javafx.scene.paint.Color;
import org.jfxtras.scene.shape.Arrow;

Stage {
    title: "JFXtras Arrow"
    width: 150
    height: 150
    scene: Scene {
        content: [
            Arrow {
                x: 10, y: 20
                width: 100
                height: 60
                rise: 0.5
                depth: 0.5
                fill: Color.GREEN
            }
        ]
    }
}

簡単になりましたね。

Arrow が持つ説明が欲しそうな変数は rise と depth ですね。
rise は 0.0 から 1.0 までの値で、矢印のアローヘッド（矢尻）の幅に対するシャフト（棒）の部分の太さで、0.0 ではシャフトが線状になり、1.0 ではシャフトの太さがアローヘッドの幅と同じになります。
rise: 1.0

depth も 0.0 から 1.0 までの値で、アローヘッドの高さに対するシャフトの長さで、0.0 ではシャフトが無くなって、1.0 ではシャフトが右端一杯まで伸びて、その分アローヘッドは潰れて線状になります。
depth: 0.9

http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.scene.shape/org.jfxtras.scene.shape.Arrow.html

次回からは残りのシェイプを数個ずつ纏めて紹介していきたいと思います。

2009-10-18

JFXtras 入門 - キックオフ

JavaFX JFXtras

今回から JFXtras をネタに書いていこうと思います。（どの位持つかわかりませんが...）

JFXtras は JavaFX アプリケーション開発の為の JavaFX Script で書かれたオープンソースのライブラリで、この日記を書いている現在の最新バージョンは 0.5 です。
JFXtras はオープンソースプロジェクトととして Stephen Chin 氏と Keith Combs 氏によって立ち上げられ、その後 Andres Almiray 氏、Dean Iverson 氏、James Weaver 氏、Jonathan Giles 氏、Weiqi Gao 氏らも加わり、その後コミッタは30名近くにまで増えています。

JFXtras は Core, Samples, Test に分割されています。
Core はボーダー、レイアウト、シェイプ、メニュー、非同期処理やダイアログなどいろいろな機能を備え、リッチなユーザーインターフェースの開発を簡単にしてくれる機能が集まっています。
Samples は JFXtras Core を使ったサンプルコード、アプリケーションです。
Test は JavaFX Script プログラムのユニットテスト用のライブラリです。

と、今日はここまで。
次回からは Core の機能を取り上げて行きたいと思います。

JFXtras コミュニティ・サイト http://jfxtras.org/portal/home
JFXtras プロジェクト・ページ http://code.google.com/p/jfxtras/