TechNote (Archived)

Vector path rendering in Fireworks

Issue

Fireworks may produce unexpected results when rendering strokes on a vector path, such as blurring edges or drawing lines at sizes that differ from those indicated in the Property Inspector. This document contains information to help you resolve these issues.

Soft lines vs. hard lines

Fireworks allows for 2 basic types of strokes for vector paths: soft strokes and hard strokes. Lines with a soft stroke will anti-alias the edges of lines to provide smoother, cleaner lines. This type of line works best for rounded edges and curves because it eliminates "jaggies" visible with curved edges that use hard lines. The 1-Pixel Soft line is the default for Fireworks. Lines with a hard stroke always render hard, pixelated lines or lines without any anti-aliasing or variation in intensity among pixels. Hard lines work best for horizontal or vertical lines or for rectangular shapes that need hard, crisp edges.

Hard Line vs. Soft Line (800% zoom)

Soft lines render pixels at varying intensities based on how close the pixels are to the original path of the vector line. A soft line attempts to represent the line more accurately within the current pixel coordinate space based on the area that the line would occupy along the vector line given its true width. If the area of the path at its true width occupies only half a particular pixel, that pixel is rendered with about 50% of the intensity of the color of that line.

Hard lines render pixels on the screen that are along the path of the vector line. These pixels are always the full intensity of the color specified for the line. Typically, the pixels Fireworks renders for hard lines are only those that come in contact with the vector line as it is drawn with no thickness.

Path location

Line rendering for vector paths in Fireworks depend not only on the type of stroke used but also on the placement of the path within the pixels of the canvas.

Soft lines

Lines with a soft stroke may appear both soft and hard depending on line placement. For example, a straight 1-pixel soft line will appear as a hard line if it is placed directly within a single row of pixels (on a half-pixel location). This is because there are no partially covered pixels that would result in anti-aliasing of the line. The pixels covered are each given 100% intensity of the stroke's color. Alternatively, that same line can appear to be spread out evenly between two lines of pixels if it lies directly between those pixels (on a whole-pixel location).

Soft Line Path Placement, 1px Stroke

Even though these paths share the same stroke size of 1px, anti-aliasing causes the second path placed on whole-pixel value to appear to be twice the thickness of the first path placed on half-pixel values.

The anti-aliasing behavior of these two lines switches if the stroke thickness is changed from 1px to 2px.

Same Lines, 2px Stroke

You can see here that the path on half-pixel values now anti-aliases because the 2px stroke occupies 3 rows of pixels. The path on whole-pixel values now appears hard since its stroke fits exactly within 2 rows of pixels. This behavior alternates for each additional increase in size of the stroke. Strokes of odd thickness appear hard for paths on half-pixel locations, while strokes of even thickness appear hard for paths on whole-pixel locations.

Note: Fireworks gives special attention to 1-pixel soft strokes on closed paths to ensure that they render as hard lines when placed on whole pixels.

Hard lines

Lines with hard strokes do not anti-alias and always render with the correct thickness, with pixels closest to the path being filled.

1px and 2px Hard Line

Both the 1px and 2px lines render with 1px and 2px thickness respectively as a result of the hard line setting, regardless of line placement.

Line length and point rounding

Fireworks measures the width or height of a vector line (as seen in the dimensions provided by the Property Inspector, not line thickness) based on the extents of the path without consideration of line stroke. This means that a horizontal vector path with a 10px width appears in Fireworks as 10px in width, even though the pixel extent of its stroke goes beyond 10px. Each of the previous examples uses a horizontal line measuring 10px in width. Of those shown, only the 1px soft line on half pixels results in a pixel length that matches the length of the vector path. The hard line version of the 1px line on half pixels does not show a pixel length equivalent to the vector length like the soft line because a different algorithm for determining the affected pixels at path ends is used for hard lines.

Soft lines

Soft lines fill pixels on end points differently at the start and end of the line. The start point of a soft line (the first point created when the line is drawn) fills a pixel based on the proximity of the path point within the pixel itself. The closer the path point is to the center of the pixel, the greater the intensity of color of the pixel on which it lies. Any pixel with a center is less than a pixel away from the start point is affected through anti-aliasing, assuming that the pixel is not at full intensity because the point lies directly on it. For end points, the same concept applies, but the location of the point is offset to 1 pixel inward toward the start point of the line. This behavior allows a soft line to display a pixel length equal to the path length. This behavior also prevents a 1px soft line from displaying a pixel length 2px greater than the actual path length when anti-aliasing is applied to pixels on both the start and end points of the path.

1px Soft Line Sizing

Hard lines

Hard lines floor the position of a path point to determine which pixel is affected by a start or end point. If a point on a 1px path lies on an x position of 5.9, that value is floored to 5, and the fifth pixel in that row is filled. This behavior causes the 10px hard line to fill 11 pixels in the pixel row. If the line is defined by the (x, y) points (4, 6) and (14, 6), then it has a path length of 10px. The pixels filled in by that line, however, include 4 through 14, with 4 and 14 inclusive making 11 pixels.

1px Hard Line Sizing

Note: As the thickness of a stroke increases, so do the pixels extending from a path's end points.

Differences in tools

The different tools within Fireworks create different kinds of lines. Tools that draw path points on whole pixel values display vertical and horizontal soft lines with a thickness of an odd pixel value as hard lines. Tools that draw path nodes on half pixel values display vertical and horizontal soft lines with a thickness of an even pixel value as hard lines.

Tool	Point placement	Example (x, y)	Soft line looks hard (Stroke thickness)
Line	Half pixel values	(10.5, 20.5)	odd (1, 3, 5...)
Pen	Whole pixel values	(10, 20)	even (2, 4, 6...)
Vector Path	Half pixel values*	(10.5, 20.5)*	odd (1, 3, 5...)*

