Android 낙서 기술 및 스크레이퍼 예시 분석

개요:
  오래 전부터 안 드 로 이 드 의 낙서 를 연구 하고 싶 었 는데 사실은 연구 라 고 할 수 없 었 습 니 다. 모두 상대 적 으로 간단 한 지식 이 었 기 때 문 입 니 다.다음은 캔버스 (Canvas) 와 터치 이벤트 (onTouch Event) 를 기반 으로 낙서 와 스크레이퍼 를 실현 합 니 다.
참고:
http://blog.csdn.net/lmj623565791/article/details/40162163
이 사람의 블 로 그 는 정말 좋 습 니 다. 배우 고 싶 은 친구 들 도 이 큰 소의 다른 블 로 그 를 참고 할 수 있 습 니 다.
http://blog.csdn.net/t12x3456/article/details/10432935
예시 분석:
다음은 두 가지 간단 한 입문 예 이다. 낙서 기술 과 스크레이퍼 의 간단 한 분석 과 효과 전시 이다.
1. 낙서
  사고 분석 및 코드 전시
  Canvas 를 배 운 학생 들 은 우리 가 하나의 View 에 canvas 를 덮어 쓰 고 View 를 실현 하 는 onTouch Event 방법 을 통 해 Canvas 에 터치 스크린 을 남 길 수 있다 는 것 을 알 고 있 을 것 이다. 궤적 의 기록 에 대해 알 아야 할 것 은 Path 이다.Canvas 에 대한 더 많은 지식 은 여 기 를 클릭 하여 확인 하 세 요.
  Android 는 화면 을 그 릴 때 레이아웃 에 있 는 컨트롤 의 크기, 위치 등 인 자 를 가 져 와 서 그립 니 다.여기 서 우 리 는 onMeasure 와 onDraw 를 통 해 그 렸 을 뿐 onLayout 를 사용 하지 않 은 것 은 컨트롤 이 하나 밖 에 없 기 때문에 동적 레이아웃 을 처리 해 야 할 것 이 많 지 않 기 때 문 입 니 다.경로 에 대한 기록 은 onTouchEvent 가 필요 합 니 다.
  크기 측정:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        
        //    bitmap
        mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

  그리 기:

protected void onDraw(Canvas canvas) {
        drawPath();
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }

  경로 그리 기:
  우 리 는 Path 를 통 해 우리 가 만 진 경로 의 궤적 을 저장 합 니 다.다음 과 같다.

private void drawPath() {
        mFingerPaint.setStyle(Paint.Style.STROKE);
        mCanvas.drawPath(mPath, mFingerPaint);
    }

  터치 이벤트:
  터치 사건 에 있어 서 매우 중요 하고 무시 할 수 없 는 유형 이 바로 MotionEvent 이다.다음 세 가지 자주 사용 하 는 동작 이벤트 가 있 습 니 다.
  1.MotionEvent.ACTION_DOWN//터치 눌 렀 을 때
  2.MotionEvent.ACTION_MOVE//터치 이동 중
  3.MotionEvent.ACTION_UP  //터치 떠 날 때
다음은 onTouchEvent 사건 의 실현 과정 을 살 펴 보 겠 습 니 다.

public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (action) {
        case MotionEvent.ACTION_DOWN:
            actionMotionEventDown(x, y);
            break;
            
        case MotionEvent.ACTION_MOVE:
            actionMotionEventMove(x, y);
            break;
        }

        invalidate();
        return true;
    }

위의 코드 에서 우 리 는 누 를 때 누 르 는 논 리 를 실 현 했 고 손가락 이 화면 에서 이동 할 때 Move 의 논 리 를 실현 했다.
그리고 invalidate () 잊 지 마 세 요.invalidate () 함수 의 주요 역할 은 View 트 리 에 다시 그 려 달라 고 요청 하 는 것 입 니 다. 호출 하지 않 으 면 아무 일 도 일어나 지 않 습 니 다.
  효과 도

