8. 그래픽

(1) 그래픽 처리 기본

Swing 패키지에서 제공되는 컴포넌트로 구성할 수 없는 형태의 화면을 꾸미기 위해서는 Graphics 클래스를 이용하여 도형을 그리거나 별도로 생성한 이미지 파일을 다뤄야 합니다.

 

 

① Graphics 클래스

Graphics 클래스를 이용하면 원, 삼각형 등 간단한 도형을 그리거나 글꼴의 변경, 이미지 파일의 출력 등 그래픽과 관련된 기능을 활용할 수 있습니다.

Graphics 클래스에서 제공한느 메소드에 대한 자세한 내용은 자바 API 온라인 문서를 참조하면 됩니다.

https://docs.oracle.com/en/java/javase/14/docs/api/java.desktop/java/awt/Graphics.html

Graphics (Java SE 14 & JDK 14)

paint( ) 메소드

Graphics 클래스에서 화면에 도형이나 글씨, 이미지 등을 출력해주는 메소드로서 내부에서 다양한 그래픽 처리를 합니다.

paint() 메소드를 이용해서 윈도우 자체에 그릴 수도 있지만, 윈도우에 배치된 판넬에 도형을 그리는 방법을 일반적으로 많이 사용됩니다.

판넬에 도형을 그리기 위해서 판넬을 상속받은 클래스를 새롭게 만들어 윈도우에 배치한 후 paint() 메소드를 이용하여야 합니다.

양식은 다음과 같습니다.

 

 

public class 클래스명 extends JFrame {

    public 생성자 () {

        myPanel 객체 = new myPanel();   // myPanel : 판넬을 상속받은 클래스명

        ....

        add("Center",객체);

    }

    class myPanel extends JPanel {

        public void paint(Graphics g) {

            super.paint(g);

            g.그래픽메소드( );

        }

    }

} 

 

 

drawString() 메소드

drawString() 메소드는 Graphics 클래스에서 제공되는 메소드로 윈도우 화면의 지정한 위치에 문자열을 출력합니다.

drawString() 메소드는 위의 paint 메소드 양식의 '그래픽메소드( ); ' 부분에 들어갑니다.

 

 

drawString("출력할 문자열", x좌표, y좌표);

 

 

 

 

 

 

(2) 기본 도형

① 직선 그리기

직선 그리는 기능은 Graphics 클래스의 drawLine() 메소드에서 제공됩니다.

형식은 다음과 같습니다.

 

 

drawLine(x1, y1, x2, y2);    // x1, y1  : 첫 번째 점의 x, y 좌표

                                     // x2, y2  : 두 번째 점의 x, y 좌표

 

 

② 직사각형 그리기

직사각형을 그리는 기능은  Graphics 클래스의 drawRect() 메소드에서 제공됩니다.

형식은 다음과 같습니다.

 

 

drawRect(x, y, w, h);      // x, y : 왼쪽 위 모서리 점의 x, y 좌표

                                 // w : 직사각형의 너비 (픽셀)

                                 // h : 직사각형의 높이 (픽셀)

 

 

③ 원 그리기

원을 그리는 기능은 Graphics 클래스의 drawOval() 메소드에서 제공됩니다.

형식은 다음과 같습니다.

 

 

drawOval(x, y, w, h);     // x, y : 왼쪽 위 모서리 점의 x, y 좌표                                // w : 원의 너비 (픽셀)                                // h : 원의 높이 (픽셀)

 

 

④ 호 그리기

호는 완전히 그려지지 않은 원이라 생각하면 되고, 호를 그리는 선이 시작되는 각과 끝나는 각을 지정하도록 되어 있습니다.

호를 그리는 기능은 Graphics 클래스의 drawArc() 메소드에서 제공됩니다.

형식은 다음과 같습니다.

 

 

drawArc(x, y , w, h, s, e);    // x, y : 왼쪽 위 모서리 점의 x, y 좌표

                                   // w, h : 호의 넓이와 높이(픽셀)

                                   // s, e : 호의 시작 각도, 호의 끝 각도 

 

다음은 위의 네 개의 그리기 방식을 이용한 코드의 예시입니다.

package eight;
import java.awt.*;
import javax.swing.*;
public class graphicsamples extends JFrame{
    public graphicsamples() {
        setTitle("도형들 그리기");
        
        myPanel pn = new myPanel();
        add("Center",pn);
        setSize(300,300);
        setVisible(true);
    }
    class myPanel extends JPanel {
        public void paint(Graphics g) {
            super.paint(g);
            g.drawLine(25, 45, 95, 95);
            g.drawRect(140, 40, 70, 60);
            g.drawOval(24,140,100,60);
            g.drawArc(150, 150, 110, 75, 90, 270);
        }
    }
    public static void main(String [] args) {
        graphicsamples gs = new graphicsamples();
    }
}
 

 

 

 

⑤ 둥근 사각형 그리기

둥근 사각형은 모서리의 모양이 둥근 형태로 구성된 직사각형입니다.

그리는 방법은 Graphics 클래스의 drawRoundRect() 메소드에서 제공됩니다.

 

 

drawRoundRect(x, y, w, h, c_width, c_height);    // x, y : 왼쪽 위 모서리 점의 x, y 좌표

                                                                 // w, h : 직사각형의 너비, 높이 (픽셀)

                                                                 // c_width : 한 모서리(둥근부분)의 너비 (픽셀)

                                                                 // c_height : 한 모서리(둥근부분)의 높이 (픽셀)

 

 

⑥ 다각형 그리기

다각형은 각 꼭짓점의 좌표를 배열을 이용하여 인수로 사용합니다.

다각형을 그리는 기능은 Graphics 클래스의 drawPolygon() 메소드에서 제공됩니다.

 

 

drawPolygon(int x[ ], int y[ ] , int n);    // x[ ] : 각 꼭짓점의 x 좌표

                                                      // y[ ] : 각 꼭짓점의 y 좌표

                                                      // n : n 각형 지정

 

다음은 drawPolygon을 이용해 삼각형을 그리는 코드 예시입니다.

import java.awt.*;
import javax.swing.*;
public class polysample extends JFrame {
    public polysample() {
        setTitle("삼각형 그리기");
        myPanel pn = new myPanel();
        add("Center",pn);
        setSize(300,240);
        setVisible(true);
    }
    class myPanel extends JPanel {
        public void paint(Graphics g) {
            int[] point_x = {120,30,200};
            int[] point_y = {40, 130, 150};
            super.paint(g);
            g.drawPolygon(point_x,point_y,3);
        }
    }
    public static void main(String [] args) {
        polysample ps = new polysample();
    }
}
 
 

 

 

 

 

⑦ 도형의 색상 

도형에 색상을 지정하기 위해서는 도형을 그리기 전에 setColor() 메소드를 이용하여 색상을 지정하면 해당하는 색상의 도형이 그려집니다.

이 도형의 색상은 도형의 테두리 색상을 말하는 것입니다.

형식은 다음과 같습니다.

 

 

....

g.setColor(색상지정);          // g: paint 메소드에서 사용되는 인수명

drawXXX( );         // XXX : 선, 원, 직사각형 등 원하는 도형 그릴 때 사용하는 메소드 

...

 

 

색상 지정하는 방법은 RGB의 각 색상의 농도를 정수 형태의 인수로 지정하는 방법과, 색상의 이름을 직접 지정하는 두 가지 방법이 존재합니다.

 

(1) RGB 색상지정

형식은 다음과 같습니다.

 

 

Color 변수명 = Color(int R, int G, int B);     // R: 빨간색의 농도(0~255), G: 초록생의 농도(0~255)

g.setColor(c);                                         // B: 파란색의 농도(0~255) , g: paint 메소드에서 사용되는 인수명

 

 

(2) 색상 지명 

형식은 다음과 같습니다.

 

 

