html - 如何使用 ExtJS 在 Android 中渲染类似 LCD 的显示器？

Question

我正在使用 ExtJS 4.2 构建 Web 应用程序。 Web 应用程序中有一个部分，我在类似 LCD 的屏幕上显示某些信息。

我使用 textarea 实现了这一点，我在其中使用 ⬛ 和 ⬜ 来组装屏幕显示。我将字体大小设置为 1px，将文本区域的宽度设置为 240 像素。但事实证明，最后的 10-20 个像素会被移到下一行。当我在 Windows 和 Android 平板电脑上查看该页面时，这一点很明显。

这是在 Mac 上查看的示例输出，其中 240 像素连续显示:

这是在 Android 平板电脑上查看的相同示例输出:

很明显，最后几个像素撞到了下一行，显示被破坏了。

很明显，即使我们将文本区域的宽度设置为 240 像素，它也不适合 240 个 1 像素的字符。

我们还尝试将 letter-spacing 设置为 -1px。由于字符大小为 1 像素，我们预计没有显示，如在 Mac 上查看时的屏幕截图所示:

但是，当从 Android 平板电脑上查看时，我们会看到切片显示:

这意味着 1px 的字体宽度实际上比实际宽度要大。

有谁知道如何使用 JavaScript/HTML5 制作像素完美的类 LCD 显示器？

Answer 1

您可以使用 Ext.draw.* 包特别是像 rect 和 path 这样的 sprite 可能适合你。

底层技术是 SVG，所以你可能想用谷歌搜索“LCD SVG”等

指南: https://docs.sencha.com/extjs/4.2.6/#!/guide/drawing

例子:

https://docs.sencha.com/extjs/4.2.6/#!/example/draw/Rotate文本.html