[Window Form] 繪製地面站姿態儀(三) Roll刻度

先繪製Roll的刻度

 UserControl.cs

    #region Roll
    int[] angles = { -60, -45, -30, -20, -10, 0, 10, 20, 30, 45, 60 };
    //要顯示的角度陣列
    var angleHeight = 25f * offset;
    //畫角度的啟始高度，最高的Pitch刻度再高一些(在這是+20度外加位移5，所以取25)
    var angleLine = offset;//4.5
    //線條的長度
    foreach (var angle in angles)
    {
        graphics.ResetTransform();
        graphics.TranslateTransform(Width / 2f, Height / 2f);
        graphics.RotateTransform(angle + Roll);
        using(var pen = new Pen(Color.White, 2f))
        {
            graphics.DrawLine(pen, 0, -angleHeight, 0, -angleHeight - angleLine);
            //旋轉畫面後再畫刻度，線條往上畫，所以減線條長度值
        }
    }
    #endregion

再增加弧線修飾及三角指標

    graphics.ResetTransform();
    graphics.TranslateTransform(Width / 2f, Height / 2f);
    var arcRect = new RectangleF(-angleHeight, -angleHeight, angleHeight * 2, angleHeight * 2);
    //因為刻度都是以angleHeight為半徑，
    //所以Rectangle的XY以(-angleHeight,-angleHeight)為啟始點
    //長寬為angleHeight的兩倍，正方矩形。
    using (var pen = new Pen(Color.White, 2f))
    {
        graphics.DrawArc(pen, arcRect, -150f + Roll, 120f);
        //顯示角度為+-60，所以全長為120度，然後向左旋轉150度
    }
    graphics.ResetTransform();
    graphics.TranslateTransform(Width / 2f, Height / 2f);
    using (var pen = new Pen(Color.Red, 2f))
    {
        //畫三角指標
        var arrowWidth = 8f;
        graphics.DrawLine(pen, 0, -angleHeight, arrowWidth, -angleHeight + arrowWidth);
        graphics.DrawLine(pen, 0, -angleHeight, -arrowWidth, -angleHeight + arrowWidth);
        graphics.DrawLine(pen, arrowWidth, -angleHeight + arrowWidth, -arrowWidth, -angleHeight + arrowWidth);
    }

三角指標可使用DrawPolygon取代

    using (var pen = new Pen(Color.Red, 2f))
    {
        //畫三角指標
        var arrowWidth = 8f;
        var points = new PointF[3];
        points[0] = new PointF(0, -angleHeight);
        points[1] = new PointF(arrowWidth, -angleHeight + arrowWidth);
        points[2] = new PointF(-arrowWidth, -angleHeight + arrowWidth);
        graphics.DrawPolygon(pen, points);
    }

天空與地面也會跟著Roll旋轉，所以也相對應的修改

    #region sky
    //畫面中心旋轉
    graphics.TranslateTransform(Width / 2f, Height / 2f);
    graphics.RotateTransform(Roll);
    //天空
    var scale = Height / 2f / 90f;
    //因為旋轉後畫面不完整，所以長增加1.7倍，寬增加1.2倍
    var skyRec = new RectangleF(-Width, -Height*1.2f+Pitch*scale,Width*1.7f,Height*1.2f);//因為高多1.2倍，所以y上移1.2倍
    using (var linearBrush = new LinearGradientBrush(skyRec, Color.White, Color.Blue, LinearGradientMode.Vertical))
    {
        graphics.FillRectangle(linearBrush, skyRec);
    }
    //地面
    var groundRec = new RectangleF(-Width, 0+ Pitch * scale, Width*1.7f, Height*1.2f);
    using (var linearBrush = new LinearGradientBrush(groundRec, Color.Brown, Color.White, LinearGradientMode.Vertical))
    {
        graphics.FillRectangle(linearBrush, groundRec);
    }
    #endregion