基于矢量的 LED 用户控件

• 下载源代码 - 245.91 KB

引言

LEDBulb 是一个用于 Windows Forms 的 .NET 用户控件，模拟具有开启和关闭两种状态的 LED 灯。该控件的目的是提供一个外观简洁、可调整大小、具有透明背景并且可以设置为不同颜色的 LED 灯的表示。

LedBulb bulb = new LedBulb();
bulb.Size = new Size(25, 25);
bulb.Color = Color.LawnGreen;
bulb.On = true;
this.Controls.Add(bulb); 

可调整大小

我最近需要在我的一个 Windows Forms 项目中添加一个自定义用户控件，以表示常见于家用电子产品中的 LED 灯泡。 经过快速搜索，我发现的大多数现有控件都外观丑陋并使用静态图像，这意味着它们无法很好地缩放。 该控件使用 System.Drawing.Drawing2D 命名空间来绘制矢量图像，这样不仅外观简洁，而且可以缩放到任何大小而不会影响图像质量。

控件渲染从用我们的背景色绘制一个实心圆开始。 然后，我们用高光颜色在其上绘制一个径向渐变，过渡到透明。 为了绘制反射，我们绘制另一个径向渐变，从白色到透明，但位于一个较小的向上和向左移动的矩形中。 为了防止白色渐变显示在灯泡外部，我们将剪辑参数设置为原始圆的边界。

// Fill in the background circle 
g.FillEllipse(new SolidBrush(darkColor), drawRectangle);

// Draw the glow gradient
GraphicsPath path = new GraphicsPath();
path.AddEllipse(drawRectangle);
PathGradientBrush pathBrush = new PathGradientBrush(path);
pathBrush.CenterColor = lightColor;
pathBrush.SurroundColors = new Color[] { Color.FromArgb(0, lightColor) };
g.FillEllipse(pathBrush, drawRectangle);

// Set the clip boundary to the edge of the ellipse
GraphicsPath gp = new GraphicsPath();
gp.AddEllipse(drawRectangle);
g.SetClip(gp);

// Draw the white reflection gradient
GraphicsPath path1 = new GraphicsPath();
path1.AddEllipse(whiteRectangle); // a smaller rectangle set to the top left
PathGradientBrush pathBrush1 = new PathGradientBrush(path);
pathBrush1.CenterColor = Color.FromArgb(180, 255, 255, 255);
pathBrush1.SurroundColors = new Color[] { Color.FromArgb(0, 255, 255, 255) };
g.FillEllipse(pathBrush1, whiteRect);

透明背景

重要的是，此控件具有透明背景。 为此，我们需要在构造函数中添加一个命令。

SetStyle(ControlStyles.DoubleBuffer
    | ControlStyles.AllPaintingInWmPaint
    | ControlStyles.ResizeRedraw
    | ControlStyles.UserPaint
    | ControlStyles.SupportsTransparentBackColor, true
); 

可定制颜色

您可以通过设置 Color 属性来自定义 LED 显示的颜色。 设置此属性还会自动计算其他两个属性 ColorDark 和 ColorDarkDark，它们在绘制控件时用于渐变。 这些颜色是使用 ControlPaint 类计算的，该类是 System.Windows.Forms 命名空间中的 Control 辅助类。

this.DarkColor = ControlPaint.Dark(_this.Color);
this.DarkDarkColor = ControlPaint.DarkDark(_this.Color); 

闪烁

该控件具有一个闪烁方法，可以使控件开始闪烁。 您传递闪烁之间的毫秒数。 要关闭闪烁，只需再次调用闪烁函数，并将 0 作为参数传递即可。

led.Blink(2000); // Slow blink
led.Blink(500);  // Fast blink
led.Blink(0);    // Turn off blinking

关注点

此控件首先将其图像绘制到离屏位图中，然后将最终渲染发送到客户端，从而使用双缓冲。 双缓冲可以创建更平滑的控件绘制，并避免移动或调整大小时的闪烁。 实现此代码如下。

protected override void OnPaint(PaintEventArgs e){
    // Create an offscreen graphics object for double buffering
    Bitmap offScreenBmp = new Bitmap(this.ClientRectangle.Width, 
                this.ClientRectangle.Height);
    System.Drawing.Graphics g = Graphics.FromImage(offScreenBmp);
    g.SmoothingMode = SmoothingMode.HighQuality;

    // Render the control to the off-screen bitmap
    drawControl(g);

    // Draw the image to the screen
    e.Graphics.DrawImageUnscaled(offScreenBmp, 0, 0);    
}  

链接

• 双缓冲
• .NET 中调整颜色亮度和暗度