g.setColor(Color.색상이름);                       // g: paint 메소드에서 사용되는 인수명

 

 

사용 예	색상	사용 예	색상
Color.black	검정색	Color.magenta	진홍색
Color.blue	파란색	Color.orange	주황색
Color.cyan	하늘색	Color.pink	분홍색
Color.darkGray	짙은 회색	Color.red	빨간색
Color.gray	회색	Color.white	흰색
Color.green	초록색	Color.yellow	노란색

 

 

 

색상으로 채워진 도형 그리기

테두리 색상만 변경하는 것이 아닌 도형 자체를 색상을 채우는 기능은 기존에 도형 그리기를 할 때 사용한 메소드의 앞 글자 'draw' 대신에 'fill' 을 사용하면 됩니다.

형식은 다음과 같습니다.

 

 

fillRect( );                    // 채워진 직사각형 그리기

fillOval( );                    // 채워진 원 그리기

fillRoundRect( );           // 채워진 둥근 사각형 그리기 

fillPolygon( );               // 채워진 다각형 그리기

 

 

다음은 도형에 색상을 채우거나 설정한 예시입니다.

import javax.swing.*;
import java.awt.*;
public class colorsample extends JFrame {
    public colorsample() {
        setTitle("색상있는 도형들");
        myPanel pn = new myPanel();
        add("Center",pn);
        setSize(300,240);
        setVisible(true);
    }
    class myPanel extends JPanel{
        public void paint(Graphics g) {
            super.paint(g);
            g.setColor(Color.red); // 테두리가 빨강색인 
            g.drawRect(100, 40, 70, 30); // 직사각형
            g.setColor(Color.green);     // 초록색 색상으로 채워진
            g.fillOval(20, 100, 100, 50);  // 타원
        }
    }
    public static void main (String [] args) {
        colorsample cs = new colorsample();
    }
}
 

 

 

 

 

 

 

(3) 폰트 및 이미지 처리

Graphics 클래스를 이용해서 글자의 모양이나 크기를 정할 수 있고 이미지 파일도 처리할 수 있습니다.

 

① 글자의 폰트(Font) 설정

글자의 폰트를 설정하기 위해서 Font 클래스의 기능을 이용하면 됩니다.

Font 클래스 사용법은 다음과 같습니다.

 

 

Font 객체 = new Font(String name, int style, int size);

g.setFont(객체);

 

// name: 폰트의 이름

// style: Font.BOLD , FontITALIC , FONT.NORMAL 중 하나 지정

// size: 폰트 크기

// g: paint 메소드에서 사용되는 인수 Graphics 의 객체

 

 

BOLD는 굵은 글씨, ITALIC은 기울임 글씨, NORMAL 은 일반 글씨를 지정한다는 뜻입니다.

 

다음은 폰트를 수정하는 예시입니다.

import java.awt.*;
import javax.swing.*;
public class fontsample extends JFrame {
    public fontsample() {
        setTitle("폰트 예제");
        myPanel pn = new myPanel();
        add("Center",pn);
        setSize(300,230);
        setVisible(true);
    }
    class myPanel extends JPanel{
        public void paint(Graphics g) {
            super.paint(g);
            g.drawString("폰트수정하기!",50,30);
            Font ft1 = new Font("바탕체",Font.BOLD,15);
            g.setFont(ft1);
            g.drawString("폰트굵은글씨!", 50, 60);;
            
            Font ft2 = new Font("궁서체",Font.ITALIC,18);
            g.setFont(ft2);
            g.drawString("폰트궁서체로!", 50, 100);
        }
    }
    public static void main (String [] args) {
        fontsample fs = new fontsample();
    }
}
 

 

 

 

② 이미지 파일 처리

JPEG나 GIF 혹은 PNG 형태로 되어있는 이미지 파일을 자바에서 윈도우에 표시하는 방법은 drawImage 클래스에서 제공됩니다.

 

 

Image 변수명 = Toolkit.getDefaultToolkit().getImage(String 이미지 파일의 경로);

    ....

