文本对象到路径:如何从使用Cambam字体的Raphael js中使用打印方法时生成的双路径中删除单个路径

Text object to Path: how to remove a single path from a double path produced when you use print method in Raphael js using cambam fonts?

本文关键字：路径 方法 打印 删除 单个 js 字体 对象 文本 Cambam Raphael      更新时间：2023-09-26

当我在Raphael js上使用打印方法将文本转换为路径时，它会生成每个字符的双路径(轮廓(。我在网上搜索并注意到有一些字体，例如：camBam 字体似乎是真正的类型字体，但它们实际上是在欺骗字体创建者将它们视为字符的轮廓，而他们将 2 行相同的行放在彼此之上。 我想知道是否有任何方法可以以编程方式(使用 js(将这些行(路径(彼此分开并删除其中一行？

下面是一个 svg 文件的 svg 代码，该文件包含彼此重叠的路径，并且对于字母 s 是相同的(例如(：

更新：

抱歉，在这里我更新了正确的svg代码：

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 600,600"><desc>Created with Snap</desc><defs></defs><path d="M79.5111111111111,59.87405972222222C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222C79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222" fill="#ff0000" stroke="#0000ff"></path><rect x="0" y="30" width="330" height="51" fill="none" stroke="#000000"></rect></svg>

更新2：这是从两种字体生成的路径

如果你在 inkscape 或 illustrator 中手动操作它，你可以看到字母 s 有 2 行彼此重叠，组成了该字母：

如何使用 js 删除 2 行(路径(之一？如果我有一个完整的文本已转换为类似于 s 字符的路径，我如何将该删除功能应用于所有文本以使其成为单路径文本？

更新3：

我有以下代码试图将 s 路径分成两半：

var sTotalpx = textpaths.getTotalLength();
var sSinglepath = Snap.path.getSubpath(textpaths, (sTotalpx/2), sTotalpx);
console.log(sSinglepath.toString());

路径结果显示一半的s和双倍的行(路径(，而不是整个s与单行(路径(。请问有什么解决方法吗？！

更新 4：

我在某处读到，当您使用 svg 编辑器时："使用重叠路径时，请使用"组合"或"联合"选项将形状融合在一起并删除重叠。

请问如何使用 js 以编程方式做到这一点？

这个定义似乎有一个问题(我添加了换行符以更好地看到(：

M
79.5111111111111,59.87405972222222
C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111
C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222
C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778
C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444
C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778
C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222
C79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222,
79.5111111111111,59.87405972222222

最后一个以 C 开头的定义是错误的。这可能是您的问题来源。你可以试试没有这最后一部分...？

这是 SVG 路径的 W3C 文档，对于通读它很有用;-(

让我知道这是否适合您

我知道

这是一个过时的问题，但看起来这相当罕见......我在寻找具有非常相似问题的解决方案时发现了这个线程。我需要单行字体，也使用了CamBam字体。我使用"text-to-svg"来获取SVG路径(可能与Raphael.js相同的结果(。

经过一些测试和阅读，我发现这些字体是"循环"的，以创建[看起来像]可填充(封闭(的路径，与严格的系统更兼容。这是通过以相反的顺序绘制路径来完成的。

对于简单的开放字符，这个问题并不难 - 简单地说，在 svg 路径序列中间找到"中心对称点"并删除其余部分就足够了。 但这也不是小问题。

在本例中，它是 middle(4-th( C[urve] 命令 (78.48888888888888,45.94628194444444( 的最后一点。从这一点上，您可以看到控制点位置的镜像对称...但不包括"反转点"旁边的第一个 C 命令的第一个点。中间也可以有 L[ine] 命令。

要摆脱错误填充 svg 路径必须具有属性 fill="none"。

如前所述 eariler - 使用简单的字符很容易 - 在许多情况下，循环结果可能会有所不同！可以有一个、两个或多个闭环，然后是确切的(或几乎？相同的循环，但保留[原始绘图]序列("1a，1b，1a，1b"或"1a，1b，1c，1a，1b，1c"(，而不是1x 1副本("1a，1a，1b，1b"(...并且可能(没有检查这个(在它们之间混合了"对称循环"路径(要划分(！

附言。这是理论...我还没有现成的、完整的解决方案。我会在不久的将来这样做。

要将两个路径分组，您需要将它们放在父<g>标签下。

相关文章：