CodeOnWeb
Hanyang ERICA
Log in

그래픽스와 애플릿

이 장에서는 그래핀스와 관련된 가장 기본적인 내용들(좌표시스템, 색의 표현, 간단한 도형 그라기 등)을 다룬다.
애플릿은 웹 브라우저에서 실행되는 자바 프로그램 이며, 이 장에서는 애플릿의 기본적인 개념들을 소개한다.

Baik Jeanseong 2018/11/15, 10:44

CSE2016 프로그램 설계 방법론

학습목표

  • 그래픽 객체 이해
  • 간단한도형그리기
  • 문자열그리기
  • 응용 프로그램과 애플릿 차이 이해
  • 주어진 애플릿 작성, 번역, 실행
  • 애플릿에 대응하는 HTML 파일 작성
  • 간단한애플릿작성

그래픽스

  • 그림을 컴퓨터에 저장하기 위해선 픽셀들(pixels) 과 같은 형태로 디지털화 한다.
  • 그림을 나타내기 위해 사용되는 픽셀들의 수는 그림 해상도라고 부른다.
  • 모니터에 의해 보여 질 수 있는 픽셀들의 수는 모니터 해상도라고 부른다.

좌표 시스템

  • 그림의 원점을 좌측 상단부터 시작되는 좌표 시스템을 사용한다.
  • 자바 좌표 시스템에서 각 점은 값들의 쌍 (x, y) 에 의해 나타내진다(좌측 상단의 좌표는 (0, 0)).
  • x축 좌표는 오른쪽으로 갈수록 증가하고 y축 좌표는 아래로 내려갈수록 증가한다.

  • 다음 그림은 원점(0, 0)과 점(200, 100)을 보여준다.

file

색의 표현

  • 흑백 그림은 픽셀당 한 비트를 사용하여 저장한다(*0이면 흰색, 1이면 흑색).
  • 컬러 그림은 보편적으로는 3개의 색(RGB: Red, Green, Blue) 을 혼합하여 나타낸다.
  • 3개의 색이 0~255 사이의 값을 가짐으로써 공헌도를 나타낸다(검은색은 R값, G값,과 B값이 각각 0이고 흰색은 각 값이 255)
  • 자바에서 색을 쉽게 나타내기 위해 java.awt패키지의 Color 클래스를 사용한다.
  • 다음 표에 보이는 이미 정의된 색들을 사용가능하다.
색(Color)Color 클래스 상수RGB 값
검은색Color.black0, 0, 0
파란색Color.blue0, 0, 255
짙은파란색Color.cyan0, 255, 255
회색Color.gray128, 128, 128
짙은회색Color.darkgray64, 64, 64
열은회색Color.lightgray192, 192, 192
초록색Color.green0, 255, 0
짙은 분홍색Color.magenta255, 0, 255
오렌지색Color.orange255, 200, 0
분홍색Color.pink255, 175, 175
빨간색Color.red255, 0, 0
흰색Color.white255, 255, 255
노란색Color.yellow255, 255, 0
  • Color 클래스의 클래스 상수들로 나타내진다(검은색: Color.black).
  • 예를 들면, 분홍색을 나타내는 색 객체는 다음과 같이 정의할 수 있다.

도형 그리기

  • 그래픽스(Graphics) 클래스는 java.awt 패키지에 정의되어 있으며 선, 직사각형, 타원과 같은 모양들 을 그리게 하는 많은 메소드들을 포함한다.
  • 다음 표에 Graphics 클래스의 기본적인 그리기 메소드들이 나열되어 있다.
