PowerPoint 프레젠테이션

Transcription

1 명품 JAVA Essential 1

2 2 학습목표 1. 스윙컴포넌트그리기와 paintcomponent() 활용 2. Graphics 객체에대한이해 3. 도형그리기와칠하기 4. 이미지그리기 5. repaint() 활용하기 6. 마우스와그래픽응용

3 스윙컴포넌트그리기, paintcomponent() 3 스윙의페인팅기본 모든컴포넌트는자신의모양을스스로그린다. 컨테이너는자신을그린후그위에자식컴포넌트들에게그리기지시 모든스윙컴포넌트는자신의모양을그리는 paintcomponent() 메소드보유 public void paintcomponent(graphics g) 스윙컴포넌트가자신의모양을그리는메소드 JComponent 의메소드 : 모든스윙컴포넌트가이메소드를오버라이딩함 언제호출되는가? 컴포넌트가그려져야하는시점마다호출 크기가변경되거나, 위치가변경되거나, 컴포넌트가가려졌던것이사라지는등 개발자가직접호출하면안됨 매개변수인 Graphics 객체 그래픽컨텍스트 : 컴포넌트그리기에필요한도구를제공하는객체 자바플랫폼에의해공급 색지정, 도형그리기, 클리핑, 이미지그리기등의메소드제공