* The precision of the Vector Path tool changes with document magnification, whereas the Pen and Line tools always draw on whole or half pixel values independent of magnification. The half pixel values for the Vector Path tool only apply at 100% magnification.

Top line: Line tool; Bottom line: Pen tool

Property Inspector, Info Panel

When you resize a selected path using text inputs provided in Fireworks in the Property Inspector or Info Panel, then path points are always rounded to their whole values. Thus points on paths drawn with the Line And Vector Path tool shift after you resize them, which may result in hard-looking soft lines becoming soft when they are anti-aliased between pixels.

These panels show only whole number values for the width and height of paths, even when the path contains decimal values.

Transform tool

When you resize a path using the Transform tool, path points are always rounded to their whole values as with the Property Inspector or Info Panel. Additionally, with Fireworks 8, the Transform tool snaps to pixel whole values when scaling a vector path.

Numeric Transform

The Numeric Transform Dialog (Modify > Transform > Numeric Transform) retains the relative positions of points along a vector path without rounding them to their whole values. The Numeric Transform Dialog also allows you to resize paths using decimal values for width and height.

Note: When you resize a path using the Numeric Transform Dialog, it scales from the path's center rather than its top left corner.

Pointer tool, Subselection tool

Both the Pointer and Subselection tools move entire selected paths in single pixel increments. After you move a path with either tool, points on that path retain their relative positions.

When used to move individual path points, the Subselection tool does not move in single pixel increments, but moves smoothly depending on the current level of magnification.

When you use the arrow keys to move a selection, the selection moves in 1 pixel increments regardless of whether you are using the Pointer tool or Subselection tool.

Closed paths and stroke placement

When you work with closed paths in Fireworks, you can change the placement of a stroke on the path with an option in the stroke color picker or from the Stroke Options dialog box. Stroke placement options include: Inside Path, Centered On Path, and Outside Path. Changing the stroke placement option does not alter the appearance of open paths; open paths always render using the default placement, Centered on Path.

1px Strokes on closed paths

You can adjust these options along with path location to achieve different types of line rendering for different path objects. Certain paths created by Fireworks, however, exhibit a unique behavior for 1px strokes. For these paths, a 1px stroke with a placement of Centered On Path is always displayed with a placement of Inside Path.

1px Strokes on certain closed paths

This behavior was implemented to help offset problems experienced with 1px soft strokes anti-aliasing for the default Centered On Path placement. The only tools in Fireworks that create these paths are:

Rectangle tool
Ellipse tool
Polygon tool

There is no way to alter this behavior using any of the options within Fireworks. If undesired you would need to avoid using the tools listed above; insteaduse other tools such as the Pen tool or any of the Auto Shape tools.

Workarounds

Resizing paths

When you resize paths with the Property Inspector, Info Panel, and Transform Tool, path points are placed on whole values. To avoid this behavior, you can use Numeric Transform Dialog to resize your paths. This option is particularly useful for paths drawn with the Line tool and provides a more accurate resize without forcing each point on a whole pixel value.

You can also use the Subselection tool to move pixels on a path individually. The Subselection tool allows you to resize a path in any direction whereas the Numeric Transform Dialog always works from the center.

Line anti-aliasing

If your vector path anti-aliases a rendered line in an undesirable manner, you can use the Subselection tool to adjust individual points on the line. For strokes of even thickness, use the Subselection tool to move path points to a whole pixel value for a harder line. For lines of odd thickness, move the points to a half-pixel location for a harder line. For greater control with the Subselection tool, zoom into your selection with a high magnification.

Note: Using the Subselection tool to modify paths on a rectangle shape converts the rectangle into a path. Once the rectangle is a path, you will no longer be able to adjust its roundness in the Property Inspector.

Adjusting Auto Shape stroke placement

You may notice differences in the rendering of rectangle primitive shapes created with the Rectangle tool and those created with Rounded Rectangle Auto Shapes, especially when you use 1px strokes. Rectangle primitives always render 1px strokes with a placement of Inside Path, whereas Rounded Rectangle Auto Shapes default to a stroke placement of Centered On Path. To make a Rounded Rectangle Auto Shape render its stroke like a rectangle primitive, use the Subselection tool to select the path in the Rounded Rectangle and then use the stroke color picker or Stroke Options dialog to change its path placement to Inside Path (this option is not available if you have the Auto Shape itself selected with the Pointer tool).

Extensions

The following extensions are useful when you work with vector paths and their points.

SuperNudge

Super Nudge is a Fireworks Panel that allows you to move a selected path or points along a path by any amount, including sub-pixel amounts and individual points. You can use Super Nudge to modify vector points to appear more or less anti-aliased. For more information, see http://www.phireworx.com/content/members/supernudge/default.asp.

Path Commands and Path Points Commands

The Path Commands and Path Points Commands extensions are collections of path- and path point-related commands. They contain commands for rounding entire paths (all points on a path) or individual points selected on a path to whole or half-pixel values. These commands easily allow you to make paths with a soft stroke look harder. For more information, visit the following websites:
Path Commands: http://www.senocular.com/fireworks/extensions.php?id=0.24
Path Points Commands: http://www.senocular.com/fireworks/extensions.php?id=0.29

Transform Panel

The Transform Panel provides a substitute for the inputs provided by the Property Inspector and the Info Panel. It allows you to inspect and set the size and location of a selection such as an object or a collection of path points for greater control over their placement. For more information, visit http://www.senocular.com/fireworks/extensions.php?id=0.53.