메소드명설 명
drawLine(int x1, int y1, int x2, int y2)좌표(x1, y1)과 좌표(x2, y2) 사이에 직선을 그린다
drawRect(int x, int y, int width, int height)좌측 상단 모서리의 좌표가 (x, y)이고 가로가 width이고 세로가 height인 직사각형을 그린다
drawOval(int x, int y, int width, int height)타원을 둘러싸고 있는 직사각형의 좌측 상단 모서리의 좌표가(x, y)이고 가로가 width이고 세로가 height인 직사각형에 포함되는 최대 크기의 타원을 그린다
drawArc( int x, int y, int width, int height, int startAngle, int arcAngle)좌측 상단 모서리의 좌표가(x, y)이고 가로가 width이고 세로가 height인 직사각형에 포함되는 최대 크기의 타원의 시작 각이 startAngle 이고 호각이 arcAngle인 원호를 그린다
drawString(String str, int x, int y)좌표(x, y)부터 오른쪽으로 문자열 str을 쓴다
setFont(Font font)그래픽스 객체의 폰트를 font로 변경한다
getColor()그래픽스 객체의 색을 반환한다
setColor(Color color)그래픽스 객체의 색을 color로 변경한다
  • 모양의 내부를 채우는 메소드의 이름은 fill로 시작한다.
  • 내부가 지정된 색으로 채워진 직사각형을 그리는 메소드의 이름은 fillRect이다(색을 지정하지 않을 경우 최근에 지정된 색).

  • 직선을 그리기 위해 drawLine 메소드를 이용한다. 다음 코드와 결과는 하나의 예제를 나타낸다.

file
- 직사각형을 그리기 위해서는 drawRect 메소드를 이용한다.
- 좌측 상단 모서리의 좌표가 (20, 10) 이고 가로가 100 이고 세로가 50 인 직사각형을 그린 예제 코드와 결과는 다음과 같다.

file

  • 타원을 그리는 메소드 drawOval은 타원을 둘러싸는 직사각형(bounding rectangle)의 왼쪽 상단 모서리의 좌표와 그 직사각형의 가로와 세로의 길이에 의해 정의된다. 예를 들면 타원을 둘러싸고 있는 직사각형의 좌측 상단 모서리의 좌표가 (20, 20)이고 가로가100이며 세로가 40인 직사각형에 포함되는 최대 크기의 타원을 그라기 위해 다음과 같이 메소드 호출을 한다.

file

  • 타원의 일부로 여겨질 수 있는 를 그리기 위해서 우리는 호가 일부인 타원과 타원의 그 일부를 지정해야 한다. 호의 시작점은 시작 각(start angle)에 의해 정의되고 호의끝 점은 호각(arc angle)에 의해 정의된다. 시작 각과 호 각은 도(˚)에 의해 나타낸다. 예를 들면 좌측 상단 모서리의 좌표가 (20, 20)이고 가로가 80이고 세로가 40인 직사각형에 포함되는 최대 크기의 타원의 시작 각이 30˚이고 호각이 90˚인 원호를 그리기 위해 다음과 같이 메소드 호출을 한다.

file

  • 문자열을 화면에 쓰기 위 해서 우리는 drawString 메소드를 이용한다. 예를 들면 좌측 하단 모서리의 좌표 (20, 20)부터 시작하여 오른쪽으로 문자열 ‘안녕하세요’를 쓰기 위해 다음과 같이 메소드 호출을 한다.

file

  • 문자열의 글꼴이나 크기를 바꾸기 위해서 우리는 setFont 메소드를 이용한다. 즉 문자열의 글꼴이나 크기를 바꾸기 위해서 우리는 다음과 같이 메소드 호출을 한다.

  • setFont 메소드 호출의 매개변수는 Font 객제이다 Font 객체는 세 개의 매개변수(글꼴,글자체와 크기)를 다음과 같이 생성자 메소드에 넘겨줌으로써 만들어진다.

  • 고딕체와 같은 흔히 사용되는 글자체와 글꼴은 각각의 표에 나열된다.
상수명글자체
Font.BOLD고딕체
Font.ITALlC이태릭체
Font.BOLD + Font.ITALIC고딕 및 이태릭체
Font.PLAIN보통체
글꼴설명
MonospacedCourier와 같은 타이프라이터 폰트
SansSerifArial과 같은 곡선들이 없는 폰트
SerifTimes New Roman과 같은 곡선 모서리를 가진 폰트
  • 표의 글꼴 코드를 수행한 코드와 결과 예제는 다음과 같다.

