A Group is a collection of items. When you transform a Group, its children are treated as a single unit without changing their relative positions.
Creates a new Group item and places it at the top of the active layer.
Example — Create a group containing two paths:
Example — Click in the view to add a path to the group, which in turn is rotated every frame:
Specifies whether the group item is to be clipped.
When setting to true, the first child in the group is automatically defined as the clipping mask.
The unique id of the item.
The name of the item. If the item has a name, it can be accessed by name through its parent's children list.
The path style of the item.
Example — Applying several styles to an item in one go, by passing an object to its style property:
Example — Copying the style of another item:
Example — Applying the same style object to multiple items:
Specifies whether the item is visible. When set to false, the item won't be drawn.
Example — Hiding an item:
The blend mode of the item.
Example — Setting an item's blend mode:
The opacity of the item as a value between 0 and 1.
Example — Making an item 50% transparent:
Specifies whether the item functions as a guide. When set to true, the item will be drawn at the end as a guide.
Specifies whether an item is selected and will also return true if the item is partially selected (groups with some 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.
Example — Selecting an item:
Specifies whether the item defines a clip mask. This can only be set on paths, compound paths, and text frame objects, and only if the item is already contained within a clipping group.
The item that this item is contained within.
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
The children items contained within this item. Items that define a name can also be accessed by name.
Please note: The children array should not be modified directly using array functions. To remove single items from the children list, use item.remove(), to remove all items from the children list, use item.removeChildren(). To add items to the children list, use item.addChild(item) or item.insertChild(index, item).
Example — Accessing items in the children array:
Example — Accessing children by name:
Example — Passing an array of items to item.children:
The first item contained within this item. This is a shortcut for accessing item.children.
The last item contained within this item.This is a shortcut for accessing item.children[item.children.length - 1].
The index of this item within the list of its parent's children.
The width of the stroke.
Example — Setting an item's stroke width:
The shape to be used at the end of open Path items, when they have a stroke.
Example — A look at the different stroke caps:
The shape to be used at the corners of paths when they have a stroke.
Example — A look at the different stroke joins:
The dash offset of the stroke.
Specifies an array containing the dash and gap lengths of the stroke.
The miter limit of the stroke.
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.
Clones the item within the same project and places the copy above the item.
Example — Cloning items:
Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.
Example — Rasterizing an item:
The optional options object allows you to control the specifics of the hit test and may contain a combination of the following values:
tolerance: Number - The tolerance of the hit test in points.
options.fill: Boolean - Hit test the fill of items.
options.stroke: Boolean - Hit test the curves of path items, taking into account stroke width.
options.ends: Boolean - Only hit test for the first or last segment points of open path items.
options.bounds: Boolean - Hit test the corners and side-centers of the bounding rectangle of items (item.bounds).
options.guide: Boolean - Hit test items that have item.guide set to true.
options.selected: Boolean - Only hit selected items.
Adds the specified item as a child of this item at the end of the its children list. You can use this function for groups, compound paths and layers.
Adds the specified items as children of this item at the end of the its children list. You can use this function for groups, compound paths and layers.
Inserts this item above the specified item.
Inserts this item below the specified item.
Inserts the specified item as a child of this item by appending it to the list of children and moving it above all other children. You can use this function for groups, compound paths and layers.
Moves this item above the specified item.
Moves the item below the specified item.
Removes the item from the project. If the item has children, they are also removed.
Removes the children from the specified from index to the to index from the parent's children array.
Reverses the order of the item's children
Checks if the item contains any children items.
Checks if this item is above the specified item in the stacking order of the project.
Checks if the item is below the specified item in the stacking order of the project.
Checks whether the specified item is the parent of the item.
Checks whether the specified item is a child of the item.
Checks if the item is contained within the specified item.
Checks if the item is an ancestor of the specified item.
Checks whether the item is grouped with the specified item.
Translates (moves) the item by the given offset point.
Rotates the item by a given angle around the given point.
Angles are oriented clockwise and measured in degrees.
See also: matrix.rotate
Example — Rotating an item:
Example — Rotating an item around a specific point:
Transform the item so that its bounds fit within the specified rectangle, without changing its aspect ratio.
Example — Fitting an item to the bounding rectangle of another item's bounding rectangle:
Example — Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
Example — Fitting an item to the bounding rectangle of the view
Removes the item when the events specified in the passed object literal occur.
The object literal can contain the following values:
Remove the item when the next tool.onMouseMove event is fired: object.move = true
Remove the item when the next tool.onMouseDrag event is fired: object.drag = true
Remove the item when the next tool.onMouseDown event is fired: object.down = true
Remove the item when the next tool.onMouseUp event is fired: object.up = true
Example — Click and drag below:
Removes the item when the next tool.onMouseMove event is fired.
Example — Move your mouse below:
Removes the item when the next tool.onMouseDown event is fired.
Example — Click a few times below:
Copyright © 2011 Jürg Lehni & Jonathan Puckey. All Rights Reserved.