Question

我的浏览器内的LED Display对象中有LED个对象存储在其map属性中。每个LED都有x和y属性，以便知道它在画布上的位置，而map是LED的二维数组（可以具有不同的大小），将它们映射到Display矩阵上。显示对象还具有定义LED区域和它们之间空间的属性。

显示器应该能够显示预制字体中的字符，例如数字和字母。

我无法理解的是：展示角色的最佳方式是什么？例如，下面是字母'S'的外观示例（.是LED显示屏关闭，O是LED显示屏开启：

..OO..
.OOOO.
OO..OO
OO....
.OO...
..OO..
...OO.
OO.OO.
.OOO..
..OO..

我应该如何映射要打开的LED？

我当前的解决方案是：创建一个Character对象，该对象具有属性x和y（确定它在显示矩阵上的位置）和width以及{{ 1}}（确定它在LED中的区域）。然后，应该打开的LED被映射到2D阵列中。当我们需要展示角色时，我们会获得height的{{1}}和Character，找到“来源”LED，然后按照映射切换x。

有更好的方法吗？或许使用路径？

Answer 1

我从你的描述中并不完全确定你是如何做到的，但这就是我根据我认为你所追求的方式做到的。

第一步，让所有角色在数组中解决，定义哪些点需要打开或关闭。如果这将是一个很大的集合，你可以尝试一些技术来压缩数据。

根据画布上LED的大小，我要么创建一个函数来计算哪些LED需要更改，只擦拭显示哪里有需要更改的LED。预渲染LED（打开和关闭状态）一次，就像openGL中的显示列表一样（参见下面的链接）。

否则如果屏幕上的字符本身很小并且有很多字符，我会预渲染每个字符并像字体一样使用。这需要更多的屏幕清除，但如果有数百个LED，计算和显示清除的开销可能会很高。

此页面提供了有关高效画布渲染的一些有用信息： http://www.html5rocks.com/en/tutorials/canvas/performance/

我认为LED是在程序中呈现的，而不仅仅是图像？如果它们只是图像，那么你已经有效地预先渲染了LED。

Answer 2

根据我的理解，您正在尝试使用“像素化”LED显示屏。所以基本上，将你的角色存储为像素数组似乎是定义它们的最佳方式......我真的不明白你的问题是什么。

如果您的问题是关于获取像素贴图，您可以做的一件事就是获得像字体一样的像素，在屏幕外的画布上绘制一个字符，获取像素数据，然后使用它们来创建角色的像素图。然后你可以做一个循环来映射所有的角色，而不必自己创建每个地图......

使用<canvas>制作浏览器内LED显示屏：如何创建字符？</canvas>

2 个答案: