UWP 개발, Pen과 Shape

UWP에서의 그래픽 처리의 개요

UWP에서는 그래픽을 처리하기 위해 XAML과 C#을 사용하는데, 이로 인해 개발자는 UI를 쉽고 빠르게 만들고 사용자와의 상호작용을 구현할 수 있습니다. Pen과 Shape는 이러한 그래픽 구현에서 중요한 역할을 하는 요소입니다.

Pen 소개

Pen 객체는 선, 곡선 또는 기타 경로를 그릴 때 사용되는 도구입니다. Pen은 선의 굵기, 색상, 스타일 등을 지정할 수 있습니다.

using Windows.UI.Xaml.Media;
// Pen 객체 만들기
var myPen = new Pen
{
    Brush = new SolidColorBrush(Windows.UI.Colors.Blue),
    Thickness = 2
};

Shape 소개

Shape은 기본적으로 도형을 그리기 위한 클래스입니다. UWP에서 사용할 수 있는 여러 가지 Shape 클래스가 있으며, Rectange, Ellipse, Line, Polygon, Path가 포함됩니다. 각 클래스는 다양한 형상을 표현하는 데 사용됩니다.

기본적인 Pen 사용 예제

아래의 코드는 UWP 애플리케이션에서 Pen을 사용하여 Canvas에 선을 그리는 간단한 예제입니다.

<Canvas x:Name="myCanvas">
    <Path Stroke="{StaticResource MyPen}" Data="M 20,20 L 200,200" />
</Canvas>

private void DrawLine()
{
    var myPen = new Pen
    {
        Brush = new SolidColorBrush(Windows.UI.Colors.Red),
        Thickness = 3
    };
    
    var line = new Line
    {
        X1 = 20,
        Y1 = 20,
        X2 = 200,
        Y2 = 200,
        Stroke = myPen.Brush,
        StrokeThickness = myPen.Thickness
    };

    myCanvas.Children.Add(line);
}

다양한 Shape 사용 예제

UWP에서는 다양한 Shape을 사용할 수 있습니다. 아래는 Rectangle과 Ellipse를 그리는 예제입니다.

<Canvas x:Name="myCanvas">
    <Rectangle Width="100" Height="50" Fill="Green" />
    <Ellipse Width="100" Height="50" Fill="Blue" />
</Canvas>

private void DrawShapes()
{
    var rectangle = new Rectangle
    {
        Width = 100,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Green)
    };

    var ellipse = new Ellipse
    {
        Width = 100,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Blue)
    };

    myCanvas.Children.Add(rectangle);
    myCanvas.Children.Add(ellipse);
}

상호작용 추가하기

Pen과 Shape를 사용하여 그래픽을 그린 후, 사용자와의 상호작용을 추가할 수 있습니다. 예를 들어, 마우스 클릭 시 도형의 색상을 변경하는 방법은 다음과 같습니다.

private void myCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    var point = e.GetCurrentPoint(myCanvas).Position;
    var ellipse = new Ellipse
    {
        Width = 50,
        Height = 50,
        Fill = new SolidColorBrush(Windows.UI.Colors.Red),
        Margin = new Thickness(point.X, point.Y, 0, 0)
    };
    myCanvas.Children.Add(ellipse);
}

UWP에서 Pen과 Shape의 조합 활용

Pen과 Shape은 함께 사용하여 복잡한 그래픽을 쉽게 만들 수 있습니다. 예를 들어, 여러 가지 Shape을 조합하여 복잡한 도형을 만드는 것이 가능합니다. 또한, Shape의 경로를 Pen을 사용하여 그릴 수도 있습니다.

private void DrawComplexShape()
{
    var myPath = new Path
    {
        Stroke = new SolidColorBrush(Windows.UI.Colors.Black),
        StrokeThickness = 1,
        Data = Geometry.Parse("M 10,100 C 20,10, 40,10, 50,100")
    };

    myCanvas.Children.Add(myPath);
}

성능 최적화

UWP에서 Pen과 Shape을 사용하면서 성능을 최적화하는 것은 매우 중요합니다. 특히 많은 도형을 그릴 때에는 성능 저하가 발생할 수 있으므로, 배치 및 오프스크린 렌더링을 고려해야 합니다.

private void OptimizeRendering()
{
    var visualLayer = new DrawingVisual();
    using (var dc = visualLayer.RenderOpen())
    {
        for (int i = 0; i < 1000; i++)
        {
            dc.DrawEllipse(new SolidColorBrush(Colors.Blue), null, new Point(i * 10, i * 10), 5, 5);
        }
    }
}