Freehand shapes

A freehand shape is a vector shape made of the points of a stroke:

• Use it when the shape should go through points you set, or simply follow your hand, and the exact bend between points matters less than getting the line down quickly.
• Drawing: with the pencil, or by clicking the points a smooth curve runs through.
• Points: it keeps every point, so you can reshape it point by point. To shape curves by their handles, convert it to a path.
• Pressure: with a pen or stylus, the pressure of the stroke sets its width.

Drawing with the pencil

A shape drawn by hand, following your stroke.

• Operation:
  1. Pick Freehand drawing in the paths multi-button of the Tools panel.
  2. Drag on the board.
• Result: a freehand shape following your stroke. With a pen or stylus, the pressure sets the stroke width; with a mouse, pressure is simulated automatically.
• Tip: a stroke that looks like a simple figure can become that figure before you release. See Stroke recognition.

Stroke recognition

The pencil can turn a rough stroke into the figure you meant to draw.

• Operation:
  1. Draw the figure in one stroke.
  2. At the end, keep pressing and hold the pointer still for about half a second.
  3. To adjust the size, keep pressing and drag; the recognized figure follows the pointer.
  4. Release to keep it.
• Needs: a stroke of some size that looks like one of the recognized figures. Recognition is off while Arrow mode or Extend current path is on.
• Result: the stroke is replaced by a clean figure of the kind recognized:
  • A straight stroke becomes a polyline with two points.
  • A box, a diamond, an oval, or a triangle becomes a geometry shape of that kind.
  • An arc becomes a path with a single curve.
• Tip: to keep the stroke as drawn, release without holding still.

Options while drawing with the pencil

Drawing actions

Point spacing

Drawing through points

A smooth curve through points you click one by one.

• Operation:
  1. Pick Curve through points in the paths multi-button of the Tools panel.
  2. Click each point in turn.
  3. Finish the shape:
     • Double-click to leave it open.
     • Double-click the first point to close it.
• Result: a freehand shape with a smooth curve running through the points.
• Tip: this is the tool for tracing over a drawing or an image placed on the board. Click along the line you want to follow, and the curve passes through every point you clicked.

Options while drawing through points

While Curve through points is active, the Actions panel shows one state button:

• Arrow mode: the drawing becomes an arrow that follows the line you drew.

Editing

Editing a freehand shape means moving, adding, and removing the points of its stroke. In edit mode, every point becomes a handle you can drag.

Entering edit mode

• Operation:
  • If the shape is selected, click Enter edit mode in the Actions panel.
  • If the shape is not selected, double-click it.
• Result: the shape shows a handle on every point. The resize handles disappear while editing.

Moving points

Reshapes the stroke by dragging its points.

• Operation: drag a handle.
  • To move several points at once, click their handles to select them, then drag one.
• Result: the segments attached to the points follow.

Placing points precisely

Adding a point

Puts a new point on an existing segment.

• Operation: double-click the outline where the new point should go.
• Result: a point is added on that segment. Drag it to reshape.

Removing points

Takes points away and lets the outline close over them.

• Operation: double-click a point.
  • To remove several points at once, select them and click Delete selection.
• Result: the points are removed and the outline closes over the gap.

Aligning points

Lines several points up on an edge or a center.

• Operation: select two or more points and click one of the align buttons:
  • Align points to the left
  • Align points to the right
  • Align points to the top
  • Align points to the bottom
  • Center points horizontally
  • Center points vertically
• Result: the selected points line up on the chosen edge or center.

Closing and opening

Joins the last point to the first, or breaks that join.

• Operation: turn Closed stroke on or off in the Stroke section.
• Result: closed, the last point joins the first; open, the shape ends at its last point.

Leaving edit mode

• Operation: click on empty board, or click Exit edit mode, to finish.

Attributes

A selected freehand shape shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole. The section is titled Freehand.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Locked Ratio: keeps the proportion between width and height while resizing.
• Proportional: scales the stroke width, dashes, hatching, and tiles along with the shape, so a resized shape keeps its look.

Stroke

The line the shape is drawn with. Every stroke control is described in Vector styles. A shape drawn with a pressure-sensitive pen adds one more:

• Use pen pressure: varies the width with the pressure recorded while drawing. A shape drawn with a pen starts with it on. Turned off, the width follows the drawing speed instead.

Fill

How the inside of the shape is painted. Every fill control is described in Vector styles.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

A freehand shape can be masked and can be used as a mask. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, a freehand shape offers these in the Actions panel. The conversions are available outside edit mode.

Boolean operations

Union, subtract, intersect, exclude, flatten, and split build new paths from the selection. See Boolean operations.

Convert to path shape

Turns the stroke into a path with curves you can shape by their handles.

• Operation: click Convert to path shape.
• Result: a simplified path with fewer points and curves you can shape by their control points, ready for point editing.

Convert to arrow

Turns an open stroke into an arrow that follows it.

• Operation: click Convert to arrow.
• Needs: an open freehand shape. A closed one is left unchanged and a notice says so.
• Result: a custom arrow with the freehand shape as its route, no start arrowhead and an arrow end. If an end lands on a shape, the arrow connects to it right away. The arrow replaces the freehand shape.

Open image editor

Turns the fill of the shape into pixels and opens it for painting.

• Operation: click Open image editor.
• Result: the current fill, hatches and gradients included, becomes a picture at the Image editor fill resolution multiplier set in the App settings, and the image editor opens on it. The picture stays as the fill afterwards.

Convert to Image

Replaces the shape with an image that looks the same but draws faster, to keep a board with many shapes light. The shape can no longer be edited.

• Operation: click Convert to Image. If the shape has a Stroke Animation, a dialog warns that it will be lost, and you confirm with Convert.
• Result: an SVG image in place of the shape that looks the same and stays sharp at any zoom. Move, rotate, scale, resize, and fade animations move to the image, and the stroke animation is removed.

Download source asset

Saves the current file of the shape's image fill to your device.

• Operation: click Download source asset.
• Needs: a shape whose fill is an image.
• Result: the file the shape uses downloads. With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are; shapes without a file are skipped.

Animating freehand shapes

Stroke Animation draws the stroke over time, with speed, direction, and an optional image following the tip.