Question

我们正在使用Fabric JS将文本和图像对象添加到画布中。

但是当我们添加任何文本对象并选择它时，它会显示大于文本实际大小的选择区域。

Please refer this link to see the screen-shot.

我们正在使用以下代码添加文本对象。

var text_object = new fabric.Text('00', {
                    fontSize: 192,
                    fontFamily: 'Times New Roman',
                    padding: 0
                  });
text_object.top = parseInt((canvas.height - text_object.height) / 2);
text_object.left = parseInt((canvas.width - text_object.width) / 2);
text_object.lockUniScaling = true;
canvas.add(text_object);
canvas.renderAll();
canvas.setActiveObject(text_object);

主要问题是当我们尝试获取添加的文本对象的宽度和高度时;它给出了文本对象选择区域的宽度和高度，而不是文本的实际大小。

我们如何使文本对象的选择区域与文本的实际大小相同？

或者如何在没有选择区域的情况下获得文本的实际大小？

Answer 1

没有直接的方法可以实现你想要的东西，那就是文本矢量路径的边界框。

如果您对近似解决方案没问题，请将文本渲染到空白画布，使用getImageData检查所有像素的透明度，并计算出找到填充点的最大值和最小值x和y。它远非完美，但你不会轻易获得更好的解决方案。

我猜可能有解决方案服务器端，但我不知道。

理论上你有可能在JS中创建自己的字体渲染引擎，所以你会有完美的边界框，但是除了简单/玩具外，一个严肃的文本布局引擎需要数年甚至数年才能完成。实施，所以我想这完全超出了范围。

如果您需要有关近似方法的帮助，请告诉我并提供一个示例。

编辑提供示例：

QT += bluetooth

好的，所以这似乎很好，但要注意这些问题：

精度仅限于像素，因此虽然绘制边界框完全没问题，但对于需要更高精度的操作（例如完美对齐形状）并不好。此外，由于测量方法，如果形状的一部分太薄而根本看不到，那么它将无法测量（对您来说可能不是一个大问题，因为这样的极薄形状不会发生在字体）。
执行它可能会很慢，因为我们正在迭代所有像素以获得结果（并且JS并不特别快）。知道了这一点，你可能会尝试减少画布大小而不使用目标画布的相同画布，但我建议你不要这样做，因为它会引入与下一个点相关的新问题。
如果您使用文本进行测量超出画布，则边界框将限制在可见区域（它将粘贴到边框）。你可以考虑增加画布大小，如果这恰好得到真正的宽度和高度，但如果你不限制字体大小和文本数量，你可能会以画布这么大来减慢浏览器的速度或者可能甚至崩溃了......所以我只是接受边界框粘在边界上。您可能会认为使用measureText提供的宽度可能有所帮助，但不幸的是，您需要获得扫描整个图像所需的顶部和高度。

Fabric JS：文本对象的选择区域大于文本的实际大小

1 个答案: