첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
유용한 소스 코드가 있으면 icodebroker@naver.com으로 보내주시면 감사합니다.
블로그 자료는 자유롭게 사용하세요.

728x90
반응형

■ Polyline 클래스 : 베지어 곡선 그리기

------------------------------------------------------------------------------------------------------------------------


TestProject.zip


MainWindow.xaml

 

 

<Window x:Class="TestProject.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="800"

    Height="600"

    Title="Polyline 클래스 : 베지어 곡선 그리기"

    FontFamily="나눔고딕코딩"

    FontSize="16">

    <Canvas Name="canvas">

        <Path Fill="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}">

            <Path.Data>

                <GeometryGroup>

                    <EllipseGeometry x:Name="startPoint"

                        RadiusX="2"

                        RadiusY="2" />

                    <EllipseGeometry x:Name="control1Point"

                        RadiusX="2"

                        RadiusY="2" />

                    <EllipseGeometry x:Name="control2Point"

                        RadiusX="2"

                        RadiusY="2" />

                    <EllipseGeometry x:Name="endPoint"

                        RadiusX="2"

                        RadiusY="2" />

                </GeometryGroup>

            </Path.Data>

        </Path>

        <Path Stroke="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}">

            <Path.Data>

                <PathGeometry>

                    <PathGeometry.Figures>

                        <PathFigure StartPoint="{Binding ElementName=startPoint, Path=Center}">

                            <BezierSegment

                                Point1="{Binding ElementName=control1Point, Path=Center}"

                                Point2="{Binding ElementName=control2Point, Path=Center}"

                                Point3="{Binding ElementName=endPoint     , Path=Center}" />

                        </PathFigure>

                    </PathGeometry.Figures>

                </PathGeometry>

            </Path.Data>

        </Path>

        <Path Stroke="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}">

            <Path.Data>

                <GeometryGroup>

                    <LineGeometry

                        StartPoint="{Binding ElementName=startPoint  , Path=Center}"

                        EndPoint= "{Binding ElementName=control1Point, Path=Center}" />

                    <LineGeometry

                        StartPoint="{Binding ElementName=endPoint    , Path=Center}"

                        EndPoint= "{Binding ElementName=control2Point, Path=Center}" />

                </GeometryGroup>

            </Path.Data>

        </Path>

        <Label

            Canvas.Left="{Binding ElementName=startPoint, Path=Center.X}"

            Canvas.Top= "{Binding ElementName=startPoint, Path=Center.Y}"

            Content=    "{Binding ElementName=startPoint, Path=Center}" />

        <Label

            Canvas.Left="{Binding ElementName=control1Point, Path=Center.X}"

            Canvas.Top= "{Binding ElementName=control1Point, Path=Center.Y}"

            Content=    "{Binding ElementName=control1Point, Path=Center}" />

        <Label

            Canvas.Left="{Binding ElementName=control2Point, Path=Center.X}"

            Canvas.Top= "{Binding ElementName=control2Point, Path=Center.Y}"

            Content=    "{Binding ElementName=control2Point, Path=Center}" />

        <Label

            Canvas.Left="{Binding ElementName=endPoint, Path=Center.X}"

            Canvas.Top= "{Binding ElementName=endPoint, Path=Center.Y}"

            Content=    "{Binding ElementName=endPoint, Path=Center}" />

    </Canvas>

</Window>

 

 

MainWindow.xaml.cs

 

 

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Shapes;

 

namespace TestProject

{

    /// <summary>

    /// 메인 윈도우

    /// </summary>

    public partial class MainWindow : Window

    {

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field

        ////////////////////////////////////////////////////////////////////////////////////////// Private

 

        #region Field

 

        /// <summary>

        /// 다각선

        /// </summary>

        private Polyline polyline;

 

        #endregion

 

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

        ////////////////////////////////////////////////////////////////////////////////////////// Public

 

        #region 생성자 - MainWindow()

 

        /// <summary>

        /// 생성자

        /// </summary>

        public MainWindow()

