Contents

13
5-1. 캔캔캔 캔캔캔캔캔캔캔캔 캔캔 www.skyone.hs.kr

description

Contents. 학습목표. Canvas 와 Paint 객체를 통해 화면에 원하는 도형을 그리고 속성을 변경하는 기본적인 방법에 대해 소개한다 . 토스트로 메시지를 출력하는 방법과 스피커를 통해 소리를 출력하는 방법에 대해서도 알아본다. 학습내용. 캔버스 그리기 객체 쉐이더 그외 출력. 5.1.1 커스텀 뷰. 안드로이드는 주로 레이아웃에 위젯을 배치하여 화면을 구성한다 . 문자 출력 : TextView 이미지 출력 : ImageView - PowerPoint PPT Presentation

Transcript of Contents

Page 1: Contents

5-1. 캔버스천안천일고등학교 류빈

www.skyone.hs.kr

Page 2: Contents

2

Contents

1. Canvas 와 Paint 객체를 통해 화면에 원하는 도형을 그리고 속성을 변경하는 기본적인 방법에 대해 소개한다 .

2. 토스트로 메시지를 출력하는 방법과 스피커를 통해 소리를 출력하는 방법에 대해서도 알아본다 .

학습목표

1. 캔버스2. 그리기 객체3. 쉐이더4. 그외 출력

학습내용

Page 3: Contents

3

5.1.1 커스텀 뷰

안드로이드는 주로 레이아웃에 위젯을 배치하여 화면을 구성한다 .

문자 출력 : TextView 이미지 출력 : ImageView

캔버스에 직접 출력하기 위해서는 View 를 상속 받아 커스텀 뷰를 정의해야 한다 .

명칭 충돌을 방지하기 위해 액티비티 클래스 안 내부 클래스로 정의

Page 4: Contents

4

5.1.1 커스텀 뷰

C05_CustomView.java

public class MainActivity extends Activ-ity {

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}

protected class MyView extends View{

public MyView(Context context){super(context);

}public void onDraw(Canvas canvas)

{canvas.drawColor(Color.LTGRAY);Paint Pnt = new Paint();Pnt.setColor(Color.BLUE);canvas.drawCircle(100, 100, 80,

Pnt);}

}}

Page 5: Contents

5

5.1.2 Canvas

캔버스 : 뷰의 그리기 표면 . 이 위에 그림을 그림 . 다양한 그리기 메서드를 제공한다 .

모든 그리기 메서드의 마지막 인수는 항상 Paint 객체이다 .

Paint 는 색상 , 글꼴 , 스타일 , 그리기 모드 등의 정보를 지정하며 그려지며 New 로 생성 .

색상에는 알파를 지정하여 반투명 출력이 가능하다 .

void drawPoint (float x, float y, Paint paint)

void drawLine (float startX, float startY, float stopX, float stopY, Paint paint)

void drawCircle (float cx, float cy, float radius, Paint paint)

void drawRect (float left, float top, float right, float bottom, Paint paint)

void drawText (String text, float x, float y, Paint paint)

Page 6: Contents

6

void drawRect (float left, float top, flat right, float bot-tom, Paint paint)void drawRect (Rect r, Paint paint) //Rect : 사각 영역void drawRect (RectF rect, Paint paint) //RectF : 실수형 사각형

New 로 Paint 객체를 생성하면 기본 검정색의 기본 폰트이나 void Paint.setColor (int color) 로 변경가능 //color : 0xAAR-RGGBB상수 설명 상수 설명

BLANK 검정 BLUE 파랑

DKGRAY 짙은 회색 GREEN 초록

GRAY 회색 CYAN 하늘색

LTGRAY 밝은 회색 MAGENTA 분홍색

WHITE 흰색 YELLOW 노란색

RED 빨강 TRANSPAR-ENT

투명색

5.1.2 Canvas

Page 7: Contents

7

C05_Primitive1.java

