안 드 로 이 드 프로젝트 실전 수 는 손 으로 원형 물결 무늬 loadingview 를 그 리 는 법 을 알려 줍 니 다.

본 논문 의 사례 는 어떻게 원형 물결 무늬 loadingview 를 그 리 는 지 설명 하 는 것 입 니 다.이런 효과 응용 장면 이 많 습 니 다.예 를 들 어 메모리 점용 백분율 과 같은 것 을 여러분 에 게 참고 하도록 공유 합 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도 는 다음 과 같다.

준 비 된 지식:
베 세 르 곡선    모 르 시 면 기초 지식 비축:신기 한 베 세 르 곡선

2.Paint.setXfermode()  그리고 Porter Duff Xfermode

절대 이 b 의 이름 에 놀 라 지 마 세 요.익숙 하지 않 으 면 기억 하기 어렵다 고 생각 할 수 있 습 니 다.사실 자 이언 트 의 딩 딩 딩 위 에 서면 간단 합 니 다.
자,잔말 말고 한 걸음 한 걸음 멋 진 뷰 를 해 보 세 요.
우선 속성 을 주 고 구조 기 에서 초기 화 합 니 다.
 

  //     
  private Paint mWavePaint;  
  private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//  mode  XOR 
  //    
  private Paint mCirclePaint; 
  private Canvas mCanvas;//        
  private Bitmap mBitmap; 
  private int mWidth; 
  private int mHeight; 
 
  public WaveLoadingView(Context context) { 
    this(context,null); 
  } 
 
  public WaveLoadingView(Context context, AttributeSet attrs) { 
    this(context, attrs,0); 
  } 
 
  public WaveLoadingView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
 
    mWavePaint = new Paint(); 
    mWavePaint.setColor(Color.parseColor("#33b5e5")); 
    mCirclePaint = new Paint(); 
    mCirclePaint.setColor(Color.parseColor("#99cc00")); 
     
 
  } 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
    int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
    int heightSize = MeasureSpec.getSize(heightMeasureSpec); 
    int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
    if (widthMode == MeasureSpec.EXACTLY) { 
      mWidth = widthSize; 
    } 
 
 
    if (heightMode == MeasureSpec.EXACTLY) { 
      mHeight = heightSize; 
    } 
    setMeasuredDimension(mWidth, mHeight); 
    mBitmap = Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888); //    bitmap 
    mCanvas = new Canvas(mBitmap);// bitmp          ，   mCanvas.draw          bitmap   
  } 
   

그리고 우 리 는 그 에 게 Porter DuffXfermode 를 소개 하기 위해 뭔 가 를 그 려 주 었 다.

@Override 
  protected void onDraw(Canvas canvas) { 
    mCanvas.drawCircle(100,100,50,mCirclePaint); 
 
    mCanvas.drawRect(100,100,200,200,mWavePaint); 
    canvas.drawBitmap(mBitmap,0,0,null); 
    super.onDraw(canvas); 
  } 

네,지금 저희 캔버스 에 bitmap 를 깔 고 있 는 것 을 볼 수 있 습 니 다.  bitmap 는 도화지 입 니 다.우 리 는 bimap 에 그림 을 그립 니 다)그리고 bitmap 에 원 과 사각형 을 그 렸 습 니 다.마지막 으로 우리 의 mBitmap 를 시스템 캔버스 에 그 려 다음 과 같은 효 과 를 얻 었 습 니 다.
그리고 우 리 는 setXfermode()방법 으로 그 에 게 mode 를 설정 하고 여 기 는 XOR 를 설정 합 니 다.

발견 할 수 있어!사 귀 던 곳 이 사 라 졌 다!신기 하지?
모드 를 바 꿔 보도 록 하 겠 습 니 다.

private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.DST_OVER); 

원형 이 직사각형 위로 달 려 오 는 것 을 볼 수 있다.  그리고 자 이언 트 는 다음 그림 과 같이 각 모델 을 정리 해 주 었 습 니 다.dst 가 먼저 그린 src 를 나중에 그린 것 을 설명 합 니 다.

여러분 은 이 규칙 에 근거 하여 한번 시험 해 볼 수 있 습 니 다.
이제 우 리 는 원 과 사각형 을 겹 친다.패턴 제거.

protected void onDraw(Canvas canvas) { 
 
    //dst 
    mCanvas.drawCircle(150,150,50,mCirclePaint); 
 
/    mWavePaint.setXfermode(mMode); 
    //src 
    mCanvas.drawRect(100,100,200,200,mWavePaint); 
    canvas.drawBitmap(mBitmap,0,0,null); 
    super.onDraw(canvas); 
  } 

내 원 이 왜 없어?  사실 원 은 덮 여 있 습 니 다.그리고 우 리 는 원 의 범위 내 에서 사각형 의 내용 을 표시 하고 어떻게 해 야 하 는 지 효 과 를 실현 하고 싶 습 니 다.직접 그림 을 찾 아 보 세 요.
우리 가 실현 하고 자 하 는 것 은 둥 근 물결 무늬 의 loadingview 이다.가장 중요 한 것 은 이 물결 무늬 를 실현 하 는 것 이다.
이때 베 세 르 곡선 이 도움 이 되 었 다.이곳 은 3 단계 베 세 르 를 사용 하여 X 시 뮬 레이 션 물결 효 과 를 끊임없이 바꾼다.

 if (x > 50) { 
      isLeft = true; 
    } else if (x < 0) { 
      isLeft = false; 
    } 
<span style="white-space:pre">    </span>if (y > -50) { //  -50       50            
      y--; 
    }    if (isLeft) { 
      x = x - 1; 
    } else { 
      x = x + 1; 
    } 
    mPath.reset(); 
    mPath.moveTo(0, y); 
    mPath.cubicTo(100 + x*2, 50 + y, 100 + x*2, y-50, mWidth, y);//          
    mPath.lineTo(mWidth, mHeight);//       
    mPath.lineTo(0, mHeight);//       
    mPath.close(); 

그 다음 에 mCanvas 로 이 bitmap 를 그립 니 다.그리 기 전에 mBitmap 를 비 워 야 합 니 다.그렇지 않 으 면 path 가 겹 칩 니 다.

mBitmap.eraseColor(Color.parseColor("#00000000")); 
 
//dst 
 mCanvas.drawPath(mPath, mPaint); 

canvas.drawBitmap(mBitmap, 0, 0, null); 
 
 
    postInvalidateDelayed(10); 

 하,물결 효과 가 나 왔 군.   이어서 그 가 원형 에 그 릴 수 있 도록 방법 을 생각해 보 자.먼저 원 을 그립 니 다.

mCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint); 

이제 방금 질문 으로 돌아 가 dst 범위 내 에서 src 를 그 리 는 방법 은...답 은SRC_인 잘 찾았어?추가 모드

//dst 
   mCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint); 
 
   mPaint.setXfermode(mMode); 
   //src 
   mCanvas.drawPath(mPath, mPaint); 
 
   canvas.drawBitmap(mBitmap, 0, 0, null); 

좀 느낌 있 지?이렇게 하지 않 으 면 많은 문 제 를 고려 해 야 한다.동적 계산 은 원호 x,y 좌 표를 따른다.  arcto 의 범 위 를 계산 합 니 다.
보완 하고 percent 를 추가 하여 진 도 를 대표 하여 y 가 percent 동태 에 따라 변화 하도록 합 니 다.
y = (int) ((1-mPercent /100f) *mHeight); 
setPercent 방법 추가

public void setPercent(int percent){ 
    mPercent = percent; 
  } 

백분율 을 그린 글자.

String str = mPercent + "%"; 
    float txtLength = mTextPaint.measureText(str); 
    canvas.drawText(mPercent + "%", mWidth / 2-txtLength/2, mHeight / 2, mTextPaint); 

그리고 seekBar 에 맞 춰 마지막 으로 글꼴 크기 를 바 꿉 니 다.  화필 투명도.배경 그림 을 추가 하면 효과 그림 의 효과 가 됩 니 다.
재 미 있 지 않 습 니까?여러분 이 실천 해 보 세 요!