圆形按钮控制-揭开DrawArc的神秘面纱

• 下载圆形按钮控制源码- 19.6 KB
• 下载圆形按钮控件演示- 39.8 KB

表的内容 , 背景圆形按钮控制 建设性质 圆角按钮演示结论参考开发环境历史 符号将阅读器返回到目录的顶部。

介绍

本文介绍了圆形按钮控件。它是在已知调色板工具的修订期间开发的。本文不仅描述了圆形按钮控件的工作原理，还讨论了。net图形。DrawArc的方法，主题编程论坛上的一些问题。

本文中展示的所有图形最初都显示为缩略图。这允许读者点击一个图像来打开它在读者的默认图形显示程序。本文中的所有图像都是PNG图像。

在下面的讨论中，由开发人员指定的属性将以粗体混合大小写文本显示;软件内部使用的变量以斜体小写文本显示。

背景

在。net中，椭圆是绘制椭圆、圆和弧线的基础。然而，微软对图形表面做了一些修改。在图形的左边，(0,0)是图形表面的左上角(例如，窗口窗体或控件原点)。

在正常的世界中(即， x坐标的值向右递增;y坐标的值向上递增。在。net中，x坐标的值向右递增;但是y坐标的值是递减的。

另外，在正常情况下，角度是从x轴逆时针方向测量的，通常用弧度表示。在. net中，角度是从x轴开始顺时针测量的，并根据调用的方法以弧度或角度表示。

,

回想一下解析几何中的椭圆。其定义为:

形成闭合回路的曲线，其中两点(焦点)到该线上每一点的距离之和是恒定的。

圆是椭圆的一种特殊情况，其中长轴和短轴相等。当这个成立时，两个焦点并置在中心，我们称坐标轴为圆的直径。

,

在. net中，椭圆是根据图形的左上角及其宽度和高度定义的。

左边的图形描述了。网络视图。要绘制椭圆，需要调用图形。DrawEllipse 方法:

,

隐藏,复制代码

public void DrawEllipse ( Pen pen,
                          int x,
                          int y,
                          int width,
                          int height )

椭圆图形的颜色和厚度是由DrawEllipse调用中提供的钢笔的颜色和宽度属性设置的。如果想画一个圆，而不是椭圆，宽度和高度设置相等。

绘制圆弧与绘制椭圆几乎完全相同，只是增加了两个参数:起始角度和扫描角度。

在左边的图形中，已经绘制了一个圆弧，从角度180度开始，通过顺时针旋转角度90度延伸。为此，我们调用图形。DrawArc 方法:

,

隐藏,复制代码

public void DrawArc ( Pen pen,
                      int x,
                      int y,
                      int diameter,   // width
                      int diameter,   // height
                      int start_angle,
                      int sweep_angle )

因为我们想要一个圆弧，宽度和高度被设置为相等(圆的直径)。

注意DrawArc和DrawEllipse之间的相似性。如果start_angle和sweep_angle从DrawArc方法的参数中删除，那么就只剩下DrawEllipse方法的参数了。因此，DrawArc可以被视为绘制与DrawEllipse绘制的图形相同的图形，但只有从start_angle开始并为sweep_angle扩展的那部分线可见。

RoundedButton控制

建设

考虑左边的数字。为便于说明，圆形按钮控件的轮廓以黑色绘制;四个弧用红色画;四条绿色的线是调用图形的结果。CloseAllFigures 方法;橙色的线是每条弧线的高度;蓝色的线是每个弧的宽度;黑点是每个弧的起点。请注意，橙色和蓝色的线是相等的长度，形成圆的直径，在这些圆上画弧。

要绘制由红线和绿线组成的图形，我们使用GraphicsPath 。GraphicsPath由rounded_rectangle_path方法创建。

,

隐藏,缩小,复制代码

// ************************************ rounded_rectangle_path

/// <summary>
/// computes the GraphicsPath of a rounded rectangle
/// </summary>
/// <paramname="x">
/// x coordinate of the upper left corner of the rectangle
/// </param>
/// <paramname="y">
/// y coordinate of the upper left corner of the rectangle
/// </param>
/// <paramname="width">
/// width of the rectangle
/// </param>
/// <paramname="height">
/// height of the rectangle
/// </param>
/// <paramname="radius">
/// radius of the circle that defines the rounded corner
/// </param>
/// <returns>
/// the GraphicsPath that defines the rounded rectangle
/// </returns>
GraphicsPath rounded_rectangle_path ( int x,
                                      int y,
                                      int width,
                                      int height )
    {
    int           local_diameter = 0;
    GraphicsPath  path = new GraphicsPath ( );
                                // take into account right and
                                // bottom sides
    x += 1;
    y += 1;
    width -= 1;
    height -= 1;

    if ( Diameter == 0 )
        {
        local_diameter = Math.Min ( width, height );
        local_diameter =
            round ( ( float ) local_diameter / 2.0F );
        }
    else
        {
        local_diameter = Diameter;
        }

    path.StartFigure ( );
                                // bottom right
    path.AddArc ( ( x + width - local_diameter ),
                  ( y + height - local_diameter ),
                  local_diameter,
                  local_diameter,
                  0.0F,
                  90.0F );
                                // bottom left
    path.AddArc ( x,
                  ( y + height - local_diameter ),
                  local_diameter,
                  local_diameter,
                  90.0F,
                  90.0F );
                                // top left
    path.AddArc ( x,
                  y,
                  local_diameter,
                  local_diameter,
                  180.0F,
                  90.0F );
                                // top right
    path.AddArc ( ( x + width - local_diameter ),
                  y,
                  local_diameter,
                  local_diameter,
                  270.0F,
                  90.0F );
                                // join all arcs together
    path.CloseAllFigures ( );

    return ( path );
    }

local_diameter的值来自于Diameter属性。在此控制的发展过程中，尝试了不同的直径值。“最好”的例子是基于以下公式得出的:

隐藏,复制代码

Min ( width, height ) / 2.0F )

如果Diameter属性提供的值为零，则控件将根据此公式计算local_diameter的值。

返回一个GraphicsPath。在MSDN文档中，可以使用GraphicsPath

绘制形状的轮廓，填充形状的内部，并创建剪切区域。

由rounded_rectangle_path返回的GraphicsPath将用于创建一个剪切区域，该区域将所有绘图限制为所需的控件区域，并用于绘制RoundedButton控件的轮廓。rounded_rectangle_path由draw_border_graphic调用

隐藏,缩小,复制代码

// *************************************** draw_border_graphic

/// <summary>
/// creates the border_graphic GraphicsBuffer by performing the
/// following actions:
//////     1.  create a GraphicsPath
///     2.  establish the clipping region that limits graphics
///         operations to within the GraphicsPath
///     3.  draws the outline of the GraphicsPath to the
///         border_graphic GraphicsBuffer
///     4.  deletes the GraphicsPath
///     5.  optionally draws the outlines of the circles that
///         were used to create the rounded corners to the
///         border_graphic GraphicsBuffer
/// </summary>
void draw_border_graphic ( )
    {
    GraphicsPath    path = null;
                                // ORDER IS IMPORTANT!!!

                                // compute the path
    path = rounded_rectangle_path ( 0,
                                    0,
                                    this.Width,
                                    this.Height );
                                // set clipping region
    this.Region = new Region ( path );
                                // draw the border
    border_graphic.Graphic.DrawPath (
        new Pen ( BorderColor,
                  BorderThickness ),
        path );
    path.Dispose ( );
                                // draw circles
    if ( DrawRoundingCircles )
        {
        draw_rounding_circles ( border_graphic.Graphic,
                                0,
                                0,
                                this.Width,
                                this.Height );
        }
    }

GraphicsBuffer是一个提供无闪烁绘制表面的类。draw_rounding_circles方法非常类似于rounded_rectangle_path方法，只是图形方法不同。DrawEllipse替换GraphicsPath。AddArc 。

属性

下面是RoundedButton控件特有的属性。这里不讨论RoundedButton继承的Button 类的属性。

默认用途bordercolor颜色的颜色。白色设置/获取按钮边框的颜色设置/获取按钮边框的厚度设置/获取圆角的直径。如果提供的直径值为零，该控件将计算圆角直径的值为Min(宽度，高度)/ 2.0F。drawroundingcircles bool false指定是否要绘制圆角圆

圆形按钮演示

下载包含了圆角按钮对话框演示应用程序，它允许用户决定在各种情况下圆角按钮控件是什么样子的。

按钮组框允许用户修改圆形按钮的大小和颜色。数字上下控制的宽度和高度都被限制在[22,272]范围内。它们都会影响RoundedButton的宽度和高度属性。BackColor和ForeColor按钮允许用户设置相关的RoundedButton属性。请注意，在圆型按钮的表面上绘制任何文本时都要使用前饰线。“使用对比前景色”复选框决定了RoundedButton文本是使用用户指定的前景色来显示，还是根据RoundedButton的背景色使用对比黑或白来显示。

Border组框允许用户设置圆形按钮的边框属性。直径数值上下控制指定圆角圆的直径。直径的下限值为零;上限是Min(宽度，高度)/ 2。随着高度和宽度的改变，直径的上限也会改变。厚度NumericUpDown控件指定边框的宽度。它的范围被限制在[0,100]。颜色按钮设置边框的颜色。绘制圆周率复选框仅用于演示目的。在生产环境中应该不检查它。

,

读者对如何确定对比色感兴趣，下面的代码被使用。

隐藏,缩小,复制代码

// ***************************************** contrasting_color

/// <summary>
/// determines the color (black or white) that contrasts with
/// the given color
/// </summary>
/// <paramname="color">
/// color for which to find its contrasting color
/// </param>
/// <returns>
/// the contrasting color (black or white)
/// </returns>
/// <reference>
/// http://stackoverflow.com/questions/1855884/
///     determine-font-color-based-on-background-color
/// </reference>
Color contrasting_color ( Color color )
    {
    double  a;
    int     d = 0;

    a = 1.0 - ( ( 0.299 * color.R +
                  0.587 * color.G +
                  0.114 * color.B ) / 255.0 );

    if ( a < 0.5 )
        {
        d = 0;                  // bright colors - black font
        }
    else
        {
        d = 255;                // dark colors - white font
        }

    return ( Color.FromArgb ( d, d, d ) );
    }

结论

本文介绍了圆形按钮控件，并详细描述了。net DrawArc方法的工作原理。

引用

• 按钮
• 椭圆
• 图形。CloseAllFigures
• 图形。DrawArc
• 图形。DrawEllipse
• GraphicsPath
• GraphicsPath。AddArc
• 笔

开发环境

圆形按钮控件是在以下环境中开发的:

微软Windows 7专业服务包Microsoft Visual Studio 2008专业版Microsoft .Net Framework版本3.5 SP12008年微软Visual c#

历史

• 2015年7月18日-原创文章。

本文转载于：http://www.diyabc.com/frontweb/news14733.html