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

Question

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

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

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

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

显而易见，最后一些像素被撞到了下一行，显示器也被破坏了。

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

我们还尝试将letter-spacing设置为-1px。由于字符大小为1px，我们预计不会显示，如在Mac上查看此屏幕截图所示：

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

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

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

Answer 1

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

底层技术是SVG所以你可能想要google＆＃34; LCD SVG＆＃34;等

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

示例：

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