5-3. 세이더 천안천일고등학교 류빈 . 1.canvas 와 paint 객체를 통해 화면에...

5-3. 세이더천안천일고등학교 류빈

www.skyone.hs.kr

2

Contents

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

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

학습목표

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

학습내용

3

5.3.1. 직선 그래디언트

셰이더 (Shader) : 도형 내부 표면을 채우는 일 셰이더 객체 생성후 Paint 객체의 다음 메서드로

셰이더지정

Shader Paint.setShader (Shader shader)

LinearGradient (float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)

LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

colors 배열로 여러 색을 지정하며 , positons 의 배열은 colors 배열과 크기가 동일해야 하며 0~1 사이의 값으로 저체 길의의 상대적 값을 가진다 . null 이면 균등한 폭을 가진다 .

Shader

LinearGradient

RadialGradient

SweepGradient

BitmapShader

Compose-Shader

타일모드 설명

CLAMP 무늬의 끝 부분을 계속 반복한다 .

MIRROR 무늬를 반사시켜 계속 반복한다 .

REPEAT 똑같은 무늬를 계속 반복한다 .

4

C05_LinearGrad.java

public void onDraw(Canvas canvas) {Paint Pnt = new Paint();Pnt.setAntiAlias(true);

int[] colors = { Color.RED, Color.-GREEN, Color.BLUE,

Color.YEL-LOW, Color.WHITE };

float[] pos = { 0.0f, 0.1f, 0.6f, 0.9f, 1.0f };

// 수평Pnt.setShader(new

LinearGradient(0,0,100,0,Color.BLUE, Color.WHITE,

TileMode.CLAMP));canvas.drawRect(0,0,100,100,Pnt);

// 우하향Pnt.setShader(new


TileMode.CLAMP));

canvas.drawRect(110,0,210,100,Pnt);

// 우상향Pnt.setShader(new


TileMode.CLAMP));


// 가장자리 반복Pnt.setShader(new


TileMode.CLAMP));


C05_LinearGrad.java

// 무늬 반복 Pnt.setShader(new LinearGradi-

ent(0,0,100,0,Color.BLUE,

Color.WHITE,TileMode.REPEAT));


// 무늬 반사 반복 Pnt.setShader(new LinearGradi-

ent(0,0,100,0,Color.BLUE,

Color.WHITE,TileMode.MIRROR));


// 여러 가지 색상 균등 배치Pnt.setShader(new LinearGradi-

ent(0,0,320,0,colors,

null, TileMode.CLAMP));


// 여러 가지 색상 임의 배치 Pnt.setShader(new

LinearGradient (0,0,320,0,colors, pos, Tile-Mode.CLAMP));

canvas.drawRect(0,310,320,350,Pnt);}

}

5.3.1. 직선 그래디언트

5

5.3.2. 원형 그래디언트

원형 그래디언트 : 중심에서 시작하여 원 바깥쪽으로 색상 변화 줌

직선 그래디언트와 유사하나 두 점 대신 중심점과 반지름 지정

RadialGradient (float x, float y, float radius, int color0, int color1, Shader.TileMode tile)

RadialGradient (float x, float y, float radius, int[] colors, float[] positions Shader.TileMode tile)

6

C05_RadialGrad.java


int[] colors = { Color.RED, Col-or.GREEN, Color.BLUE, Color.YELLOW, Color.WHITE };

float[] pos = { 0.0f, 0.1f, 0.6f, 0.9f, 1.0f };

// 파란색 흰색Pnt.setShader(new RadialGra-

dient(80, 80, 70, Color.BLUE, Col-or.WHITE, TileMode.CLAMP));

canvas.drawCircle(80, 80, 70, Pnt);

// 흰색 파란색Pnt.setShader(new RadialGra-

dient(230, 80, 70, Color.WHITE, Col-or.BLUE, TileMode.CLAMP));


C05_RadialGrad.java

// 여러 가지 색 균등Pnt.setShader(new Radial-

Gradient(80, 230, 70, colors, null, TileMode.CLAMP));