public class C05_Primitive1 extends Activity {public void onCreate(Bundle savedInstanceState)

{super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}

protected class MyView extends View {public MyView(Context context) {

super(context);}

public void onDraw(Canvas canvas) {canvas.drawColor(Color.LTGRAY);Paint Pnt = new Paint();canvas.drawPoint(10,10,Pnt); // 검정색 점Pnt.setColor(Color.BLUE); // 파란색 선canvas.drawLine(20,10,200,50,Pnt);Pnt.setColor(Color.RED); // 빨간색 원canvas.drawCircle(100,90,50,Pnt);Pnt.setColor(0x800000ff); // 반투명한 파란색

사각형canvas.drawRect(10,100,200,170,Pnt);Pnt.setColor(Color.BLACK); // 검정색 문자열canvas.drawText("Canvas Text Out",

10,200,Pnt);}

}}

5.1.2 Canvas

Page 8: Contents

8

다음 4 개의 메서드는 갠버스를 특정 색상으로 가득 채운다 .void drawRGB (int r, int g, int b)void drawARGB (int a, int r, int g, int b)void drawColor (int color)void drawPaint(Paint paint) // 설정에 따라 그라데이션 , 이미지 줌

복잡한 그리기 메서드void drawRoundRect (RectF rect, float rx, float ry, Paint paint)void drawOval (RectF oval, Paint paint)void drawArc (RectF oval, float startAngle, float sweepAngle,

boolean useCenter, Paint paint)void drawPaint (float[] pts, int offset, int count, Paint paint)

5.1.2 Canvas

drawRoundRect drawOval

Page 9: Contents

9

C05_Primitive2.java

public class C05_Primitive2 extends Activity {

public void onCreate(Bundle savedIn-stanceState) {

super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}

protected class MyView extends View {public MyView(Context context) {

super(context);}

public void onDraw(Canvas canvas) {//

canvas.drawARGB(255,204,204,204);//canvas.drawRGB(204,204,204);//canvas.drawColor(0xffcccccc);Paint Pnt = new Paint();Pnt.setColor(Color.LTGRAY);canvas.drawPaint(Pnt);// 빨간색 둥근 사각형RectF r = new RectF(10,10,100,100);Pnt.setColor(Color.RED);canvas.drawRoundRect(r,10,10,Pnt);// 타원r.set(110,10,150,100);canvas.drawOval(r,Pnt);

5.1.2 Canvas

C05_Primitive2.java

// 분홍색 반달Pnt.setColor(Color.MAGENTA);r.set(10,110,100,200);canvas.drawArc(r,10,150,false,Pnt);// 분홍색 파이r.set(110,110,200,200);canvas.drawArc(r,10,150,true,Pnt);// 파란색 다각선Pnt.setColor(Color.BLUE);float[]

pts={10,210,50,250,50,250,110,220};canvas.drawLines(pts,Pnt);

Pnt.setColor(Color.BLACK);// 검정색 점 3 개

float[] pts2={20,210,50,240,100,220};

canvas.drawPoints(pts2, Pnt);}

}}

Page 10: Contents

10

5.1.3. Paint

Paint 객체는 그리기에 대한 속성 정보를 가지는 객체이며 그리기 함수에게 인수로 전달 되어 진다 .

Paint의 대표적인 속성은 안티 알리아싱이며 다음 메서드로 지정한다 . 하지만 연산을 해야 하므로 속도는 떨어진다 .

void setAntiAlias (boolean aa)

C05_Primitive1.java

public class C05_AntiAlias extends Activity {public void onCreate(Bundle savedIn-

stanceState) {super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}protected class MyView extends View {

public MyView(Context context) {super(context);

}

public void onDraw(Canvas canvas) {canvas.drawColor(Color.LTGRAY);Paint Pnt = new Paint();Pnt.setColor(Color.BLACK);Pnt.setTextSize(30);

C05_Primitive1.java

// 기본 출력canvas.drawOval(new RectF(10,10,100,60),

Pnt);canvas.drawText("Text", 110, 40, Pnt);

// 안티 알리아스 적용Pnt.setAntiAlias(true);canvas.drawOval(new RectF(10,70,100,120),

Pnt);canvas.drawText("Text", 110, 100, Pnt);

}}

}

