How can I extract the outline of text and export it to SVG?

问题

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?

I want to store them in an SVG file.

回答1:

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.

Below are 4 possible solutions:

The as-built-in-as-it's-goining-to-get way

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

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

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.

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.

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

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

The generalised approach

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.

The self reflecting solution

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.

The solution

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>

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