使用HTML5 Canvas的十六段显示器

引言

我喜欢七段数码管的外观。它们在现实世界的电子设备中随处可见，并且当集成到您的用户界面中时，可以为您的应用程序增添很多特色。

那么，什么比七段数码管更好呢？十六段数码管怎么样？十六段数码管看起来很棒，并且可以表示各种字符，包括字母和标点符号。此控件是一个基于 HTML5 Canvas 的十六段数码管，并且是完全可定制和可扩展的。

您可以在 GitHub 仓库 中找到源代码。还可以查看 演示页面 以获取实时示例。

Using the Code

第一步是下载代码并将脚本包含到您的网页中。要向您的页面添加十六段数码管，请创建一个新的 SixteenSegment 对象，并将 Canvas 和显示元素的数量作为参数传递给构造函数。canvas 参数是唯一必需的参数。您还可以传递其他参数来定制显示，但它们都有默认值。

<canvas id='c' width='600' height='250'>Not supported</canvas>
<script src="segment.min.js"></script>

<script>
    var canvas = document.getElementById('c');
    var segment16 = new SixteenSegment(canvas, 6);
    segment16.DisplayText('Hello World');
 
    // This works too
    var segment16 = new SixteenSegment();
    segment16.Canvas = canvas;
    segment16.SetCount(6);
    segment16.DisplayText('Hello World');
</script>

显示尺寸

默认情况下，显示将设置其宽度和高度等于 canvas。这很方便，因为显示会自动填充画布区域，您可以在 HTML 和 CSS 中控制该元素的大小。如果您想显式设置显示的大小，可以手动设置这些属性。

// Draws a sixteen segment display 200px wide and 100px tall
var segment16 = new SixteenSegment(canvas, 4, 200, 100);

// This works too
var segment16 = new SixteenSegment(canvas, 4);
segment16.Width = 200;
segment16.Height = 100;

// Display is 200px wide and fills the canvas height
var segment16 = new SixteenSegment(canvas, 4, 200);

// Display is 200px tall and fills the canvas width
var segment16 = new SixteenSegment(canvas, 4, null, 200);

此外，您可以通过添加 x 和 y 坐标来设置显示在 canvas 上的位置。这些坐标相对于 canvas 的右上角，默认为 (0,0)。

// Draws a sixteen segment display starting at position (100, 50);
var segment16 = new SixteenSegment(canvas, 4, 200, 100, 100, 50);
 
// This works too
var segment16 = new SixteenSegment(canvas, 4, 200, 100);
segment16.X = 100;
segment16.Y = 50; 

使用这些设置，多个显示可以共享同一个 canvas。

canvas.width = 410;
canvas.height = 100;
var segmentA = new SixteenSegment(canvas, 4, 200, 100, 0, 0);
var segmentB = new SixteenSegment(canvas, 4, 200, 100, 210, 0);
segmentA.DisplayText('Hello');
segmentB.DisplayText('World');

自定义显示

显示默认为标准的十六段数码管外观，我认为看起来相当不错。

如果这满足您的需求，那么您就设置好了。但是，如果您想要一个外观稍有不同的显示，您可以通过几个属性来自定义外观。演示页面可让您尝试不同的设置，看看它们如何影响显示的渲染。可以通过 下载源代码 来进行尝试，或者查看 实时示例。

var segment = new SixteenSegment(canvas, 6);
segment.SegmentWidth = 0.16;          // Width of segments (% of Element Width)
segment.SegmentInterval = 0.05;       // Spacing between segments (% of Element Width)
segment.BevelWidth = .06;             // Size of corner bevel (% of Element Width)
segment.SideBevelEnabled = false;     // Determines if the sides should be beveled
segment.FillLight = '#86fd06'         // Color of an on segment
segment.FillDark = '#004400'          // Color of an off segment
segment.StrokeLight = '#007700'       // Color of an on segment outline
segment.StrokeDark = '#440044'        // Color of an off segment outline
segment.LineWidth = 0;                // Width of segment outline
segment.Padding = 10;                 // Padding around the display
segment.Spacing = 5;                  // Spacing between elements
segment.X = 0;                        // Starting position on the canvas
segment.Y = 0;
segment.Width = 200;                  // Size of the display
segment.Height = 100; 

这为您提供了非常广泛的可能样式。

自定义显示模式

