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