| Package | com.coreyoneil.vectorization |
| Class | public class Vectorize |
| Inheritance | Vectorize —> Shape —> DisplayObject —> EventDispatcher —> Object |
Language Version: Actionscript 3.0
Player Version: Flash Player 9
The Vectorize class is used to convert a raster image into a vector image. It is passed a raster image in its constructor, converts it to vector, and then has the vector image drawn to itself. The original raster image is left untouched, and can be any DisplayObject (Bitmap, MovieClip, Sprite, FLV, TextField, etc.) Technically, you could pass a vector object such as TextField or Shape, which would then be rasterized and re-vectorized. The registration point of the DisplayObject does not matter. The Vectorize class does the bulk of the work in 3 steps, each of which have events you can listen for to track progress:
| Property |
|---|
|
curveSmoothness : Number A value that controls how curvy the vectors' outlines can appear. |
|
minimumArea : uint The minimum amount of pixels required in a color group to form a shape in the final vector image. |
|
percentDone : Number [read-only] A floating point value from 0 to 1 that tracks the progress made in the despeckle, grouping, and edging phases. |
|
stepSize : uint The number of pixels to skip before evaluating a vector's outline and determining if a curve should be drawn. |
|
threshold : int The color range/tolerance used to determine what colors should be grouped together in the final vector image. |
|
transparentColor : uint The color to be used for any transparent pixels in the raster image. |
| Method |
|---|
|
Vectorize(object:DisplayObject, threshold:Number = 23, stepSize:uint = 2, curveSmoothness:Number = 4, minimumArea:Number = 3, transparentColor:uint = 0xFFFFFF) Creates a Vectorize object with optional control parameters. |
|
redraw() Clears and redraws the vector image without reexamining the raster image. |
|
vectorize() Takes the raster image passed in instantiation and creates a vector image equivalent based on the Vectorize class's properties. |
| Event | Summary |
|---|---|
| complete | Dispatched when vectorization is finished. |
| despeckleComplete | Dispatched when the despeckling phase is finished. |
| despeckleProgress | Dispatched while despeckling is occuring. |
| despeckleStart | Dispatched when the despeckling phase begins. |
| edgingComplete | Dispatched when all edges have been found. |
| edgingProgress | Dispatched while edges are being found. |
| edgingStart | Dispatched when the edging phase begins. |
| groupingComplete | Dispatched when all color groups are found. |
| groupingProgress | Dispatched while color groups are being found. |
| groupingStart | Dispatched when the grouping phase begins. |
| init | Dispatched when the vectorization process is initialized. |
| redrawn | Dispatched when the vector image is redrawn. |
A value that controls how curvy the vectors' outlines can appear from 0 to 50. The outline of a vector shape is drawn in parts over a series of curveTos. The curveSmoothness value determines when the next segment is drawn by comparing the angle of change between the current segment being evaluated and the last segment that was drawn. The higher the value of curveSmoothness, the curvier an outline can be. This setting ties in to the stepSize property, which is also used when evaluating segments of an outline.
Implementation
public function get curveSmoothness():Number
public function set curveSmoothness(value:Number)
See Also
stepSize
The minimum amount of pixels required in a color group to form a shape in the final vector image. This value controls how small shapes can be in the vector image, by number of pixels.
A floating point value from 0 to 1 that tracks the progress made in the despeckle, grouping, and edging phases. When the vectorization process moves from one phase to the next, percentDone is reset to 0 and used to track the next phase.
The number of pixels to skip before evaluating a vector's outline and determining if a curve should be drawn. This value ties in to curveSmoothness when controlling how the final vector image should appear.
Implementation
public function get stepSize():uint
public function set stepSize(value:uint)
See Also
curveSmoothness
The color range/tolerance used to determine what colors should be grouped together in the final vector image. Valid values are within the range of 0 to 256.
Implementation
public function get threshold():int
public function set threshold(option:int)
The color to be used for any transparent pixels in the raster image. This property expects a 16-bit color value (ex - 0xFF0000).
Implementation
public function get transparentColor():uint
public function set transparentColor(value:uint)
Creates a Vectorize object with optional control parameters. The DisplayObject to be vectorized is passed into the constructor upon instantiation. So, if you had a Bitmap called "bmp", you would create a Vectorize object like so:
var myVector:Vectorize = new Vectorize(bmp);
Parameters
object:DisplayObject — The DisplayObject to vectorize.
threshold:int — Color threshold. Default is 23.
stepSize:uint — Number of pixels to skip before evaluating an outline when drawing vector image. Default is 2.
curveSmoothness:Number — Controls how curvy the outlines of the vector image can be. Default is 4.
minimumArea:uint — The smallest size vector shape allowed, measured in pixels. Default is 3.
transparentColor:uint — The color to be used in lieu of any transparent pixels in the DisplayObject. Default is 0xFFFFFF.
Clears and redraws the vector image without reexamining the raster image. This can only be called after the raster image is vectorized by using the vectorize() method. The threshold and minimumArea properties are not examined when calling redraw(). However, curveSmoothness and stepSize can be changed and their influence shown by calling redraw(). This allows the user to change the appearance of the final vector image while avoiding expensive computations.
If redraw() is called prior to vectorize(), no action will occur.
Takes the raster image passed in instantiation and creates a vector image equivalent based on the Vectorize class's properties. Once vectorization is complete, the final vector image is drawn to the Vectorize class's Graphics. To display the vector image, add the Vectorize object to the display list.
Dispatched when vectorization is finished.
Dispatched when the despeckling phase is finished.
Dispatched while despeckling is occuring. The percentDone property can be read during this event to find out how far into the despeckling process you are.
Dispatched when the despeckling phase begins.
Dispatched when all edges have been found.
Dispatched while edges are being found. The percentDone property can be read during this event to find out how far into the edging process you are.
Dispatched when the edging phase begins.
Dispatched when all color groups are found.
Dispatched while color groups are being found. The percentDone property can be read during this event to find out how far into the grouping process you are.
Dispatched when the grouping phase begins.
Dispatched when the vectorization process is initialized.
Dispatched when the vector image is redrawn.
Usage of the Vectorize class is fairly straightforward. You pass the DisplayObject you want to vectorize into the constructor, then use the vectorize() method to create the vector image. There are several events that the Vectorize class lets you listen for so that you can track its progress. To display the final vector image, add the Vectorize object to the display list. The amount of time it takes to vectorize a DisplayObject is directly tied into framerate, so it is suggested you set your framerate to 120 fps when running this example.
To run this example, paste the code below into the timeline of a new FLA. Be sure that you have the Vectorizaton Package included in your FLA's classpaths.
This example requires you to have a DisplayObject with an instance name of "raster" on the stage. Note that you don't have to have your DisplayObject on the stage to use the Vectorize class - it can be an object in the library or something you've loaded into your SWF at runtime.
import com.coreyoneil.vectorization.Vectorize;
// Instantiate a new Vectorize object
var myVector:Vectorize = new Vectorize(raster);
// Add event listeners
myVector.addEventListener(Vectorize.INIT, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_START, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_START, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.EDGING_START, traceStatus);
myVector.addEventListener(Vectorize.EDGING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.GROUPING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.EDGING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.COMPLETE, showVector);
// Begin vectorization
myVector.vectorize();
// Handlers
function traceStatus(event:Event):void
{
trace(event.type);
}
function traceProgress(event:Event):void
{
var progress:int = event.target.percentDone * 100;
trace(event.type + ": " + progress + "%");
}
function showVector(event:Event):void
{
trace(event.type);
addChild(myVector);
}