그림을 그려보자 - GraphicPath (하)

이제 마지막 단계입니다.

GraphicPath 을 사용하면 벡터그래픽의 장점인 확대와 축소를 가능하게 합니다.

기업용 애플리케이션을 만들면서 그림 그리는 툴이 뭐가 필요할까 싶지만

의외로 많은 부분에서 이를 필요로 합니다.

조직도나 다이어그램을 그린다고 할때

드로잉 도구가 없이 그리려고 한다면 정말 난감할 겁니다.

커브는 Cubic Bezier Curve 형식을 따릅니다.

베지어 곡선 Bezier curve 은 불규칙한 곡선을 표현하기 위해 프랑스의 수학자 베지어(Bezier P.)가 수학적으로 만든 선이라고 합니다. 이럴때는 수학공부를 학교다닐때 열심히 할걸이라는 생각이 듭니다. 커스텀 컴포넌트 개발로 깊이 들어갈때에도 수학적인 지식이 필요하기때문에 여유가 있을때 기본을 다시 잡아주는 것도 좋습니다.

각 속성에 대한 설명이 가장 잘 나와있는 이미지로 설명을 대체합니다.

http://www.itk.ilstu.edu/faculty/javila/svg/svg_drawing1/cubic_curve.htm

각 점과 해당 점의 콘트롤 포인트가 동일하게 되면 컨트롤할 수 있는 포인트가 없습니다.

예를 들어 M 100 100 c 0 0 0 0 100 100 와 같이 데이터가 정의되었다면

100,100 좌표점에서 200,200 좌표점간에 직선이 그어집니다.

그렇지 않다면 각 콘트롤 포인트를 활용해서 원하는 곡선을 만들어줄 수 있습니다.

GraphicPath 의 각 속성은 data 속성을 직접 지정해줄 수도 있지만

UX 스튜디오를 통해 편집도 가능합니다.

하지만 직접 편집하는 것은 조금 까다롭기도 하고 애플리케이션 작업시 원하는 것은

동적으로 그래픽을 구성하는 것이기 때문에 참조만 하시면 될 듯 합니다.

설정된 GraphicPath  영역내에서 오른쪽 마우스를 클릭하면 

GraphicPath Edit 항목이 나옵니다.

그리고 나면 지정된 값을 GUI 환경에서 수정할 수 있는 편집상태가 됩니다. 

콘트롤 포인트의 위치에 따라 원하는 곡선을 만들 수 있습니다.

채우기와 같이 동작하게 되면 입체적인 면을 만들어낼 수도 있습니다.

작업을 마치게 되면 마무리를 해줘야 겠죠.

역시 오른쪽 마우스를 클릭하고 End Edit 를 선택합니다.

* 참고로 GraphicPath 는 기타 아이콘으로 표시가 되어있습니다.

수정을 원한다면 프로젝트 탐색기에서 TypeDefinition을 더블클릭해주면 편집 가능한

대화상자가 보일겁니다.

거기에서 GraphicPath를 선택하고 Image 컬럼의 아이콘을 42번으로 바꾸어줍니다.

자주 쓰는 기능은 아니지만 저렇게 조정이 가능합니다.

다른 아이콘들도 맘에 들지 않는다면 자유롭게 바꿀 수 있습니다.

단 초기화 기능따위는 없으니 주의하시구요.

출처
http://cafe.naver.com/xplatform101/32