// 여러 가지 색 차등Pnt.setShader(new Radial-

Gradient(230, 230, 70, colors, pos, TileMode.CLAMP));

canvas.drawCircle(230, 230, 70, Pnt);}


7

C05_SweepGrad.java


int[] colors = { Color.RED, Col-or.GREEN, Color.BLUE, Color.YELLOW, Color.WHITE };

float[] pos = { 0.0f, 0.1f, 0.6f, 0.9f, 1.0f };

// 파란색 흰색Pnt.setShader(new SweepGra-

dient(80, 80, Color.BLUE, Color.WHITE));canvas.drawCircle(80, 80, 70,

Pnt);

// 흰색 파란색Pnt.setShader(new SweepGra-

dient(230, 80, Color.WHITE, Color.BLUE));canvas.drawCircle(230, 80, 70,

Pnt);

C05_SweepGrad.java

// 여러 가지 색 균등Pnt.setShader(new Sweep-

Gradient(80, 230, colors, null));canvas.drawCircle(80, 230,

70, Pnt);

// 여러 가지 색 차등Pnt.setShader(new Sweep-

Gradient(230, 230, colors, pos));canvas.drawCircle(230, 230,

70, Pnt);}


8

5.3.3. 비트맵 셰이더

비트맵 세이더 : 비트맵을 무늬로 사용 ( 미리 그려진 그림을 출력하므로 속도 빠름 )

BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

CLAMP 모드는 거의 사용되지 않으며 REPEAT, MIRROR 모드 사용

반복해도 경계가 눈에 잘 안띄게 해야 한다 .

9

C05_BitmapSdr.java


Bitmap clover = BitmapFac-tory.decodeResource(getContext().getResources(),

R.draw-able.clover);

Pnt.setShader(new Bitmap-Shader(clover, TileMode.REPEAT, Tile-Mode.REPEAT));

canvas.drawRect(0, 0, 320, 150, Pnt);

Pnt.setShader(new Bitmap-Shader(clover, TileMode.MIRROR, TileMode.REPEAT));

canvas.drawRect(0, 160, 320, 310, Pnt);}


10

C05_ComposeSdr.java


Bitmap clover = BitmapFacto-ry.decodeResource(getContext().getResources(),

R.draw-able.clover);

ComposeShader comp = new ComposeShader(

new BitmapShader(clover, TileMode.REPEAT, TileMode.REPEAT),

new Lin-earGradient(0,0,320,0, 0x0, Color.BLACK, TileMode.REPEAT),

new Por-terDuffXfermode(PorterDuff.Mode.DARKEN));

Pnt.setShader(comp);canvas.drawRect(0, 0, 320,

200, Pnt);}


ComPoseShader (Shader shaderA, Shader shaderB, Xfermode mode)ComPoseShader (Shader shaderA, Shader shaderB, Xfermode mode)

11

C05_MirrorImage.java

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

Bitmap car = BitmapFacto-ry.decodeResource(getContext().getResources(),

R.draw-able.pride); int width = car.getWidth(); int height = car.getHeight(); Matrix matrix = new Matrix(); matrix.preScale(1, -1f); Bitmap mirror = Bitmap.cre-ateBitmap(car, 0, 0, width, height, ma-trix, false);

canvas.drawBitmap(car, 0, 0, null);


C05_MirrorImage.java

ComposeShader comp = new Com-poseShader( new BitmapShader(mirror, TileMode.REPEAT, TileMode.REPEAT), new LinearGradient(0, height, 0, height + height, Color.TRANSPAR-ENT, Color.BLACK, Tile-Mode.REPEAT), new PorterDuffXfermode(PorterDuff.Mode.DARKEN)); Pnt.setShader(comp); canvas.drawRect(0, height, width, height + height, Pnt);}

12

5.3.4. ShapeDrawable

드로블 (Drawable) : 화면에 출력될 수 있는 모든것 . 이미지 , 색상 , 셰이더 전체를 포괄한다 . 코드로드 생성 가능하지만 디자인 타임에 XML 문서로 미로 생성해 놓을 수도 있다 .

C05_shape1.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradient android:startColor="#ffffff" android:endColor="#0000ff" android:angle="90" /></shape>

C05_shape2.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFFF0000"/> <stroke android:width="2px" an-droid:color="#FFFFFF00" android:dashWidth="2px" android:dashGap="2px" /> <corners android:radius="15px" /></shape>

C05_shape3.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="oval"> <solid android:color="#FFFFFFFF" /> <stroke android:width="4px" an-droid:color="#FF00FF00" /></shape>

13

5.3.4. ShapeDrawable

Drawable

GradientDraw-able

ColorDrawable

PaintDrawable

ShapeDrawable

Shape

RectShape

OvalShape

PathShape

RoundRect-Shape

ArcShape

포함

14

C05_shape.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#808080"> <TableRow> <Button android:id="@+id/btn11" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" android:background="@drawable/shape1" /> <Button android:id="@+id/btn12" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" android:background="@drawable/shape2" /> <Button android:id="@+id/btn13" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" android:background="@drawable/shape3" /> </TableRow>

C05_shape.xml

<TableRow> <Button android:id="@+id/btn21" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> <Button android:id="@+id/btn22" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> <Button android:id="@+id/btn23" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> </TableRow> <TableRow> <Button android:id="@+id/btn31" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> <Button android:id="@+id/btn32" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> <Button android:id="@+id/btn33" android:layout_width="90px" android:layout_height="90px" android:layout_margin="5px" /> </TableRow> </TableLayout>


15

C05_shape.xml

public void onCreate(Bundle savedInstanceS-tate) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button btn;

// 그래디언트 드로블btn =

(Button)findViewById(R.id.btn21);GradientDrawable g = new Gradi-

entDrawable(Gradient-

Drawable.Orientation.LEFT_RIGHT, new int[]

{Color.BLUE, Color.GREEN});btn.setBackgroundDrawable(g);

// 단색 드로블btn =

(Button)findViewById(R.id.btn22);btn.setBackgroundDrawable(new

ColorDrawable(Color.GREEN));

// 특정 색으로 채우는 드로블 . 모서리는 X, Y 각각에 대해 값을 지정할 수도 있다 .

btn = (Button)findViewById(R.id.btn23);

PaintDrawable pd = new PaintDraw-able(Color.YELLOW);

pd.setCornerRadius(10.0f);btn.setBackgroundDrawable(pd);

C05_shape.xml

// 원모양 드로블 . btn =

(Button)findViewById(R.id.btn31);ShapeDrawable sd = new

ShapeDrawable(new OvalShape());sd.getPaint().setShader(new Ra-

dialGradient(60, 30, 50,Col-

or.WHITE, Color.BLACK, TileMode.CLAMP));btn.setBackgroundDrawable(sd);

// 둥근 사각형 드로블btn =

(Button)findViewById(R.id.btn32);float[] outR = new float[] {5, 5,

30, 40, 5, 5, 5, 5 };RectF inRect = new RectF(30,

30, 30, 30);float[] inR = new float[] {0, 0,

20, 30, 0, 0, 0, 0 };ShapeDrawable sd2 = new

ShapeDrawable(new RoundRectShape(outR, inRect, inR));

sd2.getPaint().setColor(Color.MAGENTA);

btn.setBackgroundDrawable(sd2);


16

C05_shape.xml

// 패스 드로블btn =

(Button)findViewById(R.id.btn33);Path path = new Path();path.moveTo(5, 0);path.lineTo(0, 7);path.lineTo(3, 7);path.lineTo(3, 10);path.lineTo(7, 10);path.lineTo(7, 7);path.lineTo(10, 7);ShapeDrawable sd3 =

new ShapeDrawable(new PathShape(path,10,10));

sd3.getPaint().setShader(new LinearGradient(0,0,0,10,

0xff00ff00, 0xffff0000, TileMode.CLAMP));btn.setBackground-

Drawable(sd3);}

}


5-3. 세이더 천안천일고등학교 류빈 . 1.canvas 와 paint 객체를 통해 화면에...

Documents