字符通过 CharacterMasks 属性映射到显示模式。此属性是一个查找对象，其中包含按字符索引的显示模式。显示模式描述了应该打开哪些段。此信息以 16 位数字编码，作为位掩码，每个段都有一个位。1 表示该段应打开，0 表示该段应关闭。

CharacterMasks 对象包含所有字母数字字符的显示模式。您可以通过添加新值到查找来实现添加其他字符或创建自己的自定义显示模式。位掩码的值应为 16 位数字，其中应打开的每个段都设置为 1。

要显示字符 'A'，您需要打开 8 个段。

A: 1111001111000000
 
// Bitmask can be represented in several ways
var charMasks = SixteenSegment.prototype.CharacterMasks;
charMasks['A'] = a1 | a2 | b | c | g1 | g2 | e | f |;       // Segment masks
charMasks['A'] = parseInt('1111001111000000', 2);        // Binary
charMasks['A'] = 0x3CF;                        // Hex
charMasks['A'] = 975;                        // Decimal 

设置显示模式的首选方法是使用段位掩码。每个段的变量保存打开其段的位。当多个段掩码进行二进制“或”运算时，您将获得代表所需模式的值。这使得读取和创建新模式非常直观。

// Bitmasks for individual segments
var a1 = 1 << 0,    a2 = 1 << 1,    b = 1 << 2,    c = 1 << 3,
    d1 = 1 << 4,    d2 = 1 << 5,    e = 1 << 6,    f = 1 << 7,
    g1 = 1 << 8,    g2 = 1 << 9,    h = 1 << 10,   i = 1 << 11,    
    j  = 1 << 12,   k  = 1 << 13,   l = 1 << 14,   m = 1 << 15;
 
// Turn on the g1 and g2 segments
charMasks['-'] = g1 | g2;      // 0000001100000000

扩展显示

十六段数码管由三个函数对象组成。SixteenSegment、SegmentCanvas 和 SegmentArray。

SegmentArray 负责设置显示模式并存储多个元素的值。它独立于控件的渲染或向画布绘制任何内容。此对象仅管理给定文本输入的每个元素的位模式设置。

SegementCanvas 提供将显示绘制到画布的通用功能。这包括自定义显示形状和位置的属性。它要求继承对象实现定义形状和段数的细节。

SixteenSegment 使用特定于十六段数码管的功能扩展了 SegmentCanvas 对象。这意味着它必须设置两个属性。Points 属性定义了十六段布局的段几何形状。CharacterMasks 属性提供了一个查找表，将字符映射到它们所需的十六段模式。

这意味着可以通过扩展 SegmentCanvas 对象并实现 Points[][] 数组和 CharacterMasks 查找表以相同的方式创建新的显示类型。例如，添加一个七段数码管非常容易。SevenSegment 对象仅包含定义其“七段”特性的代码。所有其他代码都得到了重用。

var seven = new SevenSegment(canvas, 6);
seven.DisplayText('Hello World');

关注点

要了解更多关于段点如何计算的信息，我强烈建议阅读下方链接中的 刘霞的文章。他对如何计算每个段的位置进行了视觉化解释，并且我基本上使用了相同的方法来实现十六段数码管。我还推荐查看 Dmitry Brant 的杰出作品以及他的 .NET 七段 LED 控件。

待办事项

• 添加字符位掩码 - SixteenSegment 目前支持数字、大写字母以及一些标点符号。如本文所述，添加额外的字符位掩码非常简单。只需花费时间将它们全部映射出来即可。十六段数码管的一个优点是它可以非常准确地表示广泛的字符，小写字母就是一个很好的例子。我已经将其设置为一个开源项目，所以如果您有兴趣参与其中，应该 前往 GitHub 并发送一个包含您添加内容的拉取请求给我。
• 添加小数点
• 添加冒号并支持显示时间
• 除了 DisplayText 方法，还可以添加 DisplayInt、DisplayFloat 和 DisplayTime 函数来自动格式化这些数据类型。
• 添加倾斜 - 分段显示通常会显示得有些倾斜。我想添加一个设置来控制应用于元素的倾斜量。

链接

• 十六段数码管 - 维基百科
• .NET 七段 LED 控件 - Dmitry Brant
• 外观精美的分段 LED 控件 - 刘霞
• HTML5 Canvas 教程