Android 학습 튜 토리 얼 의 2D 그래 픽 기초 및 태극 도 그리 기

머리말
Android 는 graphics 류 를 통 해 2D 도형 을 표시 합 니 다.그 중에서 graphics 에는 Canvas,Paint,Color,Bitmap 등 이 포함 되 어 있다.graphics 는 그리 기 점,선,색상,2D 기하학 적 도형,이미지 처리 등 기능 을 가지 고 있 습 니 다.그 중에서 Color 와 Bitmap 는 자주 사용 하 는 유형 으로 본 고 는 주로 Canvas 와 Paint 를 말한다.말 그대로 화포 와 화필 이다.
Canvas 류
Canvas 는 캔버스 입 니 다.우리 가 해 야 할 일 은 이전에 설 치 된 Paint 를 사용 하여 도형 을 그 리 는 것 입 니 다.시스템 은 Canvas 를 통 해 기본 적 인 그래 픽 API 를 제공 합 니 다.
1、 canvas.drawPoint(float x, float y, @NonNull Paint paint);
역할:점 그리 기.
매개 변수:점 의 x 좌표,y 좌표,화필 매개 변수 그리 기
2、 canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint); 역할:선 그리 기.
파라미터:기점 의 x 좌표,기점 y 좌표,종점 x 좌표,종점 y 좌표,화필
3、 canvas.drawRect(@NonNull RectF rect, @NonNull Paint paint); 역할:사각형 그리 기.
매개 변수:직사각형 매개 변수,화필 매개 변수
직사각형 매개 변수 구조 방법:다음 코드 는 직사각형 의 상하 좌우 좌표 이다.
public RectF(float left, float top, float right, float bottom) {}
4、 canvas.drawVertices();
역할:다각형 그리 기.
인자:
5、 canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint); 역할:포물선 을 그립 니 다.
매개 변수:왼쪽 끝,상단,오른쪽 끝,아래쪽,시작 각도,스 캔 한 각도,원호 의 두 단락 이 원심 과 연결 되 는 지,화필 파라미터
6、 canvas.drawCircle(float cx, float cy, float radius, @NonNull Paint paint); 역할:원 그리 기.
파라미터:원심 x 좌표,원심 y 좌표,반경,화필 파라미터
7、 canvas.drawText();
역할:텍스트 그리 기
매개 변수:문자 왼쪽 아래 x 좌표,문자 왼쪽 아래 y 좌표,
8、 canvas.drawOval(float left, float top, float right, float bottom, @NonNull Paint paint);
역할:타원 그리 기
파라미터:왼쪽,상단,오른쪽,하단,화필 파라미터
9、 canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,@NonNull Paint paint);
역할:원 각 사각형 그리 기
파라미터:왼쪽,상단,오른쪽,하단,x 축 상의 원 각 반지름,y 축 상의 원 각 반지름,화필 파라미터
시스템 화필 도구 가 제공 하 는 API:
1、 mPaint.setAntiAlias(); 역 톱날 설정
인자:true,false
2、 mPaint.setColor(); 화필 색 설정
인자:색상 값
3、 mPaint.setARGB(); 펜 을 설치 한 A,R,G,B
인자:A,R,G,B
4、 mPaint.setAlpha(); 화필 의 투명 도 를 설정 하 다
매개 변수:수치 범 위 는 0-255 사이 입 니 다.
5、 mPaint.setTextSize(); 그림%1 개의 캡 션 을 편 집 했 습 니 다.
인자:0 이상 이 어야 합 니 다.
6、 mPaint.setStyle(); 붓 스타일 설정(채 우기 및 묘사)
파라미터:Paint.Style.FILL(충전),Paint.Style.STROKE(묘사),Paint.Style.FILLAND_STROKE(테두리 채 우기 및 그리 기)
7、 mPaint.setStrokeWidth(); 그림%1 개의 캡 션 을 편 집 했 습 니 다.
파라미터:부동 소수점 형
페인트 류
일상적인 그림 과 마찬가지 로 그림 을 그 리 려 면 먼저 적당 한 붓 을 선택해 야 한다.그러면 안 드 로 이 드 에서 그림 을 그 릴 때 먼저 붓 을 조정 하고 자신의 필요 에 따라 붓 의 관련 속성 을 설정 해 야 합 니 다.시스템 이 저 에 게 제공 하 는 자주 사용 하 는 API 는 다음 과 같 습 니 다.

　　setColor(); //펜 색상 설정

　　setAntiAlias(); //펜 의 톱날 효과 설정

　　setARGB(); //화필 의 A,R,G,B 값 설정

　　setAlpha(); //화필 의 알파 값 설정

　　setTextSize(); //글꼴 크기 설정

　　setStyle(); //붓 스타일 설정(중 공 또는 옹 골 진)

　　setStrokeWidth(); //중 공 테두리 너비 설정

　　getColor(); //화필 의 색 가 져 오기

이어서 나 는 태극 도 를 그 려 서 안 드 로 이 드 그래 픽 메커니즘 을 배 울 것 이다.
먼저 태극 도 를 본다. 
                           
지금부터 한 걸음 한 걸음 그 를 그 려 야 한다.우 리 는 그림 의 개념 을 참고 할 수 있다.먼저 맨 밑 에 있 는 그림 을 그립 니 다.왼쪽,오른쪽 양쪽 에 각각 흰색 과 검은색 을 설정 합 니 다. 
            
