Hatena::ブログ(Diary)

Foo am I? このページをアンテナに追加 RSSフィード

2009-10-26

JFXtras Core 入門 - Shape (3)

シェイプの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
            }
        ]
    }
}

f:id:hide1080:20091025223000j:image

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

f:id:hide1080:20091025223001j:image

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

sides: 5

f:id:hide1080:20091025223002j:image

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

f:id:hide1080:20091025225253j:image

プロパティ説明
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
            }
        ]
    }
}

f:id:hide1080:20091025225252j:image

プロパティ説明
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
            }
        ]
    }
}

f:id:hide1080:20091025225251j:image

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

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


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

2009-10-25

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

実行結果

f:id:hide1080:20091025163114j:image


二つ目の方法は 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"
                    }
                ]
            }
        ]
    }
}

実行結果

f:id:hide1080:20091025163115j:image


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

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

Steve On Java » WidgetFX 1.2.4 Released – Happy Halloween!

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

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

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

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

Google グループ

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

2009-10-22

JFXtras Core 入門 - Shape (2)

シェイプの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

今回はこれらのうち

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


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

f:id:hide1080:20091022230630j:image

プロパティ説明
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
            }
        ]
    }
}

f:id:hide1080:20091022231526j:image

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

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

f:id:hide1080:20091022231527j:image

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

f:id:hide1080:20091022233016j:image

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

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

f:id:hide1080:20091022235133j:image

プロパティ説明
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

f:id:hide1080:20091022235134j:image

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)

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

f:id:hide1080:20091021235957j:image

上の例は、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
            }
        ]
    }
}

f:id:hide1080:20091022000718j:image

簡単になりましたね。


Arrow が持つ説明が欲しそうな変数は rise と depth ですね。

rise は 0.0 から 1.0 までの値で、矢印のアローヘッド(矢尻)の幅に対するシャフト(棒)の部分の太さで、0.0 ではシャフトが線状になり、1.0 ではシャフトの太さがアローヘッドの幅と同じになります。

rise: 1.0

f:id:hide1080:20091022003008j:image

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

depth: 0.9

f:id:hide1080:20091022003009j:image

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


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

2009-10-18

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/

2009-10-15

JavaFX ネタ

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


bluepapa32’s Java Blog

やさしいデスマーチ


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

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


近日スタートします。

2009-10-13

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

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


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

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

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

どうぞお楽しみに。