part의 영역 중 일부만 노출해야하는 경우가 있습니다.
포토샵에 마스킹을 생각하시면 됩니다.
자신이 지정한 영역만 보이고 그 외의 영역은 아예 렌더링도 하지 않습니다.
바로 그러한 기능이 필요할 때 clip_to를 사용합니다.
clip이 자르다 혹은 깎다는 의미가 있는데요,
clip to로 지정한 영역 외에는 잘라버려서 보이지 않는다고 보면 됩니다.
안녕하세요, Tizen 개발자 윤진입니다.
clip_to: [another part's name];
clip_to는 파트블록 내에서 사용합니다.
필드값으로 다른 파트의 이름을 적어주어야 합니다.
현 파트의 영역 중 필드값으로 지정한 파트의 영역와 겹치는 부분만 렌더링하게 됩니다.
우선, 간단하게 이미지를 화면에 그려보도록 하겠습니다.
images {
image: "bg.jpg" COMP;
}
collections {
group {
name: "storycompiler";
parts {
part {
name: "bg";
type: RECT;
description {
state: "default" 0.0;
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 1.0;
color: 0 0 0 255;
visible: 1;
}
}
part {
name: "img";
type: IMAGE;
scale: 0;
description {
state: "default" 0.0;
image.normal: "bg.jpg";
rel1 { relative: 0.5 0.5; to: "bg"; }
rel2 { relative: 0.5 0.5; to: "bg"; }
min: 1145 425;
fixed: 1 1;
align: 0.5 0.5;
visible: 1;
}
}
}
}
}위의 코드에 있는 collections, group, parts, part 블록은 이미 지난 포스팅에서 설명을 드렸습니다.
image 타입에 대해서 아직 다루진 않았지만,
최소한의 기능만을 사용하였기에 코드만 봐도 이해에 어려움이 없으리라 생각합니다.
IMAGE 타입을 가진 img 파트는 bg 파트의 정중앙(0.5 0.5)에 위치하는 '점'입니다.
하지만, min값을 가지고 있기 때문에 min값만큼 영역이 늘어나게 됩니다.
그래서 나온 결과는 위의 캡쳐이미지와 같습니다.
코드에는 bg와 img 파트만 있는데요,
clip_to를 테스트하기 위하여 가운데 점으로부터 100 x 100짜리 사각형을 하나 만들어보겠습니다.
part {
name: "clip";
type: RECT;
description {
state: "default" 0.0;
rel1 { relative: 0.5 0.5; to: "bg"; }
rel2 { relative: 0.5 0.5; to: "bg"; }
color: 255 0 0 255;
min: 100 100;
align: 0.5 0.5;
visible: 1;
}
}위의 파트까지 포함하여 출력하면 아래 이미지를 볼 수 있습니다.
clip 사격형의 color는 RGBA 기준으로 255 0 0 0으로 붉게 두었습니다.
자, 이제 clip_to를 위한 준비를 마쳤습니다.
img 파트에 clip_to 필드를 추가합니다.
part {
name: "img";
type: IMAGE;
scale: 0;
clip_to: "clip";
description {
state: "default" 0.0;
image.normal: "bg.jpg";
rel1 { relative: 0.5 0.5; to: "bg"; }
rel2 { relative: 0.5 0.5; to: "bg"; }
min: 1145 425;
fixed: 1 1;
align: 0.5 0.5;
visible: 1;
}
}위처럼 한 줄 추가하면 굉장히 극적인 변화가 일어납니다.
clip 파트는 clip_to의 대상이 되기 때문에 img파트를 위한 '체'만 제공할 뿐입니다.
clip 파트가 '붉은색' 사각형이었기 때문에 '붉은 체'가 되겠지요.
img파트는 clip파트 영역만큼만 화면에 보이게 됩니다.
clip 파트가 '붉은 체'이기 때문에 붉게 물든 이미지가 보이겠네요.
그 외의 영역은 렌더링을 하지 않겠지요.
img보다 뒷편에 있는 bg의 검은 영역만 보이겠죠.
이전 이미지에서는 붉은 색 사각형에 가려져 보이지 않던 영역이 보이는 것을 확인할 수 있습니다.
붉은 색 사각형 영역만큼만 보이고 있습니다.
clip 영역에 애니메이션을 주면,
여러가지 재미난 효과를 추가할 수도 있습니다.
오늘은 여기까지 하겠습니다.
그럼 좋은 하루 보내세요~
끝_
