Foo am I?

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回続きます。ちょっと長いでしょうか。（笑って誤魔化す）

Permalink | コメント(0) | トラックバック(0) | 22:13

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"
                    }
                ]
            }
        ]
    }
}

実行結果

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

Permalink | コメント(2) | トラックバック(1) | 16:37

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

JavaFX, WidgetFX

Steve On Java » WidgetFX 1.2.4 Released – Happy Halloween!

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

以下の問題が改善されたもよう。

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

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

Launch on Startup - WidgetFX Users | Google Groups

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

Permalink | コメント(0) | トラックバック(0) | 17:58

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

Permalink | コメント(2) | トラックバック(2) | 00:00

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

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

Permalink | コメント(0) | トラックバック(1) | 00:40

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/

Permalink | コメント(2) | トラックバック(0) | 21:22

JavaFX ネタ

JavaFX

ネタ切れで最近すっかりさぼりまくってましたが

bluepapa32’s Java Blog

やさしいデスマーチ

に刺激され何か書いてみようかなあ、なんて思っているところです。

JFXtras のことについてでも書いてみようか。

近日スタートします。

Permalink | コメント(3) | トラックバック(0) | 00:50

@IT に WidgetFX の記事を書かせて頂きました

WidgetFX, JavaFX

JavaFXでデスクトップを遊ぶ「WidgetFX」

WidgetFX は JavaFX Script で開発されたデスクトップ・ウィジェット・プラットフォームです。

今回は前編として WidgetFX の紹介が主になっています。

後編ではサンプルプログラムを使ってウィジェットの作り方をご紹介します。

どうぞお楽しみに。

Permalink | コメント(0) | トラックバック(0) | 22:01