Page 11: Contents

11

void setARGB (int a, int r, int g, int b)void setColor (int color)void setStrokeWidth (float width)void setStrokeCap (Paint.Cap cap)void setStrokeJoin (Paint.Join join)void setStrokeMiter (float miter)

void setStyle (Paint.Style style) // 경계선 및 내부 채우기

void set (Paint src)void reset ()

5.1.3. Paint

Cap 설 명

BUTT 지정한 좌표에서 선이 끝난다 .

ROUND 둥근 모양으로 끝이 장식된다 .

SQUARE

사각형 모양이되 지정한 좌표보다 조금 더 그어진다 .

Join 설 명

MITER 90 도로 각진 형태 ( 기본값 )

BEVEL 깍은 모양

ROUND

둥근 모양

스타일 설 명

FILL 채우기만 하며 외곽선은 그리지 않는다 .

FILL_AND_STROKE 채우기도 하고 외곽선도 그린다 .

STROKE 채우지는 않고 외곽선만 그린다 .

Page 12: Contents

12

C05_Stroke.java

public class C05_Stroke extends Activ-ity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}protected class MyView extends

View {public MyView(Context context) {

super(context);}public void onDraw(Canvas can-

vas) {canvas.drawColor(Color.LTGRAY);Paint Pnt = new Paint();

// 캡 모양 테스트Pnt.setColor(Color.BLUE);Pnt.setStrokeWidth(16);

canvas.drawLine(50,30,240,30,Pnt);

Pnt.setStrokeCap(Paint.Cap.ROUND);

canvas.drawLine(50,60,240,60,Pnt);

Pnt.setStrokeCap(Paint.Cap.SQUARE);

canvas.drawLine(50,90,240,90,Pnt);

C05_Stroke.java

// 조인 모양 테스트Pnt.setColor(Color.BLACK);Pnt.setStrokeWidth(20);

Pnt.setStyle(Paint.Style.STROKE);

Pnt.setStrokeJoin(Paint.Join.MITER);

canvas.drawRect(50,150,90,200,Pnt);

Pnt.setStrokeJoin(Paint.Join.BEVEL);

canvas.drawRect(120,150,160,200,Pnt);

Pnt.setStrokeJoin(Paint.Join.ROUND);

canvas.drawRect(190,150,230,200,Pnt);

}}

}

5.1.3. Paint

Page 13: Contents

13

C05_Style.java

public class C05_Style extends Activity {public void onCreate(Bundle savedIn-

stanceState) {super.onCreate(savedInstanceState);MyView vw = new MyView(this);setContentView(vw);

}

protected class MyView extends View {public MyView(Context context) {

super(context);}

public void onDraw(Canvas canvas) {canvas.drawColor(Color.LTGRAY);Paint Pnt = new Paint();

Pnt.setStrokeWidth(8);Pnt.setColor(Color.RED);// 채우기Pnt.setStyle(Paint.Style.FILL);canvas.drawCircle(50,50,40,Pnt);// 외곽선 그리기Pnt.setStyle(Paint.Style.STROKE);canvas.drawCircle(150,50,40,Pnt);// 외곽선 및 채우기

Pnt.setStyle(Paint.Style.FILL_AND_STROKE);canvas.drawCircle(250,50,40,Pnt);

C05_Style.java

// 파란색으로 채우고 빨간색으로 외곽선 그리기Pnt.setColor(Color.BLUE);Pnt.setStyle(Paint.Style.FILL);canvas.drawCircle(50,150,40,Pnt);Pnt.setColor(Color.RED);Pnt.setStyle(Paint.Style.STROKE);canvas.drawCircle(50,150,40,Pnt);// 빨간색으로 외곽선 그리고 파란색으로 채우기Pnt.setColor(Color.RED);Pnt.setStyle(Paint.Style.STROKE);canvas.drawCircle(150,150,40,Pnt);Pnt.setColor(Color.BLUE);Pnt.setStyle(Paint.Style.FILL);canvas.drawCircle(150,150,40,Pnt);

}}

}

5.1.3. Paint