Microsoft PowerPoint - 12장

Transcription

1 1 스윙컴포넌트그리기, 메소드 제 12 장그래픽 2 스윙의기본철학 모든컴포넌트는자신의모양을스스로그린다. 컨테이너는자신을그린후자식들에게그리기지시 public void paintcomponent(graphics g) 스윙컴포넌트가자신의모양을그리는메소드 JComponent의메소드 - 모든스윙컴포넌트가이메소드소유 컴포넌트가그려져야하는시점마다호출 컴포넌트의크기가변경되거나, 컴포넌트의위치가변경되거나컴포넌트가가려졌던것이사라지는등 Graphics 객체 경로명 java.awt.graphics 컴포넌트를위한그래픽컨텍스트 그리기에필요한모든정보와메소드를제공하는객체 색지정, 도형그리기, 클리핑, 이미지그리기등을위한메소드제공 사용자가원하는모양을그리고자할때 paintcomponent(graphic g) 를오버라이딩하여재작성... 필요한그리기코드작성 예제 12-1 : JPanel을상속받다도형그리기 3 JPanel의용도 사용자가그래픽을통해다양한 UI를창출하는일종의캔버스 public class paintjpanelex extends JFrame { paintjpanelex() { settitle("jpanel paintcomponent 예제 "); contentpane.add(panel, BorderLayout.CENTER); setsize(250,200); 자바의그래픽좌표시스템 4 X 축 (0,0) Y 축 (10,10) 50x50크기 (50,50) (90,90) 사각형은파란색 g.drawrect(10,10, 50, 50); g.drawrect(50,50, 50, 50); g.drawrect(90,90, 50, 50); new paintjpanelex();

2 Graphics 5 Graphics 의기능 색상선택하기 문자열출력 도형그리기 도형칠하기 이미지출력 클리핑 문자열그리기를위한 Graphics 메소드 void drawstring(string str, int x, int y) str 문자열을 (x,y) 영역에출력한다. 이때컨텍스트내의현재색과현재폰트로출력한다. 예제 12-2 : drawstring() 메소드를이용하여문자열출력하기 6 JPanel 을상속받아 를오버라이딩하고 drawstring() 메소드를사용하여다음그림과같이패널내의 (30, 30) 과 (60, 60) 에각각문자열을출력하는스윙프로그램을작성하라. (30,30) (60,60) public class GraphicsDrawStringEx extends JFrame { GraphicsDrawStringEx() { settitle("drawstring 사용예제 "); contentpane.add(panel, BorderLayout.CENTER); setsize(250,200); g.drawstring(" 자바는재밌다.~~", 30,30); g.drawstring(" 얼마나? 하늘만큼땅만큼!!!!", 60, 60); new GraphicsDrawStringEx(); 7 Color 와 Font 클래스 Color java.awt.color, 하나의색을표현하는클래스 Red, Green, Blue 의 3 성분으로구성되며각성분의크기는 0-255(8비트 ) 생성자 Color(int r, int g, int b) red(r), green(g), blue(b) 값으로 srgb 색생성 new Color(255, 0, 0) ;// 완전빨강색 Color(int rgb) rgb 정수값은총 32 비트중하위 24 비트만이유효하고 0x00rrggbb 로표현된다. 하위 8 비트는 blue, 그다음상위 8 비트는 green, 그다음 8 비트는 blue 성분을표시한다. new Color(0x0000ff00); // 완전초록 다른생성방법 Color.BLUE 등의 static 상수활용 Graphics g; g.setcolor(new Color(255, 0, 0)); // 빨간색을생성, 그래픽색으로설정 g.setcolor(new Color(0x0000ff00)); // 초록색생성, 그래픽색으로설정 g.setcolor(color.yellow); // 노란색을그래픽색으로설정 Font java.awt.font, 글자의폰트를표현하는클래스생성자 Font(String fontface, int style, int size) fontface는 " 고딕체 ", Arial" 등 style은 Font.BOLD, Font.ITALIC, Font.PLAIN 셋중하나 size는픽셀단위의크기 Graphics 객체에서색상과폰트설정 void setcolor(color color) 그래픽컨텍스트의현재칠할색을 color로지정한다. void setfont(font font) 그래픽컨텍스트의현재폰트를 font로지정 Graphics g; Font f = new Font("Arial", Font.ITALIC, 30); g.setfont(f); g.drawstring("how much", 30,30); 예제 12-3 : Color와 Font를활용한문자열그리기 8 Color 와 Font 클래스를이용하여다음그림과같이출력되는패널을작성하라. public class GraphicsColorFontEx extends JFrame { GraphicsColorFontEx() { settitle("color, Font 사용예제 "); contentpane.add(panel, BorderLayout.CENTER); setsize(350, 450); g.drawstring("i Love Java.~~", 30,30); g.setcolor(new Color(255, 0, 0)); g.setfont(new Font("Arial", Font.ITALIC, 30)); g.drawstring("how much?", 30, 60); g.setcolor(new Color(0x00ff00ff)); for(int i=1; i<=5; i++) { g.setfont(new Font("Jokerman", Font.ITALIC, i*10)); g.drawstring("this much!!", 30, 60+i*60); new GraphicsColorFontEx();

3 Graphics 의도형그리기메소드 9 void drawline(int x1, int y1, int x2, int y2) (x1,y1) 에서 (x2,y2) 까지선을그린다. void drawoval(int x1, int y1, int w, int h) (x1,y1) 에서 wxh 크기의사각형에내접하는타원그린다. void drawrect(int x1, int y1, int w, int h) (x1,y1) 에서 wxh 크기의사각형을그린다. void drawroundrect(int x1, int y1, int w, int h, int arcwidth, int archeight) (x1,y1) 에서 wxh 크기의사각형을그리고, 4 개의모서리는원으로처리 arcwidth는모서리의원수평반지름, archeight는수직반지름 선그리기사례 10 public class GraphicsDrawLineEx extends JFrame { GraphicsDrawLineEx() { settitle("drawline 사용예제 "); setsize(200, 150); (100,100) g.drawline(20,20, 100, 100); new GraphicsDrawLineEx(); 다른도형그리기사례 Graphics 의원호와폐다각형그리기메소드 11 g.drawoval(20,20,80,80); g.drawrect(20,20,80,80); 80x80 80x80 12 void drawarc(int x, int y, int w, int h, int startangle, int arcangle) (x1,y1) 에서 wxh 크기의사각형에내접하는원호를그린다. 원호의시작각도는 startangle, 원호각도는 arcangle 원호는 3시방향을 0도의기점에서시작 arcangle이양수이면반시계방향, 음수이면시계방향으로그리기 void drawpolygon(int []x, int []y, int n) 연결된폐다각형을그리며, 다각형의점들은 x, y 배열에서지정됨. (x[0], y[0]),,(x[n-1], y[n-1]) 의총 n 개의점을연결함 g.drawroundrect(20,20,120,80,40,60); 120x

4 원호와폐다각형그리기사례 Graphics 의도형칠하기 13 g.drawarc(20,100,80,80,90,270); startangle=90도 (20,100) 0도 80x80 arcangle=270도 14 도형칠하기 도형을그리고그내부를칠하는기능 도형의외곽선과내부를따로칠하는기능은없다. 도형칠하기를위한메소드는도형그리기메소드명에서 draw 를 fill 로대치하면된다. 인자는동일함 예 ) drawrect() -> fillrect(), drawarc() -> fillarc() int []x = {80,40,80,120; int []y = {40,120,200,120; g.drawpolygon(x, y, 4); (40,120) (80,40) (80,200) (120,120) 칠하기메소드 void filloval(int x1, int y1, int w, int h) void fillrect(int x1, int y1, int w, int h) void fillroundrect(int x1, int y1, int w, int h, int arcwidth, int archeight) void fillarc(int x, int y, int w, int h, int startangle, int arcangle) void fillpolygon(int []x, int []y, int n) 예제 12-4 : 도형칠하기예 15 Graphics 의칠하기메소드를이용하여다음그림과같은패널을작성하라. public class GraphicsFillEx extends JFrame { GraphicsFillEx() { settitle("fillxxx 사용예제 "); setsize(100, 350); g.fillrect(10,10,50,50); 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); new GraphicsFillEx(); 스윙에서이미지를그리는 2 가지방법 JLabel 컴포넌트를이용한이미지출력 JLabel 컴포넌트가이미지를자신의영역에그린다. ImageIcon image = new ImageIcon("images/apple.jpg"); JLabel label = new JLabel(image); panel.add(label); 장점 : 이미지그리기가간편하고쉬운장점 단점 : 이미지의원본크기그대로그리므로이미지의크기조절불가능 2. JPanel에 Graphics 메소드를이용한이미지출력 장점 : 이미지의원본크기와다르게그리기가능 단점 : Graphics.drawImage() 메소드를호출하여개발자가직접이미지그리기실행

5 Graphics 로이미지그리기 이미지그리기샘플코드 총 6 개의메소드 원본크기로그리기 void drawimage(image img, int x, int y, Color bgcolor, ImageObserver observer) void drawimage(image img, int x, int y, ImageObserver observer) 크기조절하여그리기 void drawimage(image img, int x, int y, int width, int height, Color bgcolor, ImageObserver observer) void drawimage(image img, int x, int y, int width, int height, ImageObserver observer) 원본의일부분을크기조절하여그리기 void drawimage(image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, Color bgcolor, ImageObserver observer) void drawimage(image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer) 이미지로딩 : Image 객체생성원본이미지를 위치에원본크기로그리기. 고정크기임원본이미지를 100x100 크기로조절하여그리기 고정크기임원본이미지를패널에꽉차도록그리기 JPanel의크기로조절하여그리기 가변크기임 JPanel의크기가변할때마다이미지의크기도따라서변함원본이미지의 (50, 0) 에서 (150,150) 사각형부분을 JPanel의 에서 (250,100) 영역에그리기 고정크기임 // 그리고자하는이미지가 image/image0.jpg 인경우 ImageIcon icon = new ImageIcon( image/image0.jpg ); Image img = icon.getimage(); g.drawimage(img, 20, 20, this); g.drawimage(img, 20, 20, 100, 100, this); g.drawimage(img, 0, 0, getwidth(), getheight(), this); g.drawimage(img, 20,20,250,100,50,0,150,150, this); 예제 12-5 : 원본이미지그리기 19 public class GraphicsDrawImageEx1 extends JFrame { GraphicsDrawImageEx1() { settitle("drawimage 사용예제 1"); setsize(300, 400); ImageIcon imageicon = new ImageIcon("images/image0.jpg"); Image image = imageicon.getimage(); g.drawimage(image, 20,20, this); new GraphicsDrawImageEx1(); 예제 12-6 : JPanel 크기로이미지그리기 20 public class GraphicsDrawImageEx2 extends JFrame { GraphicsDrawImageEx2() { settitle("drawimage 사용예제 2"); setsize(300, 400); ImageIcon imageicon = new ImageIcon("images/image0.jpg"); Image image = imageicon.getimage(); g.drawimage(image, 0, 0, this.getwidth(), this.getheight(), this); new GraphicsDrawImageEx2();

6 21 예제 12-7 : 이미지의일부분을크기조절하여그리기 public class GraphicsDrawImageEx3 extends JFrame { GraphicsDrawImageEx3() { settitle("drawimage 사용예제 3"); setsize(300, 400); 클리핑 22 클리핑 (Clipping) 이란? 그리기 ( 그리기, 칠하기, 이미지그리기, 문자열출력등 ) 에의해그래픽대상컴포넌트내일정영역에있는부분만보이도록하는기능 그래픽대상컴포넌트내클리핑영역에서만그리기연산진행 클리핑영역 : 하나의사각형영역클리핑영역 ImageIcon imageicon = new ImageIcon("images/image0.jpg"); Image image = imageicon.getimage(); (250,100) g.drawimage(img, 20,20,250,100,100,50,200,200, this) new GraphicsDrawImageEx3(); 클리핑이설정되지않아서, 전체영역이클리핑영역으로설정된경우 특정사각형영역을클리핑영역으로설정된경우 클리핑영역설정메소드 23 Graphics 의클리핑메소드 void setclip(int x, in y, int w, int h) 그래픽대상컴포넌트의 (x, y) 위치에서 wxh 의사각형영역을클리핑영역으로지정 void cliprect(int x, in y, int w, int h) 기존클리핑영역과지정된사각형영역 ((x,y) 에서 wxh의영역 ) 의교집합영역을새로운클리핑영역으로설정 cliprect() 이계속불리게되면클리핑영역을계속줄어들게된다. 예제 12-8 : 클리핑예제 24 클리핑영역 : (50,20) 에서 150x150 사각형영역 public class GraphicsClipEx extends JFrame { GraphicsClipEx() { settitle(" 클리핑예제 "); setsize(300, 400); ImageIcon icon = new ImageIcon("images/image0.jpg"); Image img = icon.getimage(); g.setclip(50, 20, 150, 150); g.drawimage(img, getwidth(), getheignt(), this); g.setfont(new Font("SanSerif", Font.ITALIC, 40)); g.drawstring("ji Sung Park", 10, 150); new GraphicsClipEx();

7 스윙의페인팅 스윙컴포넌트가그려지는과정 25 JComponent. 컴포넌트자신과모든자손그리기 JComponent. 메소드는다음메소드를순서대로호출 JComponent. 컴포넌트자신의모양그리기 JComponent. 컴포넌트의외곽그리기 JComponent. 컴포넌트의자식들그리기 개발자는 를직접호출하면안됨 는페인팅메카니즘에의해자동으로호출됨 26 컨테이너 자식컨테이너 자식컨테이너 자식컴포넌트 자식컴포넌트 자식컴포넌트 re 메소드 27 Component의메소드 re 를호출해야하는경우 개발자가컴포넌트를다시그리고자하는경우 프로그램내에서컴포넌트의모양과위치를변경하였지만바로화면에반영되지않는다. 이이유는이컴포넌트가다시그려져야그때변경된위치에변경된모양으로출력됨 re 는지금당장컴포넌트를다시그리도록지시함 component.re; 부모컴포넌트부터다시그리는것이좋음 특히컴포넌트의위치가변경된경우 re 가불려지면이컴포넌트는새로운위치에다시그려지지만이전의위치에있던자신의모양이남아있기때문에부모컴포넌트의 re 를호출하는것이좋음 component.getparent().re; 예제 12-9 : 마우스를이용한선그리기 (re 사용 ) 28import java.util.*; import java.awt.event.*; public class GraphicsDrawLineMouseEx extends JFrame { GraphicsDrawLineMouseEx() { settitle("drawing Line by Mouse 예제 "); setsize(300, 300); new GraphicsDrawLineMouseEx(); Vector<Point> vs = new Vector<Point>(); Vector<Point> ve = new Vector<Point>(); Point startp = null; Point endp = null; public MyPanel() { addmouselistener(new MouseAdapter(){ public void mousepressed(mouseevent e) { startp = e.getpoint(); public void mousereleased(mouseevent e) { endp = e.getpoint(); vs.add(startp); ve.add(endp); re; ); for(int i=0; i<vs.size(); i++) { Point s = vs.elementat(i); Point e = ve.elementat(i); g.drawline((int)s.getx(), (int)s.gety(), (int)e.getx(), (int)e.gety());

8 JButton 을상속받아새로운버튼생성예 29 public class paintcomponentex extends JFrame { paintcomponentex() { settitle("paintcomponent 사용예제 "); contentpane.setlayout(new FlowLayout()); MyButton b = new MyButton("New Button"); b.setopaque(true); b.setbackground(color.cyan); contentpane.add(b); setsize(250,200); class MyButton extends JButton { MyButton(String s) { super(s); g.drawoval(0,0,this.getwidth()-1, this.getheight()-1); new paintcomponentex();