Winform GDI+繪圖二：繪製旋轉太極圖

你們好，今天有時間給你們帶來Winform自繪控件的第二部分，也是比較有意思的一個控件：旋轉太極圖。

你們能夠停下思考一下，若是讓你來繪製旋轉的太極圖，你們有什麼樣的思路呢？我今天跟你們展現一下，我平時繪製所用的思路，還請各位不吝賜教。

其實連續的動畫效果，微觀上去看，就是將這連續的時間切成一小段一小段，太極圖只要在每一小段時間移動必定角度。那麼在宏觀上看將會是連續的動畫。因此總體的思路就有了：

在每一小段的時間將，改變繪製起始角度，觸發控件重繪，就能夠造成連續的動畫效果。由於是圍繞控件中心進行旋轉，因此要使用TranslateTransform函數，將原點移至控件中心位置，代碼以下圖：

   g.TranslateTransform(Width / 2, Width / 2);

在繪製太極以前，先將畫布旋轉必定角度，angle是一個變量，這樣當我定時去改變angle時，太極圖將會先旋轉到不一樣的位置，再進行繪製：

 g.RotateTransform(angle);

在繪製完成以後，將畫圖原點移到左上角：

g.TranslateTransform(-Width / 2, -Width / 2);

定時改變angle的任務就交給Timer定時器便可：

   private void timer1_Tick(object sender, EventArgs e)
        {
            if (rotateSpeed != 0)
            {
                angle += (int)(rotateSpeed * 360f / Math.PI/40);
                if (angle >=360)
                    angle -= 360;
                if (angle <= -360)
                    angle += 360;
            }
            Invalidate();
        }

控件的onpaint方法：

 protected override void OnPaint(PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
            g.TranslateTransform(Width / 2, Width / 2);
            g.RotateTransform(angle);
            //繪製黑色部分
            using (GraphicsPath path = new GraphicsPath())
            {
                path.AddArc(-Width/2, -Width/2, Width, Width, 0, 180);
                path.AddArc(-Width/2, -Width / 4, Width / 2, Width / 2, 0, -180);
                path.AddArc(0, -Width / 4, Width / 2, Width / 2, 0, 180);
                g.FillPath(Brushes.Black, path);
                g.FillPie(Brushes.White, new Rectangle(Width * 90 / 400-Width/2, Width * 190 / 400-Width/2, Width * 50 / 400, Width * 50 / 400), 0, 360);
            }
            //繪製白色部分
            using (GraphicsPath path = new GraphicsPath())
            {
                path.AddArc(-Width / 2, -Width / 2, Width, Width, 0, -180);
                path.AddArc(-Width / 2, -Width / 4, Width / 2, Width / 2, 0, -180);
                path.AddArc(0, -Width / 4, Width / 2, Width / 2, 0, 180);
                g.FillPath(Brushes.White, path);
                g.FillPie(Brushes.Black, new Rectangle(Width * 290 / 400 - Width / 2, Width * 190 / 400 - Width / 2, Width * 50 / 400, Width * 50 / 400), 0, 360);
            }
            g.TranslateTransform(-Width / 2, -Width / 2);
            base.OnPaint(e);
        }

總體效果以下：

項目已開源，開源地址：https://gitee.com/james_happy/IndustryControls，歡迎Star與Fork