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)

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

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

でわでわ。。。