Path objects

Table of content:

• How path objects work in Bluepic
• Instructional syntax
• Drawing paths in Edit Mode
• Moving, scaling and stretching paths
• Line segment
• Quadratic Bézier curve
• Cubic Bézier curve
• Elliptical arc
• Move & Close segment
• Closed vs open path

How path objects work in Bluepic

Path objects in SVG are based on an instructional syntax, meaning that paths are defined by a list of sequentially executed instructions for how to "draw" the object.

Example:
1. Move to X = 100, Y = 100.
2. Draw a line from there to X = 100, Y = 300.
3. Draw another line from there to X = 300, Y = 300.

Many design tools present paths using a more visual, point-based model — i.e., anchor points connected by lines or curves. Bluepic also offers a click, drag and drop visual interface with the Edit Mode. However, unlike many other design tools, the list of "drawing" instructions is displayed and directly editable. This gives designers much more granular control and, more importantly, allows you to define properties of any instruction with dynamic expressions or connect them to input fields.

Instructional syntax

The default tab of the properties panel displays the list of drawing instructions in order of execution.

There are 6 different types of instructions:

• Move
• Line
• Quadratic Bezier
• Cubic Bezier
• Elliptical Arc
• Close

Some types of instructions require defining multiple points, such as Cubic Bézier, which needs a target point and two control points, each defined by an X and Y coordinate.

Drawing paths in Edit Mode

Select the path tool and click anywhere on the canvas to set the starting point of your path. Click again somewhere else on the canvas to draw a line from your starting point to this new point, and so on.

You can turn any line segment into a curve or arc segment by selecting its ending point and then choosing one of the segment types in the toolbar.

Moving, scaling and stretching paths

To move a path object as a whole, Edit Mode must be disabled. Simply click and drag the object across the canvas.

You can also scale and stretch a path object as a whole. To do so, enable Edit Mode and then activate the scaling tool in the toolbar.

Line segment

Line segments are the simplest drawing instruction. They connect from their starting point (defined as the end point of the previous instruction) to their end point in a straight line.

The definable properties are:

• X coordinate of the line's end point
• Y coordinate of the line's end point

Quadratic Bézier curve

Quadratic Bézier curves have, in addition to an endpoint, a control point that defines the slope of the curve (which will be a parabola).

The definable properties are:

• X coordinate of the curve's end point
• Y coordinate of the curve's end point
• cx: X coordinate of the curve's control point
• cy: Y coordinate of the curve's control point

Cubic Bézier curve

Cubic Bézier curves have, in addition to an endpoint, two control points that define the slope of the curve.

The definable properties are:

• X coordinate of the curve's end point
• Y coordinate of the curve's end point
• c1x: X coordinate of the control point originating at the curve's starting point
• c1y: Y coordinate of the control point originating at the curve's starting point
• c2x: X coordinate of the control point originating at the curve's end point
• c2y: Y coordinate of the control point originating at the curve's end point

Elliptical arc

An elliptical arc is a section of an ellipse (or a circle if rx is equal to ry).

The definable properties are:

• X coordinate of the arc's end point
• Y coordinate of the arc's end point
• rx: horizontal radius of the ellipse
• ry: vertical radius of the ellipse
• angle: The rotation of the ellipse's x-axis relative to the coordinate system
• largeArc (boolean): Determines which arc to use if two possible arcs fit the criteria (large vs small arc)
• sweep (boolean): Determines the direction in which the arc is drawn

Move & Close segment

The Move segment sets the first starting point.

The Close segment creates a line back to the initial starting point defined by the last Move segment.

Closed vs open path

To add a Close segment at the end of the list, simply click the Open/Closed toggle in the toolbar. Whether a path is open or closed is particularly relevant when you set a stroke for the object.