带 HTML5 Canvas的十六段显示

分享于 

10分钟阅读

Web开发

  繁體

介绍

我喜欢七段显示器的外观。 他们在真实世界电子的地方发现,并且合并到你的UI中,他们可以添加大量的角色。

那么什么比七段显示更好? 十六段显示如何? of段显示非常好,可以表示包含字母和标点符号范围广泛的字符。 这里控件是基于 HTML5 Canvas的十六段显示,完全可以定制且可以扩展。

你可以在中找到源代码。 也要查看演示页面,以获得一个实时示例。

使用代码

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

<canvasid='c'width='600'height='250'>Not supported</canvas><scriptsrc="segment.min.js"></script><script>var canvas = document.getElementById('c');
 var segment16 = new SixteenSegment(canvas, 6);
 segment16.DisplayText('Hello World');
 // This works toovar 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 tallvar segment16 = new SixteenSegment(canvas, 4, 200, 100);// This works toovar segment16 = new SixteenSegment(canvas, 4);
segment16.Width = 200;
segment16.Height = 100;// Display is 200px wide and fills the canvas heightvar segment16 = new SixteenSegment(canvas, 4, 200);// Display is 200px tall and fills the canvas widthvar segment16 = new SixteenSegment(canvas, 4, null, 200);

此外,还可以通过添加 xy 坐标在 Canvas 上设置显示的位置。 这些坐标是 Canvas 右上角的relative,默认为 (0,0)

// Draws a sixteen segment display starting at position (100, 50);var segment16 = new SixteenSegment(canvas, 4, 200, 100, 100, 50);// This works toovar 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 beveledsegment.FillLight = '#86fd06'// Color of an on segmentsegment.FillDark = '#004400'// Color of an off segmentsegment.StrokeLight = '#007700'// Color of an on segment outlinesegment.StrokeDark = '#440044'// Color of an off segment outlinesegment.LineWidth = 0; // Width of segment outlinesegment.Padding = 10; // Padding around the displaysegment.Spacing = 5; // Spacing between elementssegment.X = 0; // Starting position on the canvassegment.Y = 0;
segment.Width = 200; // Size of the displaysegment.Height = 100; 

这为你提供了非常广泛的风格。




自定义显示模式

通过 CharacterMasks 属性将字符映射到显示模式。 这里属性是一个包含按字符索引的显示模式的查找对象。 显示 Pattern 描述应打开哪些段。 这里信息被编码为 16位数字作为位掩码,每个段有一个位。 一个 1 指示应该打开该段,并且 0 指示应关闭该段。

CharacterMasks 对象包含所有字母数字字符的显示模式。 你可以添加额外的字符或者创建自己的自定义显示模式,方法是向。 位掩码的值应为 16位编号,每个应该打开的每个段都有一个位设置为 1.

要显示字符'A',你需要打开 8个段。

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

设置显示 Pattern的首选方法是使用段位图。 每个段的一个变量保持它的段的位。 当多个段掩码是二进制或者 ed masks得到一个表示所需的Pattern的值。 这使得阅读和创建新模式非常直观。

// Bitmasks for individual segmentsvar 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 segmentscharMasks['-'] = g1 | g2; // 0000001100000000

扩展显示

十六段显示由三个函数对象组成。 SixteenSegmentSegmentCanvasSegmentArray

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

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

SixteenSegment 扩展了 SegmentCanvas 对象,具有特定于十六段显示的功能。 这意味着它必须设置两个属性。 Points 属性用于定义十六段布局的段 geometery。 CharacterMasks 属性提供一个查找,该查找将字符映射到所需的十六个段 Pattern。

这意味着可以通过扩展 SegmentCanvas 对象并实现 Points[][] array 和 CharacterMasks 查找,以同样的方式创建新的显示类型。 例如添加七段显示非常容易。 SevenSegment 对象只包含定义它的'七 ness'的特定代码。 所有其他代码都被重用。

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

Points of interest

为了了解如何计算线段的计算,我强烈推荐在下面的链接中阅读 的文章。 他在视觉上解释了如何计算每个段的位置,我基本上使用了相同的方法。 我还建议查看 Dmitry Brant的优秀工作和他的七段LED控制。

要做

  • 添加字符位写- SixteenSegment 目前支持数字和captial字母以及几个puctuation字符。 就像本文所描述的,添加额外字符位图非常容易。 这只是花时间把它们全部映射出来的问题。 ,段显示的优点之一是它可以非常精确地表示字符,小写字母是一个很好的例子。 这个软件是开源项目,如果有人有兴趣处理这个问题,你应该去 GitHub,并向我发送一个带有附加信息的请求。
  • 添加小数段
  • 添加冒号并支持显示时间
  • 除了 DisplayText 方法,还将 DisplayIntDisplayFloatDisplayTime 函数添加到自动格式化这些数据类型
  • 添加剪切- 分段显示通常显示为倾斜。 我想添加一个设置来控制应用于元素的剪切量。

链接


Html5  disp  CAN  Canvas  Html5 Canvas  Segment  
相关文章