イントロダクション
前回は、グラフの土台→X軸とY軸、補助線の描画を行いました。
こんなグラフの土台を作りました。
いよいよ関数を描画
ここで問題があります。
<問題>
- 原点の位置(0, 0)が画面上の左上にある
- しかし描画したいのは画面の中心が(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)
赤い線が関数を描画下部分です。
次は、機械学習の教科書に戻ります。
<<< 前回
でわでわ。。。