file

  • 화면에 모양들이 그려지거나 문자열들이 쓰여질 때 우라는 색을 정할 수 있다. 화변에 그려지는 것은 Graphics 객제여야 한다. 그 Graphics 객체의 색을 변경하기 위해서 우리는 setColor 메소드를 이용한다. 예를 들면 직사각형을 그릴 때 윤곽선을 파랗게 하기 위한 코드는 다음과 같다(g는 Graphics 객체를 가리카는 참조 변수).

  • 직사각형을 그릴 때 내부를 파란 색으로 하기 위한 코드는 다음과 같다.

  • 현 Graphics 객체의 색을 알기 위해서는 getColor 머l소드를 이용한다. 또한 우리는 화면의 배경 색을 주어진 색으로 변경 하기 위해 setBackground 메소드를 이용한다. 예를 들면 화면의 바탕 색을 회색으로 하기 위해서는 다음과 같이 한다.

애플릿

  • 자바 프로그램은 응용 프로그램과 애플릿으로 나눌 수 있다. 응용 프로그램은 자바 해석기를 사용하여 실행될 수 있는 독립적인 프로그램이다. 지금까지 우리가 본 프로그램들은 거의 다 응용 프로그램들이다. 애플릿은 웹 브라우저에서 실행되는 프로그램이다. 웹 브라우저에서 실행되기 위해서는 애플릿 코드가 HTML 문서 내에 포함되어야 한다. 애플릿은 웹 상에서 교환될 수 있고 또 다른 유형의 매체로 여겨진다.

  • 애플릿은 일반적으로 네트워크 상에서 전송될 수 있게 마련되었지만 웹 브라우저를 사용하여 내부적으로 실행될 수도 있다. 또한 애플릿은 자바의 JDK 안에 있는 애플릿 뷰어(appletviewer) 도구를 사용하여 실행될 수 있다. 이 책에서는 우리는 애플릿들의 실행 결과를 보여주기 위해 애플릿 뷰어를 사용한다. 그러나 애플릿을 작성하는 목적은 웹 페이지내에 그것에 대한 연결점(link)을 제공하여 어디서나 웹 브라우저를 이용하여 실행시키는것이다. 대부분의 웹 브라우저는 애플릿을 컴파일한 바이트코드를 실행할 수 있는 특별한자바 가상 컴퓨터를 가지고 있다. 브라우저가 애플릿 바이트코드 파일에 대한 연결점을 만나면 그 파일을 메모라 안으로 복사한 후 그 바이트코드를 실행시키기 위해 자바 가상 컴퓨터를 호출한다.

애플릿은 응용 프로그램과 다음의 여러 가지 점에서 다르다.

  • 애플릿은 독립적인 응용 프로그램이라기보다는 큰 프로그램의 일부라고 여겨진다. 따라서 애플릿은 응용 프로그램과 달리 main 메소드를 가지지 않는다.
  • 애플릿은 응용 프로그램과 다르게 호출된다. 즉 애플릿은 대응하는 HTML 문서안에 포함된다 HTML은 웹 페이지를 만드는데 사용되는 언어들 중의 하나이다.
  • 애플릿은 인터넷을 통해 전송되기 때문에 응용보다 더 많은 보안상 제약들이 있다.
  • 애플릿은 실행을 스스로 제어하지 못한다. 애플릿은 브라우저나 애플릿 뷰어에 의해 실행하라는 명령을 받을 때 실행된다.
  • 애플릿은 실행되는 방법이 다르기 때문에 생성자 메소드를 가지지 않는다. 대신에 생성자 메소드에서 보통 수행되는 초기화 등과 같은 기능들은 init 메소드에서 수행된다. 애플릿은 특정 목적들을 이루는 여러 개의 특별한 메소드들이 있다.

