Android 태극 도 인 스 턴 스 코드 그리 기

9912 단어 Android태극 도
오늘 은 연습 을 해서 태극 도 를 그 려 보 자~
최종 효 과 는 다음 과 같다.

최종 효과
일반적으로 원 리 를 먼저 말 하 는데,나 는 그 길 을 반대 하고,먼저 실현 을 말 하 겠 다.
1.계승 초기 화 방법
View 를 계승 하여 기본 적 인 구조 함 수 를 실현 합 니 다.

public TestView(Context context) {
  this(context, null);
}

public TestView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
}

public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
  this(context, attrs, defStyleAttr, 0);
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  init();
}
init()방법 에서 초기 화 작업 을 진행 합 니 다.여기 서 붓 을 초기 화하 면 됩 니 다.

private Paint mPaint;

private void init() {
  initPaint();
}

/**
 *      
 */
private void initPaint() {
  mPaint = new Paint();        //      
  mPaint.setColor(Color.BLACK);    //      
  mPaint.setStyle(Paint.Style.FILL); //         
  mPaint.setStrokeWidth(10f);     //       10px
  mPaint.setAntiAlias(true);     //     
  mPaint.setAlpha(255);        //       
}
onSizeChanged()방법 에서 높 은 폭 을 얻 고 나중에 계산 을 그 릴 수 있 습 니 다.

private int mWidth;
private int mHeight;  

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = w;
  mHeight = h;
}
두 경 로 를 만 듭 니 다.계산 은 이 두 경로 에서 진 행 됩 니 다.

private Path path0 = new Path();
private Path path1 = new Path();
그리고 가장 중요 한 onDraw()방법 에 이 르 렀 습 니 다.몇 단계 로 나 누 어 보 여 드 리 겠 습 니 다.
1.가운데 로 레이아웃 이동

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //       
  canvas.translate(mWidth / 2, mHeight / 2);
}
ps:간결 함 을 위해 뒤의 코드 는 모두 onDraw()에서 한 층 씩 증가 한 것 이 고 그 후에 onDraw()의 외출 괄호 를 쓰 지 않 습 니 다.
2.배경 노란색 그리 기  

mPaint.setColor(0xffffff00);
  path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
  canvas.drawPath(path0, mPaint);

두 번 째.png
3.흰 둥 근 배경,즉 태극 도의 흰 물고기 부분 을 그린다.

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

4.검 은 둥 근 배경,즉 태극 그림 의 검 은 물고기 부분,흰 물고기 와 같은 크기 의 위 치 를 그 려 서 흰 물고 기 를 덮 었 을 뿐 이 고 여 기 는 boolean 연산 으로 그 려 야 한다.

//     
mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

//     
mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);//     ，

STEP 4.png
5.가물치(path 1)를 boolean 으로 계산 하여 필요 하지 않 은 부분 을 제거한다.원 의 오른쪽 을 없 애 려 면 path.op()방법 이 필요 합 니 다.

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path0, mPaint);//     ，

다섯 번 째.png
6.이때 우 리 는 필요 없 는 반쪽 의 검은색 을 지 웠 지만 검 은 물고 기 는 동 그 란 머리 가 있어 야 한다.그러면 우 리 는 머리 를 맞 춰 준다.

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

canvas.drawPath(path1, mPaint);//     ，

제6 단계.png
7.여기 서 우 리 는 흰 물고기의 머리 만 그리 면 된다 는 것 을 보 았 다.그러면 다섯 번 째 단계 와 마찬가지 로 boolean 연산 을 사용 하여 나머지 검은색 을 제거 하면 된다.

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

path0.rewind();
path0.addCircle(0, 100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path1, mPaint);

제7 단계.png
8.이제 팔괘 도의 배경 을 그 렸 으 니 물고기의 눈 만 그리 면 된다.

//     
path0.rewind();
path0.addCircle(0, 100, 50, Path.Direction.CW);
mPaint.setColor(0xff000000);
canvas.drawPath(path0, mPaint);

//     
path0.rewind();
path0.addCircle(0, -100, 50, Path.Direction.CW);
mPaint.setColor(0xffffffff);
canvas.drawPath(path0, mPaint);

제8 단계.png
완성,마지막 에 완전한 코드.코드 를 좀 어 지 럽 게 썼 지만 연습 일 뿐 이 야,하하.그 중의 boolean 연산 에 대해 서 는 나중에 내 사용자 정의 View 노트 에 쓰 세 요.

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Whitelaning on 2016/6/28.
 * Email: [email protected]
 */
public class TestView extends View {

  private Paint mPaint;
  private int mWidth;
  private int mHeight;

  public TestView(Context context) {
    this(context, null);
  }

  public TestView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr, 0);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }

  private void init() {
    initPaint();
  }

  /**
   *      
   */
  private void initPaint() {
    mPaint = new Paint();        //      
    mPaint.setColor(Color.BLACK);    //      
    mPaint.setStyle(Paint.Style.FILL); //         
    mPaint.setStrokeWidth(10f);     //       10px
    mPaint.setAntiAlias(true);     //     
    mPaint.setAlpha(255);        //       
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;
    mHeight = h;
  }

  private Path path0 = new Path();
  private Path path1 = new Path();

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //       
    canvas.translate(mWidth / 2, mHeight / 2);

    //      
    mPaint.setColor(0xffffff00);
    path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
    canvas.drawPath(path0, mPaint);

    mPaint.setColor(0xffffffff);
    path0.rewind();
    path0.addCircle(0, 0, 200, Path.Direction.CW);
    canvas.drawPath(path0, mPaint);

    mPaint.setColor(0xff000000);
    path1.addCircle(0, 0, 200, Path.Direction.CW);

    path0.rewind();
    path0.addRect(0, -200, 200, 200, Path.Direction.CW);
    path1.op(path0, Path.Op.DIFFERENCE);

    path0.rewind();
    path0.addCircle(0, -100, 100, Path.Direction.CW);
    path1.op(path0, Path.Op.UNION);

    path0.rewind();
    path0.addCircle(0, 100, 100, Path.Direction.CW);
    path1.op(path0, Path.Op.DIFFERENCE);
    canvas.drawPath(path1, mPaint);

    //     
    path0.rewind();
    path0.addCircle(0, 100, 50, Path.Direction.CW);
    mPaint.setColor(0xff000000);
    canvas.drawPath(path0, mPaint);

    //     
    path0.rewind();
    path0.addCircle(0, -100, 50, Path.Direction.CW);
    mPaint.setColor(0xffffffff);
    canvas.drawPath(path0, mPaint);
  }
}
Whitelaning
It's very easy to be different but very difficult to be better
이상 은 안 드 로 이 드 가 태극 을 실현 하 는 인 스 턴 스 코드 입 니 다.관심 이 있 는 분 들 은 참고 하 셔 도 됩 니 다.본 사이트 에 대한 지원 에 감 사 드 립 니 다!
Android 에서 삭제 단 추 를 가 진 EditText
안 드 로 이 드 는 가우스 퍼 지 효 과 를 실현 하고 낮은 버 전 을 호 환 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage