Drawing instructions
A drawing is a linear list of path objects in a defined Z order.
There are four modes which can be selected, using the following keys:
S Select mode
E Edit mode
F Format Paint mode
P Pen mode
If F is pressed while already in Format Paint mode then the mode is changed back to Select mode. If P is pressed while already in Pen mode then the mode is changed back to Select mode.
While in Edit mode, double clicking outside all path objects causes the mode to change to Select mode. While in Select mode, double clicking on a path object causes the mode to change to Edit mode.
Path objects
A path object allows for defining 2D shapes using cubic beziers. Each vertex can have both trailing and leading bezier control points.
A path may consist of multiple subpaths. A given subpath may be open or closed. A point is part the interior of a path if the winding is nonzero. It follows that:
- A simple closed shape can be traversed either clockwise or counterclockwise
- To create a path with a hole the outer and inner subpaths must be traversed in opposite directions.
Each path object has fill and stroke properties. The fill defines how the interior is rendered and the stroke defines how the boundary is rendered. The fill can be disabled with a check box. The stroke can be disabled with a checkbox. Obviously it's not useful to disable both because then the path is invisible.
Stroke properties
The following stroke properties can be defined:
- Enable
- Colour (HSLA)
- Width
- PatternScale, PatternMask
- BeginStyle, MiddleStyle, EndStyle
The stroke width cannot be varied along the length of the stroke.
The pattern is used to allow for dotted or dashed strokes etc. If PatternScale is 0 it is ignored otherwise it allows for scaling the line pattern along the length of the stroke.
The PatternMask is an 8 byte integer interpreted as an array of 8 unsigned bytes which define alternating lengths of "mark" and "space". (mark means the stroke colour is drawn, space means not drawn to give rise to a gap). Each byte in the rangle 0-255 represents a length for a "mark" or "space" in units of PatternScale/255. The least significant byte which correponds to the right most two digits in the hex representation represents a mark, the next byte a space and so on. Examples of values of PatternMask
FFFF a dash pattern with mark:space ratio equal to 1:1
80FF a dashed pattern with mark:space ratio equal to 2:1
FF80 a dotted pattern with mark:space ratio equal to 1:2
60FF60406040 a dash-dot-dot pattern
60406040604060FF a dot-dot-dot-dash pattern
The Begin/Middle/End styles allows for defining arrow heads, filled or open circles and other shapes at the vertices on both open and closed paths.
Panning and zooming
In all modes the mouse wheel allows for zooming in and out. Holding down shift while moving the mouse wheel pans horizontally and holding down ctrl while moving the mouse wheel pans vertically.
A left button drag outside all path objects causes the window to be panned.
Select mode
In Select mode whole path objects may be selected, but not parts of path objects. A black dotted rectangle is drawn around each selected path object.
Left clicking outside all the path objects clears the selection. Clicking on a path object selects that and only that path object. Hold down shift while clicking on a path object toggles whether it is selected, independently of what other path objects are selected.
While shift is held down, dragging out a rectangle by holding down the left mouse button allows for toggling the selection of all path objects which are contained entirely within the rectangle.
Left click dragging any of the selected path objects causes all the selected path objects to be translated with the mouse.
Pressing delete causes all the selected path objects to be deleted. Pressing ctrl-D causes all the selected objects to be duplicated.
Pressing ctrl-A causes all path objects in the entire drawing to be selected. Shift-1 (i.e. !) causes the selection to be inverted.
Edit mode
Edit mode allows for easily selecting subsets of the vertices of paths and performing operations on that subset (e.g. deleting them, translating them, duplicating them).
In edit mode the mouse cursor is displayed as cross hairs
The vertices and control points on the selected paths are drawn with small filled circles in the following colours:
vertex white
trailing (incoming) red
control point
leading (outgoing) green
control point
In edit mode the current selection consists of a set of whole selected path objects (todo: we should draw a dotted rectangle around these) and a set of selected vertices on other path objects.
There is both a concept of the selected set of whole path objects and the selected set of vertices. It is possible to select subsets of the vertices from multiple path objects.
The vertices (and their leading and trailing control points) are semi-transparent if not selected, and fully opaque if selected.
Double clicking on the boundary of a path object causes a cusp vertex to be inserted at that position.
If a path object has a fill enabled then clicking inside it (as per the winding rule) is regarded as clicking on it. Similarly if a path object has a stroke enabled then clicking on its boundary is regarded as clicking on the path object.
A left click outside all path objects clears the selection (so no path objects nor vertices of path objects are selected).
A left click on a path object (but not one of its vertices or bezier control points) causes the path object to be selected, but all its vertices are deselected.
A left button drag on a selected path object causes all the selected path objects to be dragged with the mouse. A left button drag on an unselected path object causes that object to become selected and dragged with the mouse. Furthermore if the left mouse button is held down and the mouse is moved, the entire path object is translated.
While holding down shift, a left click on a path object toggles whether the path object is part of the selected set of path objects.
A left click on a vertex of a selected path object causes just that vertex to be selected. All other path objects are deselected.
While holding down the shift key, dragging out a rectangle by holding down the left mouse button allows for inverting the selection of the vertices inside the rectangle.
ctrl-A allows for selecting all vertices on all the selected path objects.
! (i.e. shift-1) allows for inverting which vertices are selected on all the selected path objects.
Pressing delete causes all the whole selected path objects to be deleted, and all the selected vertices to be deleted. Similarly with other operations like dragging with the mouse to translate the current selection, or pressing ctrl-D to duplicate the selection.
Each vertex has a type which determines what happens when the trailing or leading bezier control handles are dragged with the mouse:
Type Behaviour
----------------------------------------------------------------------------
cusp Each bezier handle can be moved independently
smooth The vertex and two bezier control points are constrained to be
colinear
symmetric Like smooth with the additional constraint that the two bezier
control points are equidistant from the vertex
The following keys can be used to change the type of the selected vertices:
shift-C Change all selected vertices to type 'cusp'
shift-S Change all selected vertices to type 'smooth'
shift-Y Change all selected vertices to type 'symmetric'
If either of the bezier control handles are retracted, then they can be dragged out of the vertex by holding down shift.
A bezier control handle can be retracted by holding down ctrl when clicking on it. That also sets its type to 'cusp'.
Pen mode
In pen mode the mouse cursor changes to a pen icon
The vertices and control points on the selected paths are drawn with small filled circles in the following colours:
start vertex of open red
subpath
end vertex of open green
sub path
other vertices white
trailing (incoming) red
control point
leading (outgoing) green
control point
In "select" mode click on one or more paths to select them (dotted rectangles are drawn around them). Then hit P to enter "pen" mode. The vertices of the selected paths will be displayed in a semitransparent white, and the bezier handles in semitransparent red/green.
Creating new paths
Pen mode is used to create new paths. After hitting P the mouse cursor changes to a pen. To enter a polygon simply left click to define each vertex in turn and close it by clicking back on the initial vertex. It doesn't matter whether you go clockwise or counterclockwise.
While entering a polygon the button up events are irrelevant, so whether you click briefly or hold down the mouse button ("dragging"), you still get a polygon whose vertices are defined by the position of the mouse at the time of the button down mouse events.
While defining the path the initial vertex of the path is red and the last vertex (which tracks the position of the mouse as it is moved) is green. The path is stroked and filled according to the current stroke and fill settings. While defining the path, the path is open meaning that it is stroked from the red vertex towards the green vertex, but the segment from the green vertex back to the red vertex is not stroked.
To end an open path right click with the mouse. As an example to draw a line segment in pen mode you left click to define the start vertex and right click to define the end vertex.
After ending a path (either by clicking back on the start vertex to close it, or right clicking) the current mode continues to be pen mode, so you can immediately define another path.
While defining a path, if you hold down shift when you depress the mouse button to add the next vertex (at the current location of the green vertex), you can drag out the leading bezier handle. The node is "symmetric", meaning that a trailing bezier handle is defined in the opposite direction.
Inserting more vertices into the middle of existing paths
If you hold down shift, you will notice that as the mouse is moved over the boundary of the path the two vertices defining that segment are highlighted. You can now left click to insert a vertex between the two highlighted vertices. The inserted vertex will now move with the mouse, allowing you to position it where you like before clicking a mouse button. If you right click no more vertices are inserted. If you left click another vertex is inserted which now moves with the mouse, so you can left click to insert any number of vertices into the path.
Appending vertices to the start/end of an existing open path, or closing an existing open path
If you hold down shift, you will notice that as the mouse is moved over the start vertex (coloured red) or end vertex (coloured green) of a selected open path, the vertex changes to white. At that moment a left click causes a vertex to be appended at that end of the open path. The new appended vertex is coloured red or green and its position is defined by the mouse position, allowing you to position it where you like before clicking a mouse button to set it to that position. At this point the behaviour is exactly the same as when creating new path objects. You can
- click back on the other end vertex of the open path to close it
- left click to continue appending more vertices to that end of the open path
- right click to finish appending vertices, resulting in an open path
- shift-drag to define symmetric trailing and leading bezier control handles on a vertex
Format Paint
Format paint allows the fill and stroke properties of one path object to be applied to other path objects.
First in edit or select mode, select a whole path object. Then hit 'F' to enter Format Paint mode. The mouse cursor changes to a paint brush. You can now click on any number of path objects to have their fill and stroke properties assigned from the original object.
Eye dropper
The colour editor which shows a filled square for the fill or stroke colour can be assigned by dragging from that position with the mouse. As the mouse is moved the fill or stroke colour is assigned with the pixel colour under the mouse.
Keys
S Select mode E Edit mode F Format paint P Pen mode ctrl-shift-[ Move selected item to bottom ctrl-shift-] Move selected item to top ctrl-[ Move selected item down ctrl-] Move selected item up ctrl-C Export drawing to c:\developer\drawings\drawing.export ctrl-V Import drawing from c:\developer\drawings\drawing.export ctrl-A Select All ! Invert selection # Toggle grid ctrl-D Duplicate selection Delete Delete selection shift-arrowkey Coarse translate selection up,down,left,right arrow-key Fine translate selection up,down,left,right shift-C In edit mode, change selected vertices to type 'cusp' shift-S In edit mode, change selected vertices to type 'smooth' shift-Y In edit mode, change selected vertices to type 'symmetric'