Geometry Padding Extension

 

Introduction 

WPF에서 Geometry를 이용해 도형을 그릴때 테두리를 그리기 위해 아래와 같이 Stroke를 이용해 도형을 그립니다.
<Path Data="M0,0 L100,0 L100,100 L0,100 z" Fill="Black" Stretch="Fill" Stroke="#7FFF0000" StrokeThickness="20"/>
그런데 Stroke를 이용해 테두리를 그릴때 Stroke가 하나가 아니고 두개 이상을 그려야 하는 경우 문제가 발생합니다. 정 N각형의 경우 간한히 크기가 작은 도형을 한번 더 그려서 Stroke를 두개 이상 생성하는게 가능하지만, 임의의 모양의 도형일 경우에는 아래 그림과 같이 단순히 크기 조절만으로는 Stroke와 같은 효과를 낼 수 가 없습니다.

정 N각 형이 아닐 경우 직접 Path Data의 위치를 수정하거나 다시 그려야 하는데 간단한 모양일 경우에는 한두번정도 해보겠지만, 모양이 복잡해질 수록 정확도는 떨어지고 시간도 오래걸리게 됩니다. 이번시간에는 입력된 Geometry에서 특정 거리만큼 들어간(Padding) 모양을 자동으로 생성하는 방법에 대해 소개합니다. 아래는 이번시간에 구현하게될 샘플 동영상입니다.

 

Geometry Padding Extension 

이와 같은 내용은 폴리곤 버퍼링(Polygon Buffering) 이라고 하여 주로 GIS분야에서 자주 사용되는 기술이지만 GUI분야에서도 충분이 으용될 수 있습니다. 기본적인 원리는 도형의 매 포인트마다 도형의 방향으로 N거리만큼 떨어뜨린 점들을 조합하여 도형을 완성하는 방식입니다. (http://www.cgal.org/Manual/3.2/doc_html/cgal_manual/Straight_skeleton_2/Chapter_main.html)

뭔가 어려워 보이지만 WPF에서는 GetWidenedPathGeometry를 통해 입력된 Geometry에 Stroke가 생성된 Geometry를 간단하게 생성할 수 있기 때문에 쉽게 처리 할 수 있습니다.

public static class GeometryHelper { public static void GetBorderGeometry(this Geometry Source, double BorderThickness, double Padding, StrokePositions StrokePosition,out Geometry BackgroundGeometry, out Geometry BorderGeometry) { BackgroundGeometry = null; BorderGeometry = null; if (Source == null) return; if (StrokePosition == StrokePositions.Center) { BackgroundGeometry = Source.GetWidenedPathGeometry(new Pen(Brushes.Transparent, Padding * 2 + BorderThickness)).GetOutlinedPathGeometry(); BackgroundGeometry = CombinedGeometry.Combine(Source, BackgroundGeometry, GeometryCombineMode.Exclude, null); BorderGeometry = BackgroundGeometry; } else if (StrokePosition == StrokePositions.Inner) { BackgroundGeometry = Source.GetWidenedPathGeometry(new Pen(Brushes.Transparent, Padding * 2)).GetOutlinedPathGeometry(); BackgroundGeometry = CombinedGeometry.Combine(Source, BackgroundGeometry, GeometryCombineMode.Exclude, null); BorderGeometry = BackgroundGeometry.GetWidenedPathGeometry(new Pen(Brushes.Transparent, BorderThickness)).GetOutlinedPathGeometry(); BorderGeometry = CombinedGeometry.Combine(BackgroundGeometry, BorderGeometry, GeometryCombineMode.Exclude, null); } else if (StrokePosition == StrokePositions.Outer) { BackgroundGeometry = Source.GetWidenedPathGeometry(new Pen(Brushes.Transparent, Padding * 2 + BorderThickness * 2)).GetOutlinedPathGeometry(); BackgroundGeometry = CombinedGeometry.Combine(Source, BackgroundGeometry, GeometryCombineMode.Exclude, null); BorderGeometry = Source.GetWidenedPathGeometry(new Pen(Brushes.Transparent, Padding * 2 + BorderThickness)).GetOutlinedPathGeometry(); BorderGeometry = CombinedGeometry.Combine(Source, BorderGeometry, GeometryCombineMode.Exclude, null); } } }

한가지 확인해야하는 부분은 GetWidenedPathGeometry를 통해 Geometry를 생성 할 경우 Stroke가 안쪽과 바깥쪽으로 적용된 도형이 생성되기 때문에 CombinedGeometry를 통해 다듬어 주는 과정이 필요합니다. 위 코드에서는 이와 같은 방식으로 Padding값이 적용된 Inner, Center, Outer Stroke 도형을 생성할 수 있습니다.

아래는 이번시간에 사용된 전체 소스코드이며 질문은 댓글이나 메일 주시면 답변 드리도록 하겠습니다. 감사합니다.

WIT.WPF.Samples.GeometryPadding.zip