4 paintcomponent() 의오버라이딩과 JPanel 4 paintcomponent(graphic g) 의오버라이딩 개발자가 JComponent를상속받아새로운컴포넌트설계기존컴포넌트의모양에변화를주고자할때 class MComponent extends JXXX {... 필요한그리기코드작성 JPanel 비어있는컨테이너개발자가다양한 GUI를창출할수있는캔버스로적합 JPanel을상속받아개발자임의의모양을가지는패널로많이사용

5 예제 11-1 : JPanel 을상속받은패널에도형그리기 5 JPanel 을상속받아패널을구성하고이곳에그림과같은 3 개의도형을그려라. import javax.swing.*; import java.awt.*; public class paintjpanelex extends JFrame { paintjpanelex() { settitle("jpanel 의 paintcomponent() 예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(250,200); setvisible(true); (10,10) 50x50크기 (50,50) (90,90) 파란색사각형 마젠타색사각형 // JPanel 을상속받는새패널구현 g.setcolor(color.blue); // 파란색선택 g.drawrect(10,10,50,50); g.drawrect(50,50,50,50); g.setcolor(color.magenta); // 마젠타색선택 g.drawrect(90,90,50,50); 패널내에이전에그려진잔상을지우기위해호출 public static void main(string [] args) { new paintjpanelex();

6 그래픽기반 GUI 프로그래밍 6 그래픽기반 GUI 프로그래밍 스윙컴포넌트에의존하지않고선, 원이미지등을이용하여직접화면을구성하는방법 그래픽기반 GUI 프로그래밍의학습이필요한이유 컴포넌트의한계를극복하고차트, 게임등자유로운콘텐트표현 그래픽은컴포넌트에비해화면출력속도가빠름 스윙컴포넌트들로모두그래픽으로작성되어있어, 그래픽에대한학습은자바 GUI 의바탕기술을이해하는데도움 그래픽을이용하여개발자자신만의컴포넌트개발 자바의그래픽 (Graphics) 좌표시스템 (0,0) X 축 Y 축

7 Graphics 와문자열출력 7 Graphics 의기능 색상선택하기문자열그리기도형그리기도형칠하기이미지그리기클리핑 문자열출력을위한 Graphics 메소드 Graphics g; g.drawstring(" 자바는재밌다.~~", 30,30); // (30, 30) 위치에문자열출력

8 그래픽의색과폰트 8 색 : Color 클래스 자바의색 : r(red), g(green), b(blue) 성분으로구성, 각성분은 0~255(8 비트 ) 범위의정수 예 ) 빨간색 : new Color(255, 0, 0), 초록색 : new Color(0x0000ff00); 노란색 : Color.YELLOW 폰트 : Font 클래스 Graphics 에색과폰트설정 Graphics g; Font f = new Font("Arial", Font.ITALIC, 30); g.setfont(f); g.setcolor(color.red); g.drawstring("how much", 30, 30); "Arial" 체와빨간색으로 "How much" 를 (30, 30) 위치에출력하는사례

9 예제 11-2 : Color 와 Font 를이용하여문자열그리기 9 import javax.swing.*; import java.awt.*; Color 와 Font 를이용하여그림과같이문자열을출력하라. "How much?" 는 "Arial" 체로, "This much!!" 는 Jokerman 체로한다. Jokerman 체는아쉽게도한글을지원하지않는다. public class GraphicsColorFontEx extends JFrame { GraphicsColorFontEx() { settitle(" 문자열, Color, Font 사용예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(300, 300); setvisible(true); (30,30) g.setcolor(color.blue); // 파란색지정 g.drawstring(" 자바가정말재밋다.~~", 30,30); g.setcolor(new Color(255, 0, 0)); // 빨간색지정 g.setfont(new Font("Arial", Font.ITALIC, 30)); g.drawstring("how much?", 30, 70); g.setcolor(new Color(0x00ff00ff)); for(int i=1; i<=4; i++) { g.setfont(new Font("Jokerman", Font.ITALIC, i*10)); g.drawstring("this much!!", 30, 60+i*40); public static void main(string [] args) { new GraphicsColorFontEx();

10 도형그리기와칠하기 10 도형그리기 선, 타원, 사각형, 둥근모서리사각형, 원호, 폐다각형그리기선의굵기조절할수없음 도형칠하기 도형을그리고내부를칠하는기능 도형의외곽선과내부를따로칠하는기능없음도형칠하기를위한메소드 그리기메소드명에서 draw 대신 fill로이름대치하면됨. fillrect(), filloval() 등

11 예제 11-3 : 선그리기 11 Graphics 의 drawline() 을이용하여컨텐트팬에 (20, 20) 에서 (100, 100) 까지빨간선을그리는프로그램을작성하라. import javax.swing.*; import java.awt.*; public class GraphicsDrawLineEx extends JFrame { GraphicsDrawLineEx() { settitle("drawline 사용예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(200, 150); setvisible(true); (20,20) (100,100) g.setcolor(color.red); // 빨간색을선택한다. g.drawline(20, 20, 100, 100); public static void main(string [] args) { new GraphicsDrawLineEx();

12 다른도형그리기사례 12 g.setcolor(color.red); g.drawoval(20,20,80,80); (20,20) 80x80 g.setcolor(color.red); g.drawrect(20,20,80,80); (20,20) 80x80 g.setcolor(color.red); g.drawroundrect(20,20,120,80,40,60); (20,20) 120x

13 13 Graphics 의원호와폐다각형그리기메소드

14 원호와폐다각형그리기사례 14 g.setcolor(color.red); g.drawarc(20,100,80,80,90,270); startangle=90도 (20,100) 0도 80x80 arcangle=270 도 g.setcolor(color.red); (80,40) int []x = {80,40,80,120; int []y = {40,120,200,120; g.drawpolygon(x, y, 4); (40,120) (80,200) (120,120)

15 예제 11-4 : 도형칠하기 15 Graphics 의칠하기메소드를이용하여그림과같은패널을작성하라. import javax.swing.*; import java.awt.*; public class GraphicsFillEx extends JFrame { GraphicsFillEx() { settitle("fillxxx 사용예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(100, 350); setvisible(true); g.setcolor(color.red); g.fillrect(10,10,50,50); g.setcolor(color.blue); g.filloval(10,70,50,50); g.setcolor(color.green); g.fillroundrect(10,130,50,50,20,20); g.setcolor(color.magenta); g.fillarc(10,190,50,50,0,270); g.setcolor(color.orange); int []x ={30,10,30,60; int []y ={250,275,300,275; g.fillpolygon(x, y, 4); public static void main(string [] args) { new GraphicsFillEx();

16 스윙에서이미지를그리는 2 가지방법 JLabel 을이용한이미지그리기 ImageIcon image = new ImageIcon("images/apple.jpg"); JLabel label = new JLabel(image); panel.add(label); 장점 : 이미지그리기간편용이 단점 : 이미지의원본크기대로그리므로이미지크기조절불가 2. Graphics 의 drawimage() 로이미지출력 장점 : 이미지일부분등이미지의원본크기와다르게그리기가능 단점 : 컴포넌트로관리할수없음이미지의위치나크기등을적절히조절하는코딩필요

17 Graphics 의 drawimage() 메소드 17 원본크기로그리기 크기조절하여그리기 * ImageObserver 는이미지가다그려졌을때, 통보를받는객체를지정하는매개변수이미지는경우에따라디코딩등으로인해시간이오래걸릴수있기때문에, 이미지그리기가완료되었는지통보받을때사용. 보통의경우 this 를주거나 null 을주어통보를받지않을수있음

18 이미지그리기샘플코드 18 이미지로딩 : Image 객체생성 ImageIcon icon = new ImageIcon( image/image0.jpg ); Image img = icon.getimage(); (20,20) 위치에원본크기로그리기 고정크기임 g.drawimage(img, 20, 20, this); (20, 20) 위치에 100x100 크기로그리기 고정크기임 g.drawimage(img, 20, 20, 100, 100, this); 이미지를패널에꽉차도록그리기 JPanel 의크기로그리기 가변크기임 JPanel 의크기가변할때마다이미지의크기도따라서변함 g.drawimage(img, 0, 0, getwidth(), getheight(), this);

19 예제 11-5 : 원본크기로이미지그리기 19 (20,20) import javax.swing.*; import java.awt.*; public class GraphicsDrawImageEx1 extends JFrame { Container contentpane; GraphicsDrawImageEx1() { settitle(" 원본크기로원하는위치에이미지그리기 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(300, 400); setvisible(true); ImageIcon icon = new ImageIcon("images/image0.jpg"); Image img = icon.getimage(); g.drawimage(img, 20,20, this); public static void main(string [] args) { new GraphicsDrawImageEx1();

20 예제 11-6 : JPanel 크기에맞추어이미지그리기 20 import javax.swing.*; import java.awt.*; public class GraphicsDrawImageEx2 extends JFrame { GraphicsDrawImageEx2() { settitle(" 패널의크기에맞추어이미지그리기 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(200, 300); setvisible(true); ImageIcon icon = new ImageIcon("images/image0.jpg"); Image img = icon.getimage(); g.drawimage(img, 0, 0, getwidth(), getheight(), this); 패널의폭과높이 public static void main(string [] args) { new GraphicsDrawImageEx2();

21 repaint() 21 repaint() 모든컴포넌트가가지고있는메소드자바플랫폼에게컴포넌트그리기를강제지시하는메소드 repaint() 를호출하면, 자바플랫폼이컴포넌트의 paintcomponent() 호출 repaint() 의호출이필요한경우 component.repaint(); 개발자가컴포넌트를다시그리고자하는경우 프로그램에서컴포넌트의모양과위치를변경하고바로화면에반영시키고자하는경우 컴포넌트가다시그려져야그때변경된위치에변경된모양으로출력됨 repaint() 는자바플랫폼에게지금당장컴포넌트를다시그리도록지시함 부모컴포넌트부터다시그리는것이좋음 컴포넌트 repaint() 가불려지면 이컴포넌트는새로운위치에다시그려지지만이전의위치에있던자신의모양이남아있음부모컴포넌트의 repaint() 를호출하면 부모컨테이너의모든내용을지우고자식을다시그리기때문에컴포넌트의이전모양이지워지고새로변경된크기나위치에그려짐 component.getparent().repaint();

22 예제 11-7 : repaint() 와마우스를이용한타원그리기 22 마우스를드래깅하여타원을그리는프로그램을작성하라. 마우스로한점을찍고드래깅을하면타원이그려진다. 드래깅하는동안타원모양을보기위해서는 mousedragged() 에서 repaint() 를호출해야한다.

23 23 예제 11-7 정답 import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GraphicsDrawOvalMouseEx extends JFrame { GraphicsDrawOvalMouseEx() { settitle(" 마우스드래깅으로타원그리기예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(300, 300); setvisible(true); public static void main(string [] args) { new GraphicsDrawOvalMouseEx(); // 타원을그릴패널작성. 이패널에마우스리스너구현 Point start=null, end=null; // 마우스의시작점과끝점 public MyPanel() { MyMouseListener listener = new MyMouseListener(); repaint() 가호출되면, 자바플랫폼에의해 MyPanel 의 paintcomponent() 가호출된다. 여기서 start 와 end 사이의타원을그린다. // listener 를아래두리스너로공통으로등록해야한다. addmouselistener(listener); addmousemotionlistener(listener); class MyMouseListener extends MouseAdapter { public void mousepressed(mouseevent e) { start = e.getpoint(); public void mousedragged(mouseevent e) { end = e.getpoint(); repaint(); // 패널의그리기요청주목 if(start == null) // 타원이만들어지지않았음 return; g.setcolor(color.blue); // 파란색선택 int x = Math.min(start.x, end.x); int y = Math.min(start.y, end.y); int width = Math.abs(start.x - end.x); int height = Math.abs(start.y - end.y); g.drawoval(x, y, width, height); // 타원그리기

24 예제 11-8 : repaint() 와마우스를이용한여러개의선그리기 24 그림과같이마우스를이용하여여러개의선을그리는프로그램을작성하라. 마우스를누르고드래깅하여놓으면선이그려진다. 여러개의선을그리기위해각선의위치를기억하는벡터를사용한다. 그린선이보이게하기위해서는 mousereleased() 에서 repaint() 를호출한다.

25 예제 11-8 정답 25 import javax.swing.*; import java.awt.*; import java.util.*; import java.awt.event.*; public class GraphicsDrawLineMouseEx extends JFrame { GraphicsDrawLineMouseEx() { settitle(" 마우스로여러개의선그리기예제 "); setdefaultcloseoperation(jframe.exit_on_close); setcontentpane(new MyPanel()); setsize(300, 300); setvisible(true); public static void main(string [] args) { new GraphicsDrawLineMouseEx(); Vector<Point> vstart = new Vector<Point>(); Vector<Point> vend = new Vector<Point>(); public MyPanel() { addmouselistener(new MouseAdapter(){ public void mousepressed(mouseevent e) { Point startp = e.getpoint(); vstart.add(startp); public void mousereleased(mouseevent e) { Point endp = e.getpoint(); vend.add(endp); ); // 패널의다시그리기를요청한다. repaint(); // 주목 g.setcolor(color.blue); for(int i=0; i<vstart.size(); i++) { Point s = vstart.elementat(i); Point e = vend.elementat(i); g.drawline((int)s.getx(), (int)s.gety(), (int)e.getx(), (int)e.gety());