2. 스크레이퍼
  사고 분석 및 코드 전시
  분석: 사실 스크레이퍼 의 실현 방향 은 낙서 와 비슷 하 다. 모두 한 곳 에서 낙서 를 하고 흔적 을 남긴다.그러나 한 가지 다른 것 은 우리 가 스크레이퍼 를 그 리 는 과정 에서 붓 을 그 리 는 곳 이 투명 해 졌 다 는 것 이다.여기 서 당신 은 그것 이 간단 하 다 고 말 할 수 있 습 니 다. 내 가 두 겹 의 그림 을 덮어 쓰 고 터치 경 로 를 그 리 는 것 이 아니 라 터치 경로 의 색 만 투명 하 다 고 말 할 수 있 습 니 다.정말 그런 가요?한번 해 보 세 요.물론 이 는 통 하지 않 으 니 실천 의 최종 효과 에 대해 서 는 스스로 시도 해 보 세 요.이곳 의 관건 은 우리 가 위의 몽 층 을 지우 고 아래 의 밑바닥 을 보존 하 는 것 이다.여기에 도형 혼합 기술 이 사용 되 었 다.
  도형 혼합 기술 은 이름 을 들 으 면 깊 은 느낌 을 받 지만 정말 훌륭 한 기술 입 니 다. 그러나 자바 는 이미 우리 에 게 봉 해 주 었 습 니 다. 우 리 는 어떻게 사용 하 는 지 만 알 면 되 고 그것 을 사용 하 는 것 은 그리 어렵 지 않 습 니 다.
  도형 혼합 에 대한 상세 한 설명 은 여 기 를 참고 하 셔 도 됩 니 다. 저 는 바퀴 를 다시 만 들 지 않 겠 습 니 다.하지만 저 는 Xfermode 세 가지 하위 클래스 의 다음: Porter Duff Xfermode 를 간단하게 소개 하 겠 습 니 다.이것 은 매우 강력 한 변환 모드 입 니 다. 이 를 사용 하면 이미지 가 합 성 된 16 개의 Porter - Duff 규칙 의 임의의 하 나 를 사용 하여 Paint 가 기 존의 Canvas 이미지 와 어떻게 상호작용 하 는 지 제어 할 수 있 습 니 다.
Porter - Duff 규칙 은 다음 과 같 습 니 다.

Porter Duff. Mode 는 매 거 진 클래스 로 모두 16 개의 매 거 진 값 이 있 습 니 다. 1. Porter Duff. Mode. CLEAR  그림 은 캔버스 에 제출 되 지 않 습 니 다.2.PorterDuff.Mode.SRC    위쪽 그림 보이 기 3. PorterDuff. Mode. DST  아래쪽 그림 그리 기 4. PorterDuff. Mode. SRCOVER   정상 적 인 그리 기 디 스 플레이, 상하 층 에 겹 쳐 쓰기 캡 을 그립 니 다.5.PorterDuff.Mode.DST_OVER   위, 아래 다 보 여.아래쪽 이 위 에 표 시 됩 니 다.6.PorterDuff.Mode.SRC_IN    2 층 으로 교 집합 을 그립 니 다.상층 부 를 드러내다.7.PorterDuff.Mode.DST_IN   2 층 으로 교 집합 을 그립 니 다.아래쪽 보이 기.8.PorterDuff.Mode.SRC_OUT  상부 에서 비 교 집합 부분 을 그립 니 다.9.PorterDuff.Mode.DST_OUT  아래쪽 에서 비 교 집합 부분 을 그립 니 다.10.PorterDuff.Mode.SRC_ATOP  하층부 비 교 집합 부분 과 상층 부 교 집합 부분 11. Porter Duff. Mode. DSTATOP  상층 부 비 교 집합 부분 과 하층부 교 집합 부분 12. Porter Duff. Mode. XOR  이 또는: 두 그림 의 교차 부분 13. Porter Duff. Mode. DARKEN 제거  두 그림 의 모든 영역 을 가 져 오고 교차 부분 색상 이 14. PorterDuff. Mode. LIGHTEN 깊 어 집 니 다.  두 개의 그림 을 모두 가 져 오고 교차 부분 색상 을 밝 게 합 니 다. 15. PorterDuff. Mode. MULTIPLY  두 그림 의 교차 부분 을 중첩 한 후 색상 16. Porter Duff. Mode. Screen  두 그림 의 모든 영역 을 취하 고, 교차 부분 은 투명 색 으로 변 합 니 다.
우리 에 게 필요 한 것 은 바로 DstOut 이라는 것 이다.코드 에서 우 리 는 이렇게 실현 되 었 다.

private void drawPath() {
        mFingerPaint.setStyle(Paint.Style.STROKE);
        //             (          )
        mFingerPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        mCanvas.drawPath(mPath, mFingerPaint);
    }

측정 및 그리 기 과정 은 다음 과 같 습 니 다.

@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2, getHeight() / 2 + mTextBound.height() / 2, mBackPint);
        
        if (!isComplete) {
            drawPath();
            canvas.drawBitmap(mBitmap, 0, 0, null);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        
        //    bitmap
        mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);

        //      
        mFingerPaint.setStyle(Paint.Style.FILL);
        mCanvas.drawRoundRect(new RectF(0, 0, width, height), 30, 30, mFingerPaint);
        mCanvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.mask), null, new RectF(0, 0, width, height), null);
    }

이 기술 을 사용 한 블 로그 도 있다. 여 기 를 클릭 해 살 펴 보 자.
  효과 도

원본 다운로드:
http://download.csdn.net/detail/u013761665/8737527