Menu - Top - Home - Donate to Me

2-Dimensional Graphics Paths

Back to documentation index.

Introduction

This article describes two-dimensional paths. This is an extra included in the HTML 3D Library.

Download the latest version of the Public Domain HTML 3D Library at the HTML 3D Library's Releases page.

Contents

Introduction
Contents
Paths
How to Use
Creating Paths
  SVG Path String
  Building Paths
Path Segments
Methods

Paths

A path is a collection of two-dimensional line segments and/or curves. Many paths describe closed figures or connected strings of lines and curves. The GraphicsPath class currently supports line segments, quadratic and cubic Bézier curves, and elliptical arcs, as well as closed figures made from several path segments.

How to Use

2D paths are implemented in a class called H3DU.GraphicsPath, found in the file extras/path.js in the HTML 3D Library download. To use this class, you must include the script "extras/path.js", as in this example.

<script type="text/javascript" src="h3du_min.js"></script>
<script type="text/javascript" src="extras/path.js"></script>

Creating Paths

There are two ways to create paths: using an SVG path string, or by calling methods that add its segments.

SVG Path String

If you've worked with SVG, you may be familiar with this format for describing 2D paths. An SVG path string consists of one or more path commands that start with a single letter. The following are examples of SVG path strings:

M50,50L100,100,100,150,150,200

M50,20C230,245,233,44,22,44

M50,50H80V60H50V70H50

The "M" command moves the current position, the "L", "H", and "V" commands create lines, the "Q", "C", "S", and "T" commands create Bézier curves, the "A" command creates elliptical arcs, and the "Z" command closes the path. If the letters are lower-cased, X and Y coordinates are relative to the current position.

For more information, see the H3DU.GraphicsPath.fromString method documentation. That method is also how you create a 2D path from an SVG path string, as in this example:

var path = H3DU.GraphicsPath.fromString("M50,20C230,245,233,44,22,44")

Building Paths

The other way to make paths is to call the H3DU.GraphicsPath constructor and call methods to add path segments to the path.

The H3DU.GraphicsPath object stores a current position and a starting position, and many methods don't have you specify a starting position, to cover the common case of drawing a series of connected lines and curves.

Path Segments

Each path can include a number of line segments, Bézier curves, and elliptical arcs. Line segments are relatively easy to understand. The other two kinds of segments deserve some discussion.

A Bézier curve is a parametric curve based on a polynomial formula. In this kind of curve the endpoints are defined as they are, but the other points define the shape of the curve and generally don't cross the curve. A quadratic Bézier curve uses 3 points. A cubic Bézier curve uses 4 points.

An elliptic arc is a curve which forms part of an ellipse. There are several ways to parameterize an elliptic arc, as seen in the .arc(), .arcTo(), and .arcSvgTo() methods of the H3DU.GraphicsPath class.

Methods

Back to documentation index.