Cairo 사용법
cairo 관련 api들의 레퍼런스는 http://cairographics.org/manual/ 를 참조한다.
출력 일반
cairo는 cairo_line_to, cairo_move_to, cairo_rectangle 등과 같은 함수를 호출하여 path를 지정하고 cairo_stroke(선), cairo_fill(면), cairo_paint(전체 면) 함수 호출시 surface에 출력된다.
이 출력 함수들이 호출된 후에는 이전에 정의된 path들이 제거된다. path를 보존하기 위해서는 cairo_stroke_preserve, cairo_fill_preserve 함수를 호출한다.
출력되는 색상은 cairo_set_source_rgb, cairo_set_source_rgba 함수에 의해 결정된다.
rgb 값을 0에서 1사이의 값을 각각 설정하며, 특히 rgba 함수는 alpha 채널값을 설정하여(역시 0에서 1사이의 값) 투명하게 출력할 수 있다.
라인의 넓이와 모양은 cairo_set_line_width와 cairo_set_dash 함수 등에 의해 설정된다.
Line
HDC hDC = GetDC(m_hWnd);
cairo_surface_t* pSurface = cairo_win32_surface_create(hDC); // win32용 surface 생성
cairo_t* pCairo = cairo_create(pSurface); // surface를 이용하여 cairo 컨텍스트 생성
cairo_set_source_rgb(pCairo, 0, 0, 0); // 컨텍스트의 색상 설정
cairo_set_line_width(pCairo, 0.2); // 컨텍스트의 라인 넓이 설정
cairo_move_to(pCairo, 10, 20); // 현재 path 커서를 (10, 20)으로 이동
cairo_line_to(pCairo, 100, 200); // 현재 path를 채우면서 (100, 200)으로 이동
cairo_stroke(pCairo); // 라인 출력
cairo_destroy(pCairo); // cairo 컨텍스트 삭제
cairo_surface_destroy(pSurface); // surface 삭제
ReleaseDC(m_hWnd, hDC);
* 이후 예제에서는 surface와 컨텍스트 생성 및 삭제는 제외
Rectangle
cairo_set_source_rgb(pCairo, 0, 0, 0); // 컨텍스트의 색상 설정
cairo_set_line_width(pCairo, 0.2); // 컨텍스트의 라인 넓이 설정
cairo_rectangle(pCairo, 0, 0, 100, 200); // 사각영역 패쓰 설정
cairo_stroke_preserve(pCairo); // 패쓰를 제거하지 않고 라인 출력
cairo_set_source_rgba(pCairo, 1, 0, 0, 0.5); // 컨텍스트의 색상을 빨간색으로 50% 투명하게 설정
cairo_fill(pCairo); // 패쓰를 채워서 출력
Ellipse
cairo에서 원은 cairo_arc 함수에 의해 제공되지만 타원을 그리기 위해서는 cairo_scale 함수를 이용하여 x 혹은 y 축으로 확대 혹은 축소시켜야 가능하다. win32에서의 Ellipse와 같은 함수를 직접 제공하지는 않는다.
cairo_set_source_rgb(pCairo, 0.3, 0.7, 0.5); // 컨텍스트의 색상 설정
cairo_arc(pCairo, 50, 50, 20, 0, 2*PI); // (50, 50)이 중심이고 반지름 20인 원 패쓰 설정
cairo_fill(pCairo); // 패쓰를 채워서 출력
Text / Font
cairo_select_font_face 함수와 cairo_set_font_size 함수로 폰트 이름 및 크기를 설정할 수 있다. 텍스트의 출력은 cairo_show_text 함수를 이용한다. 또한 텍스트 자체를 패쓰로 설정하여 stroke 및 fill 도 가능하다. 파라미터인 출력 문자열과 폰트 이름 등은 utf8 포맷이다.
텍스트의 출력 위치는 cairo_move_to 에 의해 결정된다. 주의할점으로, win32에서는 왼쪽 위가 원점이지만, cairo에서는 왼쪽 아래가 원점이다.
cairo_select_font_face(pCairo, "gulim",
CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); // 폰트 이름 설정
cairo_set_font_size(pCairo, 30); // 폰트 크기 설정, point 사이즈(1/72인치)
cairo_set_source_rgb(pCairo, 1, 0, 0); // 텍스트 색상을 붉은색으로
cairo_text_extents_t te;
cairo_text_extents(pCairo, "cairo_show_text", &te); // 텍스트의 넓이 및 높이 등을 얻어오기
cairo_move_to(pCairo, m_rcArea.Width()/2.0-te.width/2.0,
m_rcArea.Height()/2.0+te.height/2.0); // 중앙에 위치시키기
cairo_show_text(pCairo, "cairo_show_text"); // 텍스트 출력
cairo_move_to(pCairo, 0, te.height); // 왼쪽 위에 위치시키기
cairo_text_path(pCairo, "cairo_text_path"); // 텍스트 패쓰 설정
cairo_set_source_rgb(pCairo, 0, 0, 1); // 파란색으로
cairo_fill_preserve(pCairo); // 채우기
cairo_set_line_width(pCairo, 0.56); // 라인 넓이를 0.56픽셀로
cairo_set_source_rgb(pCairo, 0, 1, 0); // 녹색으로
cairo_stroke(pCairo); // 외곽선 그리기
Gradient
cairo는 패턴객체를 통하여 Gradient를 지원한다. Gradient에 사용되는 패턴은 cairo_pattern_create_linear 및 cairo_pattern_create_radial 함수에 의해 생성한다. 함수 이름에서 드러나듯이 cairo_pattern_create_linear 함수는 선형 패턴을 생성하고, cairo_pattern_create_radial 함수는 원형 패턴을 생성한다.
패턴을 생성한 후 cairo_pattern_add_color_stop_rgb 혹은 cairo_pattern_add_color_stop_rgba 함수를 통하여 색상을 설정한다. 이 함수들의 두번째 파라미터는 옵셋을 의미하는데, 이 옵셋을 통하여 해당 색상의 범위를 설정한다. 옵셋 값은 0에서 1사이의 값이다.
패턴에 대한 설정을 완료한 후 cairo_set_source 함수를 통하여 컨텍스트에 이 패턴을 설정한다. 이후 드로잉 작업시 설정된 패턴이 적용되어 출력된다.
cairo_save(pCairo); // 컨텍스트 저장
cairo_pattern_t* pPattern = cairo_pattern_create_linear(0, 0, dWidth, dHeight); // 선형패턴 생성
cairo_pattern_add_color_stop_rgba(pPattern, 0.00, 1, 1, 1, 0.5); // 패턴에 색상 및 옵셋 설정
cairo_pattern_add_color_stop_rgba(pPattern, 0.10, 1, 0, 0, 0.5); // 패턴에 색상 및 옵셋 설정
cairo_set_source (pCairo, pPattern); // 컨텍스트에 패턴 설정
cairo_rectangle (pCairo, 0, 0, dWidth, dHeight); // 사각영역 패쓰 설정
cairo_fill(pCairo); // 채우기
cairo_pattern_destroy(pPattern); // 패턴 제거
pPattern = cairo_pattern_create_radial(120, 120, 20, 100, 100, 150); // 원형패턴 생성
cairo_pattern_add_color_stop_rgb(pPattern, 0.0, 1.0, 1.0, 1.0); // 패턴에 색상 및 옵셋 설정
cairo_pattern_add_color_stop_rgb(pPattern, 0.3, 1.0, 0.0, 0.0); // 패턴에 색상 및 옵셋 설정
cairo_pattern_add_color_stop_rgb(pPattern, 1.0, 0.0, 0.0, 1.0); // 패턴에 색상 및 옵셋 설정
cairo_set_source(pCairo, pPattern); // 컨텍스트에 패턴 설정
cairo_arc(pCairo, 150, 150, 100, 0, 2*M_PI); // 원 패쓰 설정
cairo_fill(pCairo); // 채우기
cairo_pattern_destroy(pPattern); // 패턴 제거
cairo_restore(pCairo); // 저장된 컨텍스트를 로드
Double Buffer
개별적인 드로잉 행위가 많이 발생할 때 화면 깜박임 현상이 발생한다. 이를 방지하기 위해서 드로잉 작업을 일단 메모리상에서 수행하고 이 메모리 전체를 한번에 장치에 출력한다. 이 기법을 더블 버퍼링이라하고 cairo에서도 다음과 같은 방법으로 더블 버퍼링을 지원한다.
cairo_surface_t* pMemSurface = cairo_surface_create_similar(pSurface,
CAIRO_CONTENT_COLOR_ALPHA, dWidth, dHeight); // pSurface를 통해서 메모리 서피스를 생성. cairo_surface_create_similar는 win32의 CreateCompatibleDC와 대응한다.
cairo_t* pMemCairo = cairo_create(pMemSurface); // pMemSurface를 통하여 컨텍스트 생성
pMemCairo를 통하여 드로잉 작업 수행
cairo_set_source_surface(pCairo, pMemSurface, 0, 0); // 메모리 서피스를 소스로 설정
cairo_paint(pCairo); // 컨텍스트 전체를 출력
cairo_destroy(pMemCairo); // 메모리 컨텍스트 제거
cairo_surface_destroy(pMemSurface); // 메모리 서피스 제거
Clip
클립핑에는 두가지가 있다. 첫째 (윈도우 리사이징 등으로) 무효한(invalid) 영역에 대해서만 화면을 갱신시킨다. 둘째 프로그래매틱하게 특정 영역을 클립 영역으로 지정하면 클립 영역을 넘어서는 드로잉 작업은 무시한다.
첫번째 클립핑은 cairo 내부에서 자동으로 처리된다(win32의 경우 HDC에 클립핑에 대한 정보를 담고 있고, cairo 내부에서 이를 핸들링한다). 두번째 클립핑은 다음 예제와 같이 이용할 수 있다.
cairo_save(pCairo); // 컨텍스트 저장
cairo_surface_t* pImageSurface
= cairo_image_surface_create_from_png("image.png"); // 이미지를 통하여 서피스 생성
cairo_set_source_surface(pCairo, pImageSurface, 0, 0); // 이미지를 소스로 설정
cairo_arc(pCairo, 100, 100, 30, 0, 2*M_PI); // (100, 100)이 중심이고 반지름이 30인 원
cairo_clip(pCairo); // 현재 설정된 패쓰를 클립핑, 현재 패쓰 이외의 영역에 드로잉 무시
cairo_paint(pCairo); // 컨텍스트 전체를 출력. 결과적으로 원 이미지를 만들어낸다.
cairo_surface_destroy(pImageSurface); // 이미지 서피스 제거
cairo_restore(pCairo); // 저장된 컨텍스트를 로드
<출처>
이전 회사 사람 -_-
<참조>