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

Question

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

我使用textarea 实现了这一点，我使用⬛ 和⬜ 来组装屏幕显示。我将字体大小设置为 1 像素，将文本区域的宽度设置为 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 这样的精灵可能对你有用。

基础技术是 SVG，因此您可能想在 Google 上搜索“LCD SVG”等

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

例子：

https://docs.sencha.com/extjs/4.2.6/#!/example/draw/RotateText.html