그림 에서(x,y)는 원심 좌표 이다.여기 내 가 설정 한 x=getWidth()/2;y=getHeight() / 2；반지름 r=getHeight()/2;
이제 코드 를 살 펴 보 겠 습 니 다.View 를 정의 하 는OnDraw（Canvas canvas）방법 에서: 

//       
 mPaint.setColor(Color.BLACK);//         
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//    style  
 RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
 0, getWidth() / 2 + getHeight() / 2, getHeight());//       
 canvas.drawArc(rect, 270, 180, false, mPaint);
 mPaint.setColor(Color.WHITE);//         
 canvas.drawArc(rect, 90, 180, false, mPaint);

코드 에서 rect 즉 원 의 외 접 사각형 으로 그 구조 함수RectF(float left, float top, float right, float bottom)의 네 개의 매개 변 수 는 각각 사각형 의 가장 왼쪽 에 있 는 x 좌표 값 에 대응 합 니 다.왼쪽 위의 y 좌표 값;맨 오른쪽 x 좌표 값;맨 아래 y 좌표 값.코드 중: 

 left=getWidth() / 2 - getHeight() / 2； 
 top=0； 
 right=getWidth() / 2 + getHeight() / 2； 
 bottom=getHeight()； 

네 개의 값 이 원 의 외 접 사각형 을 확정 하 였 다.canvas.drawArc(rect, 90, 180, false, mPaint);첫 번 째 매개 변 수 는 바로 우리 가 위 에서 정 한 구역 이다.두 번 째 매개 변 수 는 그리 기 시작 한 각도(90 도,x 축 방향 은 시계 방향 으로 회전)이 고 세 번 째 매개 변 수 는 스 캔 한 도수 이 며 네 번 째 매개 변 수 는 설 정 된 붓 Paint 이다.
그 다음 에 우 리 는 중간 그림 을 그 리 는 데 착수 해 야 한다.중간 그림 층 은 두 개의 상하 외 에 자 른 반원 이 라 고 볼 수 있다.위 에 흰색 오른쪽 반원,아래 에 검은색 왼쪽 반원 이다.

마찬가지 로 우 리 는 먼저 외 접 사각형 의 구역 을 확정 한 다음 에 원 호 를 그 리 는 데 더 이상 상세 하 게 설명 하지 않 을 것 이다.

//        
 mPaint.setColor(Color.BLACK);
 rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //        
 mPaint.setColor(Color.WHITE);
 rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
 canvas.drawArc(rect, 270, 180, false, mPaint);

마지막 으로 맨 위 그림 층 상하 두 개의 작은 원

//         
 mPaint.setColor(Color.WHITE);
 canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
 //         
 mPaint.setColor(Color.BLACK);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);

canvas.draw Circle 은 원 을 그 리 는 데 사 용 됩 니 다.첫 번 째 매개 변 수 는 원심 x 좌표 값 이 고 두 번 째 매개 변 수 는 y 좌표 값 입 니 다.세 번 째 좌 표 는 원 의 반지름 이 고 네 번 째 는 설 치 된 붓 입 니 다.
여기까지 태극 도 를 그 렸 다.
사용자 정의 View 코드 를 첨부 합 니 다:

package com.chuck.mobile.changecountview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 *     ：changecountview
 *    ：
 *    ：Administrator
 *     ：2015/12/11 16:37
 *    ：Administrator
 *     ：2015/12/11 16:37
 *     ：
 */
public class CustomeView extends View{
 private Paint mPaint=new Paint();
 private Path path=new Path();
 private float degress=90;
 public CustomeView(Context context) {
 super(context);
 }

 public CustomeView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public CustomeView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 //       
 mPaint.setColor(Color.BLACK);//         
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//    style  
 RectF rect= new RectF(getWidth() / 2 - getHeight() / 2,
 0, getWidth() / 2 + getHeight() / 2, getHeight());//       
 canvas.drawArc(rect, 270, 180, false, mPaint);
 mPaint.setColor(Color.WHITE);//         
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //        
 mPaint.setColor(Color.BLACK);
 rect= new RectF(getWidth()/2-getHeight()/4,0,getWidth() / 2 + getHeight() / 4, getHeight() /2);
 canvas.drawArc(rect, 90, 180, false, mPaint);
 //        
 mPaint.setColor(Color.WHITE);
 rect= new RectF(getWidth()/2-getHeight() / 4, getHeight() / 2, getWidth() / 2 + getHeight() / 4, getHeight());
 canvas.drawArc(rect, 270, 180, false, mPaint);
 //         
 mPaint.setColor(Color.WHITE);
 canvas.drawCircle(getWidth() / 2, getHeight() / 4, getHeight() / 10, mPaint);
 //         
 mPaint.setColor(Color.BLACK);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(getWidth() / 2, getHeight() * 3 / 4, getHeight() / 10, mPaint);
 }
}

그리고 레이아웃 파일 에 사용자 정의 View 를 사용 합 니 다.

<com.chuck.mobile.changecountview.widget.CustomeView
 android:layout_width="match_parent"
 android:layout_height="250dp"
 android:background="@color/gray"/>

만약 에 이 태극 도 를 돌 리 려 면 방법 이 많 고 애니메이션 을 사용 할 수도 있 고 캔버스 를 회전 시 키 는 방식 으로 이 루어 질 수도 있다.나 는 스스로 스 레 드 를 통 해 캔버스 를 회전 시 키 는 방법 을 사용 했다.Android 2D 그래 픽 기법 을 익히 면 관심 있 는 그림 을 그 릴 수 있 습 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 안 드 로 이 드 개발 자 들 에 게 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.