TextItem

The TextItem type allows you to create typography. Its
functionality is inherited by different text item types such as
PointText, and AreaText (coming soon). They each add a
layer of functionality that is unique to their type, but share the
underlying properties and functions that they inherit from TextItem.

The blend mode with which the item is composited onto the canvas. Both
the standard canvas compositing modes, as well as the new CSS blend modes
are supported. If blend-modes cannot be rendered natively, they are
emulated. Be aware that emulation can have an impact on performance.

Specifies whether the item is selected. This will also return
true for Group items if they are partially selected, e.g.

groups containing selected or partially selected paths.

Paper.js draws the visual outlines of selected items on top of your
project. This can be useful for debugging, as it allows you to see the
construction of paths, position of path curves, individual segment points
and bounding boxes of symbol and raster items.

The item's pivot point specified in the item coordinate system, defining
the point around which all transformations are hinging. This is also the
reference point for position. By default, it is set to
null, meaning the rectangle.center of the item's
bounds rectangle is used as pivot.

Controls whether the transformations applied to the item (e.g. through
transform(matrix), rotate(angle),
scale(scale), etc.) are stored in its matrix property,
or whether they are directly applied to its contents or children (passed
on to the segments in Path items, the children of Group
items, etc.).

var path = new Path();
// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true
var group = new Group();
group.addChild(path);
// Now the parent of the path has become the group:
console.log(path.parent == group); // true

Example — Setting the parent of the item to another item

var path = new Path();
// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true
var group = new Group();
group.parent = path;
// Now the parent of the path has become the group:
console.log(path.parent == group); // true
// The path is now contained in the children list of group:
console.log(group.children[0] == path); // true

Example — Setting the parent of an item in the constructor

var group = new Group();
var path = new Path({
parent: group
});
// The parent of the path is the group:
console.log(path.parent == group); // true
// The path is contained in the children list of group:
console.log(group.children[0] == path); // true

When two line segments meet at a sharp angle and miter joins have been
specified for item.strokeJoin, it is possible for the miter to
extend far beyond the item.strokeWidth of the path. The
miterLimit imposes a limit on the ratio of the miter length to the
item.strokeWidth.

The function to be called when the mouse moves over the item. This
function will only be called again, once the mouse moved outside of the
item first. The function receives a MouseEvent object which
contains information about the mouse event.

Type:

Function

Example — When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.

Run

Example — When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.

Checks whether the item matches the given criteria. Extended matching is
possible by providing a compare function or a regular expression.

Matching points, colors only work as a comparison of the full object, not
partial matching (e.g. only providing the x-coordinate to match all
points with that x-value). Partial matching does work for
item.data.

Fetch the descendants (children or children of children) of this item
that match the properties in the specified object.

Extended matching is possible by providing a compare function or
regular expression. Matching points, colors only work as a comparison
of the full object, not partial matching (e.g. only providing the x-
coordinate to match all points with that x-value). Partial matching
does work for item.data.

Matching items against a rectangular area is also possible, by setting
either match.inside or match.overlapping to a rectangle
describing the area in which the items either have to be fully or partly
contained.

Fetch the first descendant (child or child of child) of this item
that matches the properties in the specified object.

Extended matching is possible by providing a compare function or
regular expression. Matching points, colors only work as a comparison
of the full object, not partial matching (e.g. only providing the x-
coordinate to match all points with that x-value). Partial matching
does work for item.data.

Imports (deserializes) the stored JSON data into this item. If the data
describes an item of the same class or a parent class of the item, the
data is imported into the item itself. If not, the imported item is added
to this item's item.children list. Note that not all type of
items can have children.

Tests

Specifies whether the item has any content or not. The meaning of what
content is differs from type to type. For example, a Group with
no children, a TextItem with no text content and a Path
with no segments all are considered empty.

Example — Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.

Run

Example — When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set black.