        {

            InitializeComponent();

 

            this.polyline = new Polyline();

 

            this.polyline.Stroke = Brushes.Blue;

 

            this.canvas.Children.Add(polyline);

 

            this.canvas.SizeChanged += canvas_SizeChanged;

        }

 

        #endregion

 

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

 

        #region 마우스 DOWN 처리하기 - OnMouseDown(e)

 

        /// <summary>

        /// 마우스 DOWN 처리하기

        /// </summary>

        /// <param name="e">이벤트 인자</param>

        protected override void OnMouseDown(MouseButtonEventArgs e)

        {

            base.OnMouseDown(e);

 

            Point mousePoint = e.GetPosition(this.canvas);

 

            if(e.ChangedButton == MouseButton.Left)

            {

                this.control1Point.Center = mousePoint;

            }

 

            if(e.ChangedButton == MouseButton.Right)

            {

                this.control2Point.Center = mousePoint;

            }

 

            DrawBezierCurve();

        }

 

        #endregion

        #region 마우스 이동시 처리하기 - OnMouseMove(e)

 

        /// <summary>

        /// 마우스 이동시 처리하기

        /// </summary>

        /// <param name="e">이벤트 인자</param>

        protected override void OnMouseMove(MouseEventArgs e)

        {

            base.OnMouseMove(e);

 

            Point mousePoint = e.GetPosition(this.canvas);

 

            if(e.LeftButton == MouseButtonState.Pressed)

            {

                this.control1Point.Center = mousePoint;

            }

 

            if(e.RightButton == MouseButtonState.Pressed)

            {

                this.control2Point.Center = mousePoint;

            }

 

            DrawBezierCurve();

        }

 

        #endregion

 

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        //////////////////////////////////////////////////////////////////////////////// Event

 

        #region 캔버스 크기 변경시 처리하기 - canvas_SizeChanged(sender, e)

 

        /// <summary>

        /// 캔버스 크기 변경시 처리하기

        /// </summary>

        /// <param name="sender">이벤트 발생자</param>

        /// <param name="e">이벤트 인자</param>

        private void canvas_SizeChanged(object sender, SizeChangedEventArgs e)

        {

            this.startPoint.Center    = new Point(    e.NewSize.Width / 4,     e.NewSize.Height / 2);

            this.control1Point.Center = new Point(    e.NewSize.Width / 2,     e.NewSize.Height / 4);

            this.control2Point.Center = new Point(    e.NewSize.Width / 2, 3 * e.NewSize.Height / 4);

            this.endPoint.Center      = new Point(3 * e.NewSize.Width / 4,     e.NewSize.Height / 2);

 

            DrawBezierCurve();

        }

 

        #endregion

 

        //////////////////////////////////////////////////////////////////////////////// Function

 

        #region 베지어 곡선 그리기 - DrawBezierCurve()

 

        /// <summary>

        /// 베지어 곡선 그리기

        /// </summary>

        private void DrawBezierCurve()

        {

            Point[] pointArray = new Point[10];

 

            for(int i = 0; i < pointArray.Length; i++)

            {

                double t = (double)i / (pointArray.Length - 1);

 

                double x = (1 - t) * (1 - t) * (1 - t) * this.startPoint.Center.X +

                           3 * t * (1 - t) * (1 - t) * this.control1Point.Center.X +

                           3 * t * t * (1 - t) * this.control2Point.Center.X +

                           t * t * t * this.endPoint.Center.X;

 

                double y = (1 - t) * (1 - t) * (1 - t) * this.startPoint.Center.Y +

                           3 * t * (1 - t) * (1 - t) * this.control1Point.Center.Y +

                           3 * t * t * (1 - t) * this.control2Point.Center.Y +

                           t * t * t * this.endPoint.Center.Y;

 

                pointArray[i] = new Point(x, y);

            }

 

            this.polyline.Points = new PointCollection(pointArray);

        }

 

        #endregion

    }

}

 

------------------------------------------------------------------------------------------------------------------------

728x90
반응형
Posted by 사용자 icodebroker

댓글을 달아 주세요