반응형
이번 시간에는 타원,호를 살펴보겠습니다.
사실 타원과 호라고 했지만 원을 그릴때도 마찬가지로 적용합니다.
엄격하게 말하면 원은 완전한 원은 아닙니다. 하지만 일반적인 모니터로 보았을때
거의 구분이 안되기 때문에 그냥 원이라고 합시다. ㅠㅠ
앞에서 살펴본 GraphicPath 의 속성은 사실 어디서 뚝 떨어진것은 아니고
SVG 스펙에 근거해서 만들어졌습니다.
내용을 보면 거의 유사하다고 보시면 됩니다.
SVG 소스를 그대로 가져다 놓으면 동일하게 구현되지만 약간의 차이가 있긴 합니다.
elliptical arc 는 A 로 구분하고 다음과 같은 속성을 가집니다.
nRx nRy nAngle bLargearcflag bSweepflag nX nY
먼저 nRx, nRy는 타원의 반지름에 해당합니다. 2개 속성의 크기가 같다면 타원이 아닌 원이 됩니다.
중심을 기준으로 X축 반지름과 Y축 반지름이 같은 상황이구요.
각 반지름의 길이가 달라지면 타원이 됩니다.
중심축을 기준으로 그냥 그리게 되면 각 축에 수평으로 타원이 그려지는데
X축의 회전각도 nAngle에 변화를 주면 해당 각도에 따라 방향이 변하게 됩니다.
첫번째 케이스는 M 300.0 350.0 a 150 150 0 1 1 50 50 로 설정한 상태입니다.
두번째 케이스는 M 300.0 350.0 a 100 150 0 1 1 50 50 로 설정한 상태입니다.
X축 반지름이 줄었기 때문에 서있는 계란 모양이 만들어졌습니다.
세번째 케이스는 M 300.0 350.0 a 100 150 45 1 1 50 50 로 설정한 상태입니다.
출처
http://cafe.naver.com/xplatform101/31
첫번째 케이스는 M 300.0 350.0 a 150 150 0 1 1 50 50 로 설정한 상태입니다.
X,Y 축 반지름이 동일하기 때문에 정원에 가까운 모습입니다.
마지막 속성값인 nX nY 는 끝점으로 정원을 만들고 싶다면 해당 값을 0에 가깝게 하면 됩니다.
단 0으로 하면 안되고 2이상의 값으로 지정해주고 마지막에 path 를 끝내는 z를 추가해주면 작은 구멍이 채워집니다.
그렇게 놓고 보면 빈틈이 없어 보입니다.두번째 케이스는 M 300.0 350.0 a 100 150 0 1 1 50 50 로 설정한 상태입니다.
X축 반지름이 줄었기 때문에 서있는 계란 모양이 만들어졌습니다.
세번째 케이스는 M 300.0 350.0 a 100 150 45 1 1 50 50 로 설정한 상태입니다.
X축 회전각도를 45도 기울였기 때문에 그림과 같은 모양이 되었습니다.
동적으로 응용을 하게 되면 애니메이션 효과도 낼 수 있겠죠.
하지만 애니메이션은 별도의 컴포넌트를 제공하니 굳이 사용할 필요는 없습니다.
bLargearcflag bSweepflag 속성은 설명이 좀 애매하긴 한데
아래 그림이 가장 잘 설명이 되어있습니다.
W3C 스펙에 나와있는 내용이긴 한데 그림으로 보고 이해하는것이 빠를듯 합니다.
일단 타원은 여기까지 하고 다음 시간에는 커브에 대해 알아보겠습니다.
UX 스튜디오에서 편집할때 스크립트나 인라인 속성으로 집어넣을 수 있고
아래 그림과 같이 편집 대화상자에서 항목을 추가할 수도 있습니다. 출처
http://cafe.naver.com/xplatform101/31
728x90
