如何提取文本轮廓并将其导出到SVG? [英] How can I extract the outline of text and export it to SVG?

问题描述

是否有使用as3代码获取TextField文本的轮廓(矢量对象)的方法?还是将TextField字符的路径绘制为图形?

Is there anyway to get the outline (Vector Object) of the text of a TextField using as3 code? Or to draw the paths of the TextField characters as a graphic?

我想将它们存储在SVG文件中.

I want to store them in an SVG file.

推荐答案

似乎没有一种简单的内置方法可以做到这一点. 但是，正如名言所说:"我们选择在Flash中提取字体轮廓并执行其他操作，不是因为它们很容易... "，您知道，只是为了解决这个问题从某种角度看，这将是多么痛苦，但这将会成为现实.

It doesn't look like there is an easy built-in way to do this. But as the famous saying goes: "we choose to extract a font outline in flash and do the other things, not because they're easy...", you know, just to put this into a bit of perspective of how big a pain in the but this is going to be.

以下是4种可能的解决方案:

Below are 4 possible solutions:

在提取图形数据时，Flash长期以来根本无法做到这一点. Flash Player 11.6/AIR 3.6引入了

When it comes to extracting graphics data, Flash was long time unable to do this at all. Flash Player 11.6 / AIR 3.6 introduced readGraphicsData(), which

查询Sprite或Shape对象(及其子对象)以获取其矢量图形内容.

Queries a Sprite or Shape object (and optionally, its children) for its vector graphics content.

由于TextFields可以是Sprite对象的子代，因此可以工作，除了:

As TextFields can be children of Sprite objects, this could work, except that:

以下视觉元素和变换无法表示，也不包含在结果中:

The following visual elements and transformations can't be represented and are not included in the result:

文本，但有一个例外:使用抗锯齿类型用于动画的抗锯齿"定义的静态文本；呈现为矢量形状，因此将其包含在结果中.

Text, with one exception: Static text that is defined with anti-alias type "anti-alias for animation" is rendered as vector shapes so it is included in the result.

好的，您不能对动态文本执行此操作.但是静态文本有效.因此，您可以做的是用静态文本块重新创建TestField的功能.为每个字母创建静态文本，并将其添加到Sprite中，具体取决于用户键入的内容.如果只有几个字符，这可能是最简单的解决方案.问题是您必须重新创建修改文本的所有可能性，而Textfield可以轻松提供该文本.如果要缩放文本，则必须缩放静态文本块等.并且根本无法更改字体.从根本上讲，这是一种非常粗陋和肮脏的字体嵌入方式.

Ok, you cannot do this with dynamic text. But static text works. So what you could do is recreate the functionality of a TestField with static text blocks. Create static text for every letter and add them to a Sprite, depending on what the user types. If you only have a few characters, this is probably the easiest solution. The problem is that you have to recreate everything possibility of modifying the text, which a Textfield easily provides. If you want to scale the text, you have to scale the static text blocks, etc. And you cannot change the font at all. This is basically a very crude and dirty way of doing font embedding.

结果是您收到Vector.<IGraphicsData>，您应该可以将其转换为svg.这也不是一件容易的事，但至少

You receive a Vector.<IGraphicsData> as a result, which you should be able to convert to svg. this is not a trivial task either, but at least

返回的路径都在同一坐标空间中.结果数据集中的坐标是相对于阶段的

the returned paths are all in the same coordinate space. Coordinates in the result data set are relative to the stage

至少您有一个坐标空间，可以或多或少轻松"地将它们转换为svg.

At least you have one coordinate space and can convert them to svg more or less "easily".

轮廓是字体定义的一部分.因此，您也可以从字体文件中提取它.

The outline is a part of the definition of a font. So you could also extract it from a font file. Part of the the OpenType font file specification is the Glyf Data, which defines the geometric shapes and points of the glyphs of the font. Again, this is disconected from the TextField, but provides you with the shape of all letters of the font that you embedded. It is a bit of work necessary to parse a file according to a specification like that. The advantage is that you can use all the glyphs of a font. The disadvantage is that you can only use fonts of the given format (OpenFont) and it will only return the outline of the glyphs, without transforming them the way the letters appear in the TextField. It is also unclear how this would work with built in fonts.

如果您嵌入字体，则它会在某个地方的swf中.甚至还有工具可让您再次提取它.这是可能的，因为文件的rel ="nofollow noreferrer">规范已打开.您现在所要做的就是让swf文件读取自身并访问嵌入到其中的字体数据.看一下第10章:字体和文本"，其中包括字体标签"，它告诉您各个字形的形状是如何存储的.这与您在上面的OpenFont Glyf数据规范中找到的相当.同样，您知道了形状，但是仍然必须根据TextField放置各个形状的位置.

If you embed the font, it is in the swf somehow somewhere. There are even tools that allow you to extract it again. This is possible because the specification for swf files is open. What you can do now is to let the swf file read itself and access the font data that got embedded into it. Take a look at "Chapter 10: Fonts and Text", which includes "Font tags", which is tells you how the shapes of individual glyphs are stored. This is comparable to what you find in the specification of the OpenFont Glyf Data above. Again, you know the shape with this, but you still have to position the individual shapes according to how a TextField would position them.

如果您要在svg文件中文本，只需在svg文件中输入文本即可:

If you want text in an svg file, simply do text in an svg file:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150" 
        font-family="Verdana" 
        font-size="55">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke-width="2" />
</svg>

如果您可以简单地在svg中执行文本操作，则将Flash TextField转换为svg没有任何意义.吻

There's no point in trying to convert Flash TextField into svg if you can simply do text in svg. KISS

这篇关于如何提取文本轮廓并将其导出到SVG?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！