Java etc...

アクセスカウンタ

help RSS JavaFX の Bind で三角形の面積を求める... の続き(3)

<<   作成日時 : 2012/12/28 02:25   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

If you prefer to read this article in ENGLISH, go to [in English] page.

JavaFX の Bind で三角形の面積を求める... の続き(2)の続き ...

座標位置を表示させるのに TextField を使っているのだから、そこから値を入力できるようにして、かつ、入力した値の座標位置を頂点にすることを考えてみる。

今のコードは、頂点を表示している点(Circle)の centerX と centerY との値を Textfield の text に(片方向の)バインドをしているのだが、これを双方向にバインドすればよさそうだ。

で、やってみた。

今回は、全部のソースを書き出すのが面倒なと、また、長くなるので、差分の断片だけを示す。

まず import 文を 2 つ追加する。

import javafx.util.StringConverter;
import javafx.beans.binding.Bindings;


そして、インスタンスイニシャライザとコンストラクタとの間に、x 軸用と y 軸用の StringCenverter を 2 つ作る。

これらは、TextField で入力される値を文字列として保持する text プロパティと、頂点を表現する double プロパティとの間の型変換を行うためのコンバータである。
単に、型変換であればコンバータは一つで済むが、今回は、GUI 上に表現している座標系の値(TextField に表示される、あるいは入力される値)と、Circle や Line を Scene 上に描画する位置を表現する座標系の値とのマッピングも行いたいので x 軸用と y軸用の 2 つのコンバータが必要になる。

コンバータクラスには 2 つのメソッドを用意する。

1つは fromString メソッドで、ここに Textfield で入力された座標点の値(文字列)から、描画位置の pixel 位置の値(double)との間の変換処理を書く。もう 1 つは toString メソッドで、こちらは pixel 位置の値(double)を、
Textfield に表示する座標点の値(文字列)に変換する処理を書く。

で、実装したコードがこれ。

  StringConverter<Number> sc_x = new StringConverter<Number>() {
    @Override public Number fromString(String from) {
      double map_x = Double.parseDouble(from);
      double org_x = 10 + (map_x*96/2.54);
      return new Double(org_x);
    }
    @Override public String toString(Number org_x) {
      double map_x = (org_x.doubleValue()-10)*2.54/96;
      return String.format("%2.1f", map_x);
    }
  };

  StringConverter<Number> sc_y = new StringConverter<Number>() {
    @Override public Number fromString(String from) {
      double map_y = Double.parseDouble(from);
      double org_y = 490 - (map_y*96/2.54);
      return new Double(org_y);
    }
    @Override public String toString(Number org_y) {
      double map_y = (490 - org_y.doubleValue())*2.54/96;
      return String.format("%2.1f", map_y);
    }
  };

  public TriangleArea2() { // クラス名 TriangleArea2 に変更
    initialize();

    for(int i = 0; i < 3; i++) {
      int j = (i == 2) ? 0 : i+1;

      l[i].startXProperty().bind(c[i].centerXProperty());
      l[i].startYProperty().bind(c[i].centerYProperty());
      l[i].endXProperty().bind(c[j].centerXProperty());
      l[i].endYProperty().bind(c[j].centerYProperty());

      // 双方向バインド
      // (クリックした位置の座標と点の中心の座標とを双方向バインド)
      Bindings.bindBidirectional(c[i].centerXProperty(), org_x[i]);
      Bindings.bindBidirectional(c[i].centerYProperty(), org_y[i]);

      // 双方向バインド
      // (点の中心座標とTextfieldのtextとを双方向バインド - 変換あり)
      Bindings.bindBidirectional(
        tx[i].textProperty(), c[i].centerXProperty(), sc_x);
      Bindings.bindBidirectional(
        ty[i].textProperty(), c[i].centerYProperty(), sc_y);
    }

    // ...


頂点座標を数値でもクリックでも入力できる


図中の黄色い丸で示した箇所などで、座標位置の数値を入力すると、その位置が頂点になる。もちろん、頂点を示す点(円)の位置が変化し、同時に辺の位置も頂点の位置に追従して変化する。

目盛りの交点をクリックしたつもりでも、その交点座標からすこしずれた位置をクリックしてしまうことはよくあるが、そんな時に、この実装により、座標位置を数値指定で入力できるので、調整・補正が容易になる。


さぁ、次に何ができるか。

で思いついたのが、3 点同時タッチで三角形を指定すること。
マルチタッチのイベントで処理すればよさそうだ。

つづく ...

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
JavaFX の Bind で三角形の面積を求める... の続き(3) Java etc.../BIGLOBEウェブリブログ