2.3 Canvas Drawable, DRRect

아래 모양을 렌더링 해보자.

drawable

 

struct MyDrawable : public SkDrawable {
    SkRect onGetBounds() override { return SkRect::MakeWH(50, 100);  }
    void onDraw(SkCanvas* canvas) override {
       SkPath path;
       path.conicTo(10, 90, 50, 90, 0.9f);
       SkPaint paint;
       paint.setColor(SK_ColorBLUE);
       canvas->drawRect(path.getBounds(), paint);
       paint.setAntiAlias(true);
       paint.setColor(SK_ColorWHITE);
       canvas->drawPath(path, paint);
    }
};

void draw(SkCanvas* canvas) {
    sk_sp<SkDrawable> drawable(new MyDrawable);
  SkMatrix matrix;
  matrix.setTranslate(10, 10);
  canvas->drawDrawable(drawable.get(), &matrix);
}

 

Drawable을 렌더링 하기 위해서는 SkDrawable을 상속받은 커스텀 클래스를 생성한다.

void onDraw(SkCanvas* canvas) override 함수를 오버라이드 한다.

- 내부에 렌더링할 것들을 그려준다.

 

canvas->drawRect(path.getBounds(), paint)

- Path의 바운더리를 파랑색으로 그려준다.

 

cnavs->drawPath(path, paint)

- Path의 영역을 그려준다.

- 시작점은 (0,0)

- 컨트롤 포인트 (10, 90)

- 엔드 포인트(50, 90)

베지어 곡선의 곡률 W 값이 클수록 아래로 볼록한 그래프가 생성이 된다.

 

---

아래 모양을 렌더링 해보자.

 

 

void draw(SkCanvas* canvas) {
   SkRRect outer = SkRRect::MakeRect({0, 0, 210, 200});
   SkRRect inner = SkRRect::MakeOval({0, 0, 210, 200});
   SkPaint paint;
   paint.setAntiAlias(true);
   canvas->drawDRRect(outer, inner, paint);
}

 

MakeOval 함수는 LTRB 영역에 딱 맞는 타원을 만들어 준다.

 

canvas->drawDRRect(outer, inner, paint);

- DRRect = Difference of Rounded Rect

- outer round rect에서 inner round rect를 빼고 남은 영역을 렌더링

 

 

---

아래 모양을 렌더링 해보자.

void draw(SkCanvas* canvas) {
   SkRRect outer = SkRRect::MakeRect({20, 40, 210, 200});
   SkRRect inner = SkRRect::MakeRectXY({60, 70, 170, 160}, 10, 10);
   SkPaint paint;
   paint.setAntiAlias(true);
   paint.setStyle(SkPaint::kStroke_Style);
   paint.setStrokeWidth(20);
   paint.setStrokeJoin(SkPaint::kRound_Join);
   paint.setColor(SK_ColorBLUE);
   canvas->drawDRRect(outer, inner, paint);
   
   paint.setStrokeWidth(5);
   paint.setColor(SK_ColorWHITE);
   canvas->drawDRRect(outer, inner, paint);
}

 

setStyle 종류  ( 도형을 어떻게 그릴것인지 결정 )

style 종류	의미	설명	시각적 예
kFill_Style	채우기 전용	도형 안쪽을 채움	■ ●
kStroke_Style	선(테두리)만 그림	내부는 비우고 외곽선만 그림	□ ○
kStrokeAndFill_Style	채우고 선도 그림	안도 채우고 테두리도 그림	◎ ◉

 

 

setStrokeJoin 종류 ( 코너를 어떻게 그릴것인지 결정 )

stroke join 종류	의미	설명	시각적 예
SkPaint::kMiter_Join	날카로운 모서리 (뾰족하게) 연결	기본값, 각도가 작을수록 길게 튀어나올 수 있음	┏━, ⎾ ┓
SkPaint::kBevel_Join	모서리를 뚝 자른 형태로 연결	뾰족함 없이 평평하게 잘림	◣, ↘
SkPaint::kRound_Join	모서리를 둥글게 연결	부드러운 느낌, 곡선 UI에 적합	⤾, ⤿, ◎

 

 

outer rect는 (20, 40) ~ (210, 200) 영역

innter rect는 (60, 70) ~ (170, 160) 영역, radius 10을 주어서 round corner를 적용함.

outer rect 내부에 inner rect가 포함되어 있는 상황이다.

 

첫번째 렌더링할때는

style을 kStroke_Style로 설정하여 테두리만 렌더링 한다.

코너의 경우 모서리를 둥글게 처리한다.

선의 굵기를 20px로 설정하고, 테두리의 색을 파랑색으로 설정 후 렌더링

 

두 번째 렌더링할때는 

선의 굵기를 5px로 설정하고, 테두리의 색을 하얀색으로 설정 후 렌더링

첫번째 테두리의 내부에 하얀 테두리가 또 생성이 된다.