2

我正在做一个项目，我必须在浏览器中动态创建设计资产。在过去的几个月里，我一直在使用画布来执行此操作，但现在有人问我是否可以直接从客户端创建基于矢量的资产。

在研究了 HTML5 SVG 之后，似乎我可以做到这一点，并且在玩弄了 raphael.js 和 svg.js 之后，我决定我更喜欢 svg.js。更轻量级，< IE9 支持对我来说不是问题。

我对使用 SVG 的主要担心是我必须将文本渲染到我的 svg 中，并且在最终资产中具有基于文本向量和可用的文本向量。不仅如此，我还需要能够完美地测量文本的边界区域（到最近的像素）。在这我看到两个问题：

  • 仅使用标准draw.text()调用来创建<text>元素是不好的，因为这意味着我必须将字体与资产捆绑在一起，由于许可原因，这是不可能的。

  • 当涉及到高度时，调用text.bbox()获取文本元素的边界区域是不准确的。我相信它只是返回字体中最高/最低字符的高度，而不是实际使用的字符，就像getClientRect()标准 html 元素一样。

我看到了一个可以解决这些问题的解决方案，这就是我寻求建议的地方：

我相信我可以使用draw.path()从 SVG 字体中提取的路径信息手动渲染字形。这样，我的最终资产中将包含基于矢量的字形，这些字形不与任何字体相关联，并且希望bbox()在绘制路径后调用 to 比使用文本更准确。

有谁知道是否可以使用 svg.js 提取任何这些字形信息？还是我必须通过解析 xml 并从中提取路径信息来手动执行此操作？还有人知道在这种情况下字距调整可能如何工作吗？或者更好的是，您知道在不执行此手动和复杂方法的情况下解决上述问题 1 和 2 的任何其他方法吗？

4

2 回答 2

4

我之前曾三心二意地尝试过，这确实是可能的，但并不简单。要提取信息字体的 SVG 字体 XML，您需要...

document.querySelector("glyph[unicode=a]").getAttribute("d");

这将为您提供 letter 的路径a。但是，此路径与 w3c 位于不同的坐标系中：

与 SVG 中的标准图形不同，其中初始坐标系的 y 轴指向下方（请参阅初始坐标系），SVG 字体的设计网格以及字形的初始坐标系的 y 轴指向上方为了与许多流行字体格式的公认行业惯例保持一致。

这意味着您必须将坐标从一个系统转换到另一个系统（这本身不应该太难），然后将其缩放到所需的大小

然后你必须在第一个字母之后绘制下一个字母，还有horiz-adv-x字形的属性，你还必须根据文本大小进行缩放。尽管 SVG 字体考虑了字距调整，但实际上支持 SVG 文本的浏览器引擎都没有实现它，因此间距不会根据字形对而变化。

根据您的具体要求，此过程可能从简单到噩梦。如果范围扩大，您最终可以实现一个迷你文本渲染引擎。

于 2013-08-26T15:55:08.920 回答
1

看看https://stackoverflow.com/a/19057523/2183503。Opentype.js 可用于解析 OpenType 和 TrueType 字体。

使用 opentype.js，可以得到一个路径，该路径可用于使用 HTML5 画布进行绘制：

var font = opentype.parseFont(arrayBuffer);
var path = font.getPath("Hello, World!", {x:0, y:150, fontSize:72});
path.draw(ctx);

正如那个答案中所说， http: //nodebox.github.io/opentype.js/的演示网站有一个活生生的例子。

于 2016-05-30T05:18:28.227 回答