init()
- 이 메소드는 애플릿을 초기화하는데 사용되고 생성자 메소드와 비슷하게 동작하여 자바가 애플릿을 처음으로 실행시킬 때 자동적으로 시스템에 의해 호출된다. 보통 HTML의 param 꼬리표(tag) 에서 넘어온 값을 여기서 처리한다. 이 메소드는 한번만 실행되므로 한번만 실행되어야 하는 코드는 이곳에 삽입해야 한다.

start()
- 이 메소드는 자바가 init() 메소드를 호출한 후에 역시 자동적으로 호출하는 메소드로 사용자가 이 애플릿을 포함한 웹 페이지를 읽을 때마다 호출하게 된다. 즉 사용자가 다른 웹 페이지로 이동했다가 다시 애플릿이 있는 웹 페이지로 돌아오면 이 메소드가 다시 호출된다. 따라서 이 메소드는 init() 메소드와는 달리 여러 번 호출될 수 있다.

stop()
- 이 메소드는 애플릿이 포함된 웹 페이지를 떠날 때 자동적으로 실행되는 메소드이다. 이 메소드도 start() 메소드와 같이 반복적으로 호출되는 메소드이다.

destroy()
- 이 메소드는 브라우저가 완전히 종료될 때에 호출되며 애플릿을 실행하기 위해 사용된 자원을 시스템에 다시 반환한다.

paint(Graphics page)
- 이 메소드는 애플릿 내에 있는 그래픽 요소들이 그려질 필요가 있을 때마다 자동적으로 호출된다. 예를 들면, 애플릿이 처음 실행되거나 애플릿 창이 옮겨질 때 호출된다. 위 메소드중 paint 메소드는 애플릿에 의해 자동적으로 호출되어 애플릿의 내용을 그리기 위해 사용된다. paint 메소드는 Graphics 클래스의 한 객체인 매개 변수를 입력으로 받는다. Graphics 객체는 우리가 모양들을 그리고 텍스트를 쓸 수 있는 그래픽스 콘텍스트(context)를 정의한다.

  • 애플릿 프로그램은 JApplet 클래스의 하위 클래스여야 한다.

  • 다음 프로그램에 보여진 애플릿은 애플릿 창에 ‘안녕하세요’를 쓰는 간단한 애플릿 프로그램이다.

  • 위 애플릿 프로그램을 SimpleApplet.java라는 파일 이름으로 저장한 후 컴파일 하면 SimpleApplet.class라는 바이트코드 파일이 생성된다. 그리고 이 파일을 애플릿 뷰어나 브라우저에서 실행할 수 있다. 애플릿 뷰어는 JDK에서 지원하는 애플릿을 브라우저 없이 바로 결과를 볼 수 있게 하는 프로그램이고 브라우저에서 실행하기 위해서는 애플릿에 대응하는 HTML 파일을 만들어야 한다. 이 HTML 파일 안에 애플릿 파일, SimpleApplet.class 파일을 삽입하는 다음과 같은 applet 꼬리표를 추가해야 한다.

  • 위의 applet 꼬리표에서 width와 height는 애플릿의 실행 결과를 브라우저 내에 보여주기 위한 직사각형 모양 영역의 가로와 세로 길이를 나타낸다. 다음으로 브라우저에서 위 애플릿 프로그램을 실행하기 위해 SimpleApplet.html 파일을 다음과 같이 입력하여 저장한 후 이 HTML 파일을 브라우저나 애플릿 뷰어에서 열면 된다.

  • 다음은 SimpleApplet.class 파일을 브라우저에서 실행하기 위한 SimpleApplet.html이라는 HTML 파일이다.

  • 위의 HTML 문서의 내용을 살펴보자. 첫 번째 줄의 (html) 은 HTML 문서의 시작을 알리는 꼬리표이다. HTML 문서는 머리부와 몸체로 이루어진다. 머리부의 시작과 끝을 알려는 꼬리표는 각각 (head)와 (/head)이다. 머리부에는 애플릿의 제목만 있다. 제목의 시작과 끝을 알리는 꼬리표는 각각 (title)과 (/title)이다. 제목은 (title)과 (/title) 사이에 포함된다. HTML 문서의 몸체의 시작과 끝을 알리는 꼬리표는 각각 (body)와 (/body)이다. 애플릿 코드는 (body) 꼬리표 다음에 나온다. 애플릿 꼬리표는 (/applet)로 끝난다. 마지막 줄의 은 HTML 문서의 끝을 알리는 꼬리표이다.

  • SimpleApplet.html 파일을 애플릿 뷰어에서 실행하려면 다음과 같이 명령 프롬프트에 입력한다.

  • 다음은 위 애플릿을 애플릿 뷰어로 실행한 결과이다.

file

예제 프로그램 작성

  • 행복한 얼굴을 나타내는 간단한 이모티콘을 그리는 프로그램을 작성해 보자.
  • 얼굴 윤곽을 내타내는 원, 두 눈을 나타내 는 두 개의 작은 원과 입을 나타내는 호를 순서 대로 그린다.
  • 눈을 나타내는 작은 원들은 내부를 채워지게 그린다. 도형을 그리기 위해서는 필요한 점의 좌표, 길이와 각도에 대한 정확한 값이 요구된다.

  • 다음 프로그램에 있는 애플릿은 Graphics 클래스의 여러 메소드들을 이용하여 애플릿 창에 큰 원과 큰 원내에 내부가 채워진 두 개의 원과 호를 그린다.

  • 다음은 위 애플릿을 컴파일한 HappyFace.class를 실행하기 위한 HTML 파일이다.

  • 다음은 위 애플릿을 애플릿 뷰어로 실행한 결과이다.

file

요약

• 그림은 아주 작은 부분을 냐타내는 작은 영역인 픽셀들로 나눔으로써 나타내진다.
• 자바는 원점이 좌측 상단에 있는 좌표시스템을 사용한다. 각 점은 값들의 쌍(x, y)에 의해 나타내진다. x축 좌표는 오른쪽으로 갈수록 증가하고 y축 좌표는 아래로 내려갈수록 증가한다.
• 색들은 RGB 값으로 알려진 세 개의 숫자들에 의해 나타내진다.
• Color 클래스는 흔히 사용되는 여러 개의 이미 정의된 색들을 포함하고 많은 색들을 정의하기 위해 사용될 수 있다.
• Graphics 클래스는 모양들을 그리기 위한 여러 개의 메소드들을 가지고 있다. 이 메소드들을 이용하여 우리는 모양의 내부를 채울 수 있거나 채우지 않을 수도 있다.
• 타원을 그리는 메소드는 타원을 둘러싸는 직사각형의 왼쪽 상단의 좌표와 그 직사각형의 가로와 세로의 길이에 의해 정의된다.
• 호는 타원의 일부로 여겨질 수 있다. 호의 시작점은 시작각에 의해 호의 끝점은 호각에 의해 정의된다.
• 자바 애플릿은 웹 상에서 전송될 수 있고 웹 브라우저를 사용하여 실행될 수 있다.
• 애플릿은 웹 브라우저에서 실행되어야 하므로 HTML 문서 내에 포함되어야 한다.
• 애플릿은 main 메소드 대신에 특정 목적들을 이루는 여러 개의 특별한 메소드들을 가진다.
• paint 메소드는 애플릿에 자동적으로 호출되어 애플릿의 내용을 그리기 위해 사용된다.

2598 reads

Author

No discussion

Please log in to leave a comment

16.5.11618.20190612.allo
Report · Terms of Service · Privacy Policy
Lablup Inc. · Teheran-ro 145, Gangnam-gu, Seoul, Republic of Korea · 대표: 신정규 · 사업자번호: 864-88-00080 · +82 70-8200-2587

Decline Confirm

Close
Favorite Bookmark Discussion

Please copy the following address