JSliderの値に合わせてEllipse2Dコンポーネントの大きさも変化させたい

Question

実現したいこと

jSliderの値が大きくなると、中央座標を保ったままellipseも大きくなり、
jSliderの値が小さくなると、ellipseも小さくなるようにしたいです。

実装したインターフェース
public void stateChanged(ChangeEvent e) { } の中で、オーバーライドされているメソッドの中のellipseを使おうと
コードの上の方で Ellipse2D ellipse;を定義しましたが、エラーになります。
また、public void stateChanged(ChangeEvent e) { } の中でJsliderのgetValue()を入れた変数を使って、width,heightを変えようとしてもエラーになります。
別のクラスの中でオーバーライドされているメソッドを呼び出して、中身を一部変えたい場合はどうすれば良いのでしょうか？

発生している問題・エラーメッセージ

メソッド Double(int, int, int, int) は型 Ellipse2D で未定義です
非 static フィールド ellipse を static 参照できません
非 static フィールド ellipse を static 参照できません

該当のソースコード

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class TestFrame extends JFrame implements ChangeListener {
	JSlider slider;
	  JLabel label;
	  JPanel p;
	  Ellipse2D ellipse;
	
	
  public static void main(String[] args) {
    new TestFrame().setVisible(true);
  }

  TestFrame() {
    super("Swingサンプル（円の描画）");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setSize(800, 800);

    setContentPane(new CirclePanel());

     label = new JLabel("test");
    label.setBounds(300, 10, 100,100);
    add(label);

    JLabel label2 = new JLabel("テスト");
    label2.setBounds(300, 500, 100, 100);
    add(label2);

     slider = new JSlider();
    slider.addChangeListener(this);
    p = new JPanel();
    p.add(slider);
    p.setBounds(300, 300, 100, 50);
    add(p);
    
   
  }
  
 
 
  
  public void stateChanged(ChangeEvent e) {
	    label.setText("値：" + slider.getValue());
	    int value= slider.getValue();
	    //p.setBounds(300, 300, value, value);
//	    エラーになる
	    ellipse.Double(300,200,value, value);
	   
	    
	  } 
  
 
  private static class CirclePanel extends JPanel {
    CirclePanel() {
      super(null); //レイアウトマネージャ無し
      setBackground(Color.WHITE); //背景色
    }
    @Override
    public void paintComponent(Graphics g){
      super.paintComponent(g);

      Graphics2D g2 = (Graphics2D)g;
      g2.setColor(Color.BLUE);
//      エラーになる
       ellipse = new Ellipse2D.Double(300,200,100,100);
//       エラーになる
      g2.fill(ellipse);
    }
  }
}

###試したこと

どうすれば求める情報が出てくるのか検索方法がわかりませんでしたが、調べた中では。JSliderの値に合わせて図形が大小変化するものは見つけられませんでした。

Answer 1

しばらく描画のテストになるなら、JPanelベースにしたほうがわかりやすいかなと思いました（mainが長くなるのは個人的には好きじゃないけど^^;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class TestPanel extends JPanel implements ChangeListener {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Swingサンプル（円の描画）");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setResizable(false); // nullレイアウトのためリサイズされたくない
        frame.add(new TestPanel());
        frame.pack(); // TestPanelのサイズにframeを合わせる（frameは400x400より大きくなる）
        frame.setLocationRelativeTo(null); // 画面中央に表示（pack後でないとずれる）
        frame.setVisible(true);
    }

    private final JLabel label;
    private final JSlider slider;

    TestPanel() {
        setLayout(null);
        setBackground(Color.WHITE);
        // （タイトルバーや枠を含まない）クライアントエリアを400x400に設定（正しく中央寄せにできる）
        setPreferredSize(new Dimension(400, 400));

        label = new JLabel("test");
        label.setHorizontalAlignment(JLabel.CENTER); // 文字中央寄せ
        // 全幅にしておけば（はみ出さないかぎり）文字数によらず中央寄せに
        label.setBounds(0, 10, 400, 50);
//        label.setBackground(Color.PINK); label.setOpaque(true);
        add(label);

        slider = new JSlider(0, 400);
        slider.addChangeListener(this);
        slider.setBounds(0, 50, 400, 50);
        slider.setOpaque(false);
        add(slider);
    }

    @Override public void stateChanged(ChangeEvent e) {
        label.setText("直径：" + slider.getValue());
        repaint(); // 再描画（paintComponentが呼ばれる）
    }

    @Override public void paintComponent(Graphics g) {
        super.paintComponent(g);

//        g.setColor(Color.CYAN);
//        int diameter = slider.getValue();
//        int radius = diameter / 2;
//        int x = 400 / 2 - radius;
//        int y = 400 / 2 - radius;
//        g.fillOval(x, y, diameter, diameter);

        Graphics2D g2 = (Graphics2D) g;
        g2.setColor(Color.CYAN);

        int diameter = slider.getValue(); // 円の直径

        double radius = diameter / 2d; // 円の半径
        double x = 400 / 2d - radius; // xは左上座標のため、描きたい中心より半径ぶん左
        double y = 400 / 2d - radius; // yは左上座標のため、描きたい中心より半径ぶん上

        Ellipse2D ellipse = new Ellipse2D.Double(x, y, diameter, diameter);
        g2.fill(ellipse);
    }
}

Comments

[ikigamikita]

回答ありがとうございます。
不明な点がありまして、
paintComponent(Graphics g)が、stateChanged(ChangeEvent e)によって、slider.getValue()の値がint diameter に代入されるのは分かりますが、
stateChanged(ChangeEvent e)が動作する前のpaintComponent(Graphics g)の中身がどうなっているのかがわかりません。
tateChanged(ChangeEvent e)が動作する前ですと、int diameterにslider.getValue()が代入されていないのでエラーにならないのはどうしてでしょうか？

また、2dはどこで定義されていますでしょうか？paintComponent(Graphics g)の中で最初から使える値何でしょうか？2dが具体的に何なのか、何をしているのかわかりかねまして、教えて頂きたいです。よろしくお願いします。

[TN8001]

> tateChanged(ChangeEvent e)が動作する前ですと、int diameterにslider.getValue()が代入されていないのでエラーにならないのはどうしてでしょうか？

sliderをnewした後にはgetValueできます。
slider = new JSlider(0, 400);
System.out.println(slider.getValue());

初期値は中間（最小値と最大値の合計を平均した値）の200になります。
[JSlider (Java Platform SE 8 )](https://docs.oracle.com/javase/jp/8/docs/api/javax/swing/JSlider.html#JSlider-int-int-)

初期値を自分で決めることもできます。
[JSlider (Java Platform SE 8 )](https://docs.oracle.com/javase/jp/8/docs/api/javax/swing/JSlider.html#JSlider-int-int-int-)

> また、2dはどこで定義されていますでしょうか？

double型の数値リテラルです。2.0と同じ意味です。
[Java | 数値リテラルにサフィックスを付けて型を指定する](https://www.javadrive.jp/start/num/index8.html)

int同士の割り算はint（切り捨て）になるので、小数が欲しければどちらかをdouble（あるいはfloat）にする必要があります。
Ellipse2D.Doubleを使う以上、正しく計算したほうがいいのかな。と

intで十分な場合（ぱっと見差が分かりませんでした）は、fillOvalがあります。
[Graphics (Java Platform SE 8 )](https://docs.oracle.com/javase/jp/8/docs/api/java/awt/Graphics.html#fillOval-int-int-int-int-)

@Override public void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.CYAN);
int diameter = slider.getValue();
int radius = diameter / 2;
int x = 400 / 2 - radius;
int y = 400 / 2 - radius;
g.fillOval(x, y, diameter, diameter);
}

[ikigamikita]

ありがとうございました。理解できました。

Answer 2

java はオブジェクト指向ですので、オブジェクト指向的な考え方と java-swing での書き方をする必要があります。

円は CirclePanel が自身に書いていますので、円の大きさの指定も CirclePanel を通じて行うのが妥当です。それはフレームの大きさを setSize で設定したりするのと同じことです。
そして、 Swing のコンポーネントは内容が変化した場合は Swing に再描画して欲しい旨を通知して paintComponent を呼んで貰うことで 間接的に再表示 する必要があります。(ただし通知した瞬間に即再表示されるわけでは無いことに注意が必要です。)

import java.awt.*;
import java.awt.geom.Ellipse2D;

import javax.swing.*;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class TestFrame extends JFrame implements ChangeListener {
  public static void main(String[] args) {
    new TestFrame().setVisible(true);
  }

  private JSlider slider;
  private JLabel label;
  private CirclePanel circlePanel; //stateChanged メソッドで使うのでフィールド化

  TestFrame() {
    super("Swingサンプル（円の描画）");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setSize(800, 800);

    circlePanel = new CirclePanel();
    setContentPane(circlePanel);

    label = new JLabel("test");
    label.setBounds(300, 10, 100, 100);
    add(label);

    JLabel label2 = new JLabel("テスト");
    label2.setBounds(300, 500, 100, 100);
    add(label2);

    slider = new JSlider(50, 150, 100); //最小値, 最大値, 初期値
    slider.addChangeListener(this);
    JPanel p = new JPanel();
    p.add(slider);
    p.setBounds(300, 300, 200, 50); //見易いようにちょっと大きく
    add(p);
  }

  public void stateChanged(ChangeEvent e) {
    label.setText("値：" + slider.getValue());
    int value = slider.getValue();
    circlePanel.setDiameter(value); //直径をスライダーの値に変更
  }

  private static class CirclePanel extends JPanel {
    private final int X = 350, Y = 250; //円の中心
    private int diameterOfCircle = 100; //円の直径

    CirclePanel() {
      super(null); //レイアウトマネージャ無し
      setBackground(Color.WHITE); //背景色
    }

    /**
     * 円の直径を設定する
     * @param diameter 直径 [px]
     */
    void setDiameter(int diameter) {
      this.diameterOfCircle = diameter;
      repaint(); //再描画依頼(後に Swing が paintComponent を呼んでくれる)
    }

    @Override
    protected void paintComponent(Graphics g) {
      super.paintComponent(g);

      Graphics2D g2 = (Graphics2D) g;
      g2.setColor(Color.BLUE);
      Ellipse2D ellipse = new Ellipse2D.Double(X-diameterOfCircle/2, Y-diameterOfCircle/2, diameterOfCircle, diameterOfCircle);
      g2.fill(ellipse);
    }
  }
}

Comments

[jimbe]

そういえば TN8001 さんの回答を見て思い出しましたが、スライダーだけ入れているパネルは必要なのでしょうか。何の役にもたっていないようですけど。

[ikigamikita]

回答ありがとうございます。考えてみます。