기존 글:
이번에는 ewk_view에 투명한 배경을 주는 예제를 소개할까 합니다.
기존의 예제(simple.c)를 약간 수정하는 정도의 예제입니다.
먼저 투명한 배경에 대한 설명을 하겠습니다.
일반적으로 웹 페이지는 웹뷰(ewk_view)의 전체 영역에 컨텐츠를 그리게 됩니다.
웹페이지는 body 태그의 배경을 이용하여 컨텐츠의 배경색을 갖게 되는데, 보통 다음과 같이 사용합니다.
### html
<!doctype html>
<!- no background -->
<body>HELLO</body>
### html
<!doctype html>
<body bgcolor="red">Hello, I am red background</body>
### html
<!doctype html>
<head><style>body { background-color: green; } </style></head>
<body>Hello, I am green background</body>
두번째와 세번째는 배경을 갖는 예제인 반면, 첫번째는 배경을 갖지 않는 예제입니다. 그러나 만약 첫번째 예제를 브라우저에서 실행한다면 흰 배경 위에 HELLO라는 글자가 적혀 있는 것을 보게 될 것입니다.
일반적으로 거의 대부분의 브라우저들은 기본 배경을 흰색으로 제공하고 있습니다.
그래서 웹 컨텐츠를 제작하는 대부분의 분들이 배경을 지정하지 않고 있습니다.
(
하지만 만약 흰 배경을 사용하지 않는 브라우저가 나타나면 어쩌실건가요? ㅡ.ㅡ
그리고, 특정 모바일 디스플레이들은 흰색일 때 배터리 소모가 극심합니다.
)
webkit도 기본 배경을 흰색으로 정하고 있지만, 다른 색을 쓰거나, 투명하게 그릴 수 있는 방법을 제공하고 있습니다.
ewebkit에서 관련 API는 ewk_view_bg_color_set 이라는 API가 존재합니다.
### c++
/**
* Sets the background color and transparency of the view.
*
* @param o view object to change the background color
* @param r red color component
* @param g green color component
* @param b blue color component
* @param a transparency
*/
EAPI void ewk_view_bg_color_set(Evas_Object *o, int r, int g, int b, int a);
각각의 color component들은 0 부터 255 사이의 숫자여야 합니다.
일반적으로 EFL에서는 evas_object_color_set이라는 API를 이용하여 evas object의 색을 지정했지만,
ewebkit에서는 alpha를 제외하곤 evas_object_color_set의 다른 인자들을 사실상 무시합니다.
이유는, evas_object_color_set의 alpha가 전체 컨텐츠의 opacity를 다루는 반면, ewebkit은 배경만의 opacity를 다루어야 하는 요구사항이 있기 때문입니다.
즉, evas_object_color_set은 evas_object 전체의 색을 조절하는 API로 ewebkit에서는 contents의 색은 contents가 지정해야 하기 때문에 RGB값은 무시됩니다. (현재)
ewk_view_bg_color_set 을 사용하는 예제는 아래와 같습니다.
https://github.com/ewebkit/samples/blob/master/devs/ryuan/transparent.c
### c++
// gcc transparent.cpp `pkg-config --cflags --libs elementary ewebkit2
#include <Elementary.h>
#include <EWebKit2.h>
void on_done(void *userData, Evas_Object *webView, void *eventInfo)
{
elm_exit();
}
EAPI_MAIN int
elm_main(int argc, char *argv[])
{
ewk_init();
Evas_Object* win;
win = elm_win_add(NULL, "sample", ELM_WIN_BASIC);
elm_win_title_set(win, "sample");
evas_object_smart_callback_add(win, "delete,request", on_done, NULL);
elm_win_autodel_set(win, EINA_TRUE);
Evas_Object* bg = elm_bg_add(win);
evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_bg_color_set(bg, 0, 0, 255);
elm_win_resize_object_add(win, bg);
evas_object_show(bg);
Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win));
ewk_view_html_string_load(ewk, "<!doctype html><body>HELLO</body>", NULL, NULL);
ewk_view_bg_color_set(ewk, 0, 0, 0, 0);
evas_object_resize(ewk, 400, 400);
evas_object_move(ewk, 0, 0);
evas_object_show(ewk);
evas_object_resize(win, 400, 400);
evas_object_show(win);
elm_run();
ewk_shutdown();
}
ELM_MAIN()
배경 속성이 없는 web contents를 위해 url 대신 ewk_view_html_string_load를 이용했습니다.
그리고 ewk_view_bg_color_set 을 통해 ewk_view의 배경을 투명하게 만든 예제입니다.
위에서 elm_bg의 색을 blue로 했기 때문에 파란색 배경 위에 HELLO라는 글자가 적혀있어야 합니다.
만약 검은색으로 나온다면, ewebkit을 최신으로 빌드해보시기 바랍니다.
(최근 수정 :https://bugs.webkit.org/show_
추신. 현재 ewk_view_bg_color_set과 EFL 관련 버그가 하나 더 있는 것 같습니다.
만약 ewk_view_bg_color_set의 RGB요소에 값을 주고 alpha를 준 경우, elm_bg의 색과 blend되고 있습니다.
만약 투명한 웹뷰가 필요한 경우라면 RGB요소를 모두 0으로 주시기 바랍니다.
'Open Source > EFL' 카테고리의 다른 글
| [EFL] EWebKit Extension (0) | 2014.09.23 |
|---|---|
| Hello ewebkit? (2) | 2014.03.14 |
| WebKit/efl 하면서 쓸 ctags 만들기 (0) | 2013.12.17 |
| Elementary Dark theme (0) | 2013.10.17 |
| [TIZEN][EFL] 타이젠 상에서 EFL 예제 실행하기 (9) | 2013.08.02 |