1. SkCanvas Overview
ㅅㅂ 널정복
git clone https://skia.googlesource.com/skia.git
# fetch skia
cd skia
python3 tools/git-sync-deps
python3 bin/fetch-ninja
bin/gn gen out/Debug
tools/install_dependencies.sh
빌드를 해보자.
ninja -C out/Debug skia
gn gen out/Static --args='is_component_build=false'
# 이렇게 해줘야 static 빌드가 되네
ninja -C out/Static -v
1. 별 렌더링
void draw(SkCanvas* canvas) {
const SkScalar scale = 256.0f;
const SkScalar R = 0.45f * scale;
const SkScalar TAU = 6.2831853f;
SkPath path;
path.moveTo(R, 0.0f);
for (int i = 1; i < 7; ++i) {
SkScalar theta = 3 * i * TAU / 7;
path.lineTo(R * cos(theta), R * sin(theta));
}
path.close();
SkPaint p;
p.setAntiAlias(true);
canvas->clear(SK_ColorWHITE);
canvas->translate(0.5f * scale, 0.5f * scale);
canvas->drawPath(path, p);
}
SkScaler는 float라고 보면 된다.
SkPath는 (x, y) 좌표들의 리스트이며 선을 그릴때 사용한다.
moveTo 함수는 시작점을 나타내어, x 좌표가 우측에서 시작한다.
반복문이 돌면서 path를 생성하는데,
x 값에 cos, y값에 sin을 곱하므로, 원점을 중심으로 반지름인 R인 위치를 계산하게 된다.
path 생성을 종료하려면 path.close()를 호출해준다.
세타값을 계산해보면
0 -> 150 -> 308 -> 462 -> 617 -> 771 -> 925 도 형태로 변한다.
원점 중심으로 x : cos theta, y : sin theta 의 반지름 R을 곱해주면
아래와 같은 패스가 나오게된다.
Drawing을 위해서는 SkPaint (페인트)를 생성해주어야 한다.
canvas->clear(SK_ColorWhite)로 배경을 하얗게 만들고,
좌상단이 원점이니, 별의 중심을 가운데로 옮기기 위해
canvas->translate(x, y)를 해준다.
마지막으로 path를 페인트로 렌더링을 해준다.
cnavas->drawPath(path, paint)
선만 그렸는데 내부가 검은색으로 칠해지는 이유는 뭘까?
SkPaint::kFill_Style이 기본이기 때문에 내부도 칠함.
선만 렌더링 하기 위해서는 아래 옵션을 사용함.
p.setStyle(SkPaint::kStroke_Style);
자 이제 맛봤지?
이제 본격적으로 Canvas, Bitmap, Region, SkPath, SkSl, Surface 등 알아보자 ^^
도커파일
============================================================
FROM ubuntu:22.04
ENV DEBIAN_FRONTEND=noninteractive
# 기본 패키지 설치 (한 줄씩)
RUN apt-get update
RUN apt-get install -y build-essential
RUN apt-get install -y clang
RUN apt-get install -y cmake
RUN apt-get install -y python3
RUN apt-get install -y git
RUN apt-get install -y curl
RUN apt-get install -y ninja-build
RUN apt-get install -y libgl1-mesa-dev
RUN apt-get install -y libglu1-mesa-dev
RUN apt-get install -y libfreetype6-dev
RUN apt-get install -y libjpeg-dev
RUN apt-get install -y libpng-dev
RUN apt-get install -y libwebp-dev
RUN apt-get install -y libx11-dev
RUN apt-get install -y libxext-dev
RUN apt-get install -y libxrender-dev
RUN apt-get install -y libfontconfig1-dev
RUN apt-get install -y libharfbuzz-dev
RUN apt-get install -y libexpat1-dev
RUN apt-get install -y sudo
RUN apt-get install -y libx11-xcb-dev
RUN rm -rf /var/lib/apt/lists/*
RUN mkdir -p /workspace
# 작업 디렉토리 설정
WORKDIR /workspace
# GN 빌드
RUN git clone https://gn.googlesource.com/gn
RUN cd gn && python3 build/gen.py
RUN cd gn && ninja -C out
RUN cp /workspace/gn/out/gn /usr/local/bin/gn
# Skia 설치 및 의존성
RUN git clone https://github.com/dlgmlals3/Skia.git
RUN cd Skia && tools/install_dependencies.sh || true
RUN cd Skia && python3 tools/git-sync-deps || true
RUN ln -s /usr/local/bin/gn /workspace/Skia/bin/gn
# Skia 설정 및 빌드
WORKDIR /workspace/Skia
RUN bin/gn gen out/Static --args='is_official_build=false is_debug=false skia_use_gl=true skia_use_vulkan=true skia_use_fontconfig=false skia_pdf_subset_harfbuzz=false' --ide=json
RUN ninja -C out/Static
==============================================
# 도커 설치
docker build -t skia .
# 도커 접속
docker run -it -e DISPLAY=host.docker.internal:0.0 skia
# 도커에서 빌드
ninja -C out/Static && ./out/Static/dlgmlals3_Test
# Image 보기 Eog XX.jpg
# Visual code 설치 Remote explore
2. 🧠 compile_commands.json 생성 여부
Skia에서 아래 명령어로 반드시 생성해야 합니다.
3. ⚙️ .vscode/settings.json 확인
4. 🧩 확장 프로그램 확인
Extensions 탭에서 아래가 설치되어 있는지 확인:
- ✅ C/C++ (ms-vscode.cpptools) — 설치되어 있어야 함
- ❌ clangd는 지금 못 쓰는 상태니까 없어도 됨