g.drawImage(변수명, int x, int y, this);

             // 혹은

g.drawImage(변수명, int x, int y, int width, int height, this);

// x, y : 이미지가 표시될 x, y 좌표

// width, height : 이미지의 가로, 세로 크기

 

 

다음은 윈도우에 이미지 파일을 출력하는 예시입니다.

import java.awt.*;
import javax.swing.*;
public class imagesample extends JFrame {
    Image img;
    String s = "C:///download/iamironman.jpg";
    public imagesample() {
        setTitle("I am Ironman.");
        myPanel pn = new myPanel();
        add("Center",pn);
        img = Toolkit.getDefaultToolkit().getImage(s);
        setSize(500,300);
        setVisible(true);
    }
    
    class myPanel extends JPanel {
        public void paint(Graphics g) {
            super.paint(g);
            g.drawImage(img, 60, 30, 350, 200, this);
        }
    }
    public static void main(String[] args) {
        imagesample imgs = new imagesample();
    }
}

 

 

 

 

 

(4) 이벤트와 그래픽

특정 이벤트가 발생하면 도형을 그리는 처리를 해보겠습니다.

이벤트가 발생하면 원하는 도형을 그리기 위해서는 repaint() 메소드를 이용해서 paint() 메소드를 다시 실행해야 합니다.

 

 

public class 클래스명 extends JFrame implements 리스너명 {

    ....

    class myPanel extends JPanel {            // myPanel은 JPanel을 상속받을 클래스명입니다.

        public void paint(Graphics g) {

            super.paint(g);

            g.그래픽메소드( );

        }

    }

    

    추상메소드( )  {      // 리스너에 포함되어 있는 추상메소드( )

        ....

        repaint;            // paint( ) 메소드를 다시 실행함

    }

}

 

 

다음은 라디오 버튼을 누르면 원에 해당 색상이 채워지는 코드 예시입니다.

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
public class grpevtsample extends JFrame implements ItemListener{
    JRadioButton red, blue, green;
    ButtonGroup grp;
    String chcolor="default";
    
    public grpevtsample() {
        setTitle("원을 색칠하기");
        setLayout(new BorderLayout());
        
        red=new JRadioButton("빨강");
        blue=new JRadioButton("파랑");
        green=new JRadioButton("초록");
        
        red.addItemListener(this);
        blue.addItemListener(this);
        green.addItemListener(this);
        
        grp=new ButtonGroup();
        
        grp.add(red);
        grp.add(blue);
        grp.add(green);
        
        myPanel pn =new myPanel();
        JPanel pn2 =new JPanel();
        
        pn2.add(red);
        pn2.add(blue);
        pn2.add(green);
        
        add("North",pn2);
        add("Center",pn);      // 대문자 조심하기!!!
        
        setSize(300,220);
        setVisible(true);
    }
    public void itemStateChanged(ItemEvent e) {
        if(red.isSelected()) {
            chcolor = "RED";
            repaint();
        }
        if(blue.isSelected()) {
            chcolor="BLUE";
            repaint();
        }
        if(green.isSelected()) {
            chcolor="GREEN";
            repaint();
        }
    }
    class myPanel extends JPanel {
        public void paint(Graphics g) {
            super.paint(g);
            switch(chcolor) {
            case "default":         //이벤트 발생하지 않아도 검정색 원을 화면에 출력하기 위해서
                g.setColor(Color.black);
                break;
            case "RED":
                g.setColor(Color.red);
                break;
            case "BLUE":
                g.setColor(Color.blue);
                break;
            case "GREEN":
                g.setColor(Color.green);
                break;
            }
            g.fillOval(80, 30, 120, 80);
        }
    }
    public static void main(String [] args) {
        grpevtsample gs = new grpevtsample();
    }
}

처음에 실행하면 검정색상이 채워진 타원이 나옵니다. 라디오 버튼을 클릭해서 이벤트를 발생시키면 타원은 해당 색상으로 채워집니다.