JavaFx グラフ描画〜y=axのグラフを描く〜

イントロダクション

前回は、グラフの土台→X軸とY軸、補助線の描画を行いました。

こんなグラフの土台を作りました。

いよいよ関数を描画

ここで問題があります。

<問題>

  1. 原点の位置(0, 0)が画面上の左上にある
  2. しかし描画したいのは画面の中心が(0, 0)

ここの問題を解決するのに以下の方法でやりました。

中心の座標を出せる様にXとYの値を変換するメソッドを作成しました。

下の様なメソッドです。

/**
 * X, Yの値をグラフ上の値から描画する座標に変換する。
 * @param value グラフ上の値(0,0)は画面の中心
 * @return 描画するCanvas上の値(0,0)は画面の左端
 */
private double convertCenter(int value, boolean isX) {
    int graphValue = 0;
    if (isX) {
        graphValue = value + (CANVAS_SIZE / 2);
    } else {
        graphValue = (CANVAS_SIZE / 2) - value;
    }
    return graphValue;
}

そして、関数を描画するメソッド

/**
 * 関数を描画する。
 * @param ctx Canvasから取得したクラス
 * @param root レイアウトクラス(シーン追加する)
 */
private void drawFunction(GraphicsContext ctx, VBox root) {
    /* 座標系を画面の端っこ(0, 0)を画面の中心にする */
    ctx.setFill(Color.RED);
    // 傾き
    int a = 1;
    for (int x = -(CANVAS_SIZE / 2); x <= (CANVAS_SIZE / 2); x++) {
        int y = y_ax(a, x);
        ctx.fillOval(convertCenter(x, true), convertCenter(y, false), 2, 2);
    }
}
/**
 * y=axの計算を行う。
 * @param a 傾き
 * @param x Xの値
 * @return yの値
 */
private int y_ax(int a, int x) {
    return a * x;
}

上のコードではfor文の中にある「x」が-300〜300まで移動するときのグラフを描画しています。※CANVAS_SIZE / 2 = 300

描画結果(Git)

赤い線が関数を描画下部分です。

次は、機械学習の教科書に戻ります。

<<< 前回
でわでわ。。。

投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す