Dotted-Line Decorator for EaselJS


I’ve modified the line decorator demo with a preview of a dotted-line decorator. This line decorator draws solid circles with a fixed radius and spacing along the line between two points. Once the CompGeoJS quad. Bezier is complete, all decorators will support the complete set of clear(), moveTo(), lineTo(), and curveTo() methods. At present, you may only clear the decorator, move to a point, and draw straight lines. Combinations of moveTo() and lineTo() should work with proper dash overflow and such between line segments.

The current version of the line decorator demo allows you interactively render a line between two points (using the CompGeoJS parametric line class) with solid, dashed, or dotted line decorators.  The actual drawing code remains unchanged and the only subtle aspect of the code was to toggle stroke and fills depending on whether or not the dotted decorator was selected.

The dotted-line decorator accepts ‘radius’ and ‘spacing’ parameters to control the dot radius and spacing between dots.  View source to see how the demo is structured and you can preview the various line decorator codes by loading those JS files directly.  As this is an open-source project, all code is documented and not minified or obfuscated in any way.

Comments are closed.