[C#] RotateTransform을 이용한 WPF 아날로그 시계

강서현·2022년 6월 18일
0

C#

목록 보기
2/23

RotationTramsform의 속성

  1. 각도(Angle)-12시 기준 시계방향
  2. 기준점(CenterX, CenterY)

=> 보다 쉽게 만들 수 있다!

레이아웃 구성(.XAML)

<Grid>
        <Canvas x:Name="aClock" Width="300" Height="300">
        	<!-- 시계판 -->
            <Rectangle Width="300" Height="300"
                       Stroke="LightSteelBlue"/>
            <Ellipse Width="300" Height="300" 
                     Stroke="LightSteelBlue"
                     StrokeThickness="2"/>
            <Line X1="0" Y1="150" X2="300" Y2="150"
                  Stroke="LightBlue"/>
            <Line X1="150" Y1="0" X2="150" Y2="300"
                  Stroke="LightBlue"/>
            <!--시계바늘-->
            <Line x:Name= "secHand" Stroke = "Red"
                  StrokeThickness="2" StrokeEndLineCap="Round"/>
            <Line x:Name= "minHand" Stroke = "Green"
                  StrokeThickness="4" StrokeEndLineCap="Round"/>
            <Line x:Name= "hourHand" Stroke = "Blue"
                  StrokeThickness="6" StrokeEndLineCap="Round"/>
            <!--배꼽-->
            <Ellipse x:Name="center" Width="20" Height="20" Margin="140" 
                     Stroke="DarkOliveGreen" StrokeThickness="2" Fill="Chocolate"/>
        </Canvas>
    </Grid>

C#

  1. MainWindow()
            InitializeComponent();

            //시계판
            DrawFace();
            //시계바늘
            MakeClockHands();
            //타이머
            DispatcherTimer dt = new DispatcherTimer();
            dt.Interval = new TimeSpan(0, 0, 0, 0, 10);
            dt.Tick += Dt_Tick;
            dt.Start();
  1. 시계판의 눈금 그리기
        private void DrawFace()
        {
        	//눈금 60개를 Line배열로 생성
            //매 5번째 눈금은 큰 눈금으로
            Line[] marking = new Line[60];
            int w = 300; //시계 넓이

            for (int i = 0; i < marking.Length; i++)
            {
                marking[i] = new Line();
                marking[i].Stroke = Brushes.LightSteelBlue;
                marking[i].X1 = w / 2;
                marking[i].Y2 = 2;
                marking[i].X2 = w / 2;
                if (i % 5 == 0)
                {
                    marking[i].Y2 = 20;
                    marking[i].StrokeThickness = 5;
                }
                else
                {
                    marking[i].Y2 = 10;
                    marking[i].StrokeThickness = 2;
                }

				//눈금 1개당 중심점을 기준으로 6도씩 회전
                RotateTransform rt = new RotateTransform(6 * i);
                rt.CenterX = w / 2; //회전 중심점
                rt.CenterY = w / 2; //회전 중심점
                marking[i].RenderTransform = rt;
                aClock.Children.Add(marking[i]);

            }
        }
  1. 12시를 향하고 있는 시침,분침,초침 만들기

        private void MakeClockHands()
        {
            int w = 300;
            int h = 300;

            secHand.X1 = w / 2; //시계중심
            secHand.Y1 = h / 2; //시계중심
            secHand.X2 = h / 2;
            secHand.Y2 = 20;

            minHand.X1 = w / 2; //시계중심
            minHand.Y1 = h / 2; //시계중심
            minHand.X2 = h / 2;
            minHand.Y2 = 40;

            hourHand.X1 = w / 2; //시계중심
            hourHand.Y1 = h / 2; //시계중심
            hourHand.X2 = h / 2;
            hourHand.Y2 = 60;
        }
  1. 타이머
       private void Dt_Tick(object sender, EventArgs e)
        {
            int w = 300;
            DateTime c = DateTime.Now;

            int hour = c.Hour;
            int min = c.Minute;
            int sec = c.Second;

            double hourDeg = hour * 30 + min * 0.5;
            double minDeg = min * 6;
            double secDeg = sec * 6 + c.Millisecond * 0.006;

            RotateTransform rtH = new RotateTransform(hourDeg);
            rtH.CenterX = w / 2;
            rtH.CenterY = w / 2;
            hourHand.RenderTransform = rtH;

            RotateTransform rtM = new RotateTransform(minDeg);
            rtM.CenterX = w / 2;
            rtM.CenterY = w / 2;
            minHand.RenderTransform = rtM;

            RotateTransform rtS = new RotateTransform(secDeg);
            rtS.CenterX = w / 2;
            rtS.CenterY = w / 2;
            secHand.RenderTransform = rtS;
        }
profile
Recording...

0개의 댓글