View

Controls whether the view is automatically updated in the next animation frame on changes, or whether you prefer to manually call update() or requestUpdate() after changes. Note that this is true by default, except for Node.js, where manual updates make more sense.

Type:

• Boolean

The underlying native element.

Read only.

Type:

• HTMLCanvasElement

The project that this view displays.

Read only.

Type:

• Project

The scope that this view belongs to.

Read only.

Type:

• PaperScope

The ratio between physical pixels and device-independent pixels (DIPs) of the underlying canvas / device. It is 1 for normal displays, and 2 or more for high-resolution displays.

Read only.

Type:

• Number

The resolution of the underlying canvas / device in pixel per inch (DPI). It is 72 for normal displays, and 144 for high-resolution displays with a pixel-ratio of 2.

Read only.

Type:

• Number

The size of the view. Changing the view’s size will resize it’s underlying element.

Type:

• Size

The bounds of the currently visible area in project coordinates. Setting them fits the view to the given rectangle, as fitBounds(rectangle) does. Since the view keeps its aspect ratio, the bounds read back can be larger than the rectangle in one direction.

Type:

• Rectangle

The size of the visible area in project coordinates.

Read only.

Type:

• Size

The center of the visible area in project coordinates.

Type:

• Point

The view’s zoom factor by which the project coordinates are magnified. Setting it to a value that isn’t a positive number has no effect.

Type:

• Number

See also:

• scaling

The current rotation angle of the view, as described by its matrix.

Type:

• Number

The current scale factor of the view, as described by its matrix.

Type:

• Point

See also:

• zoom

The view’s transformation matrix, defining the view onto the project’s contents (position, zoom level, rotation, etc).

Type:

• Matrix

Handler function to be called on each frame of an animation. The function receives an event object which contains information about the frame event:

Type:

• Function⟋null

Options:

• event.count: Number — the number of times the frame event was fired
• event.time: Number — the total amount of time passed since the first frame event in seconds
• event.delta: Number — the time passed in seconds since the last frame event

See also:

• item.onFrame

Example:Creating an animation:

Handler function that is called whenever a view is resized.

Type:

• Function⟋null

Example:Repositioning items when a view is resized:

// Create a circle shaped path in the center of the view:
var path = new Path.Circle(view.bounds.center, 30);
path.fillColor = 'red';

view.onResize = function(event) {
    // Whenever the view is resized, move the path to its center:
    path.position = view.center;
}

The function to be called when the mouse button is pushed down on the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onMouseDown

The function to be called when the mouse position changes while the mouse is being dragged over the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onMouseDrag

The function to be called when the mouse button is released over the item. The function receives a MouseEvent object which contains information about the mouse event.

Type:

• Function⟋null

See also:

• item.onMouseUp

The function to be called when the mouse clicks on the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onClick

The function to be called when the mouse double clicks on the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onDoubleClick

The function to be called repeatedly while the mouse moves over the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onMouseMove

The function to be called when the mouse moves over the view. This function will only be called again, once the mouse moved outside of the view first. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• item.onMouseEnter

The function to be called when the mouse moves out of the view. The function receives a MouseEvent object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with event.stopPropagation() or by returning false from a handler.

Type:

• Function⟋null

See also:

• view.onMouseLeave

The function to be called when the user presses a key on the keyboard. The function receives a KeyEvent object which contains information about the keyboard event.

If the function returns false, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.

Type:

• Function⟋null

Example:Scaling a path whenever the user presses the space bar:

The function to be called when the user releases a key on the keyboard. The function receives a KeyEvent object which contains information about the keyboard event.

If the function returns false, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.

Type:

• Function⟋null

Example:

view.onKeyUp = function(event) {
    if (event.key == 'space') {
        console.log('The spacebar was released!');
    }
}

Removes this view from the project and frees the associated element.

Updates the view if there are changes. Note that when using built-in event handlers for interaction, animation and load events, this method is invoked for you automatically at the end.

Parameters:

• force: Boolean — whether to redraw the view even if nothing has changed, e.g. after a web font used by text items has finished loading — optional, default: false

Returns:

• Boolean — true if the view was updated, false otherwise

Requests an update of the view if there are changes through the browser’s requestAnimationFrame() mechanism for smooth animation. Note that when using built-in event handlers for interaction, animation and load events, updates are automatically invoked for you automatically at the end.

Makes all animation play by adding the view to the request animation loop.

Makes all animation pause by removing the view from the request animation loop.

Checks whether the view is currently visible within the current browser viewport.

Returns:

• Boolean — true if the view is visible, false otherwise

Checks whether the view is inserted into the browser DOM.

Returns:

• Boolean — true if the view is inserted, false otherwise

Translates (scrolls) the view by the given offset vector.

Parameters:

• delta: Point — the offset to translate the view by

Rotates the view by a given angle around the given center point.

Angles are oriented clockwise and measured in degrees.

Parameters:

• angle: Number — the rotation angle
• center: Point — optional, default: view.center

See also:

• matrix.rotate(angle[, center])

Scales the view by the given value from its center point, or optionally from a supplied point.

Parameters:

• scale: Number — the scale factor
• center: Point — optional, default: view.center

Scales the view by the given values from its center point, or optionally from a supplied point.

Parameters:

• hor: Number — the horizontal scale factor
• ver: Number — the vertical scale factor
• center: Point — optional, default: view.center

Shears the view by the given value from its center point, or optionally by a supplied point.

Parameters:

• shear: Point — the horizontal and vertical shear factors as a point
• center: Point — optional, default: view.center

See also:

• matrix.shear(shear[, center])

Shears the view by the given values from its center point, or optionally by a supplied point.

Parameters:

• hor: Number — the horizontal shear factor
• ver: Number — the vertical shear factor
• center: Point — optional, default: view.center

See also:

• matrix.shear(hor, ver[, center])

Skews the view by the given angles from its center point, or optionally by a supplied point.

Parameters:

• skew: Point — the horizontal and vertical skew angles in degrees
• center: Point — optional, default: view.center

See also:

• matrix.shear(skew[, center])

Skews the view by the given angles from its center point, or optionally by a supplied point.

Parameters:

• hor: Number — the horizontal skew angle in degrees
• ver: Number — the vertical sskew angle in degrees
• center: Point — optional, default: view.center

See also:

• matrix.shear(hor, ver[, center])

Transform the view.

Parameters:

• matrix: Matrix — the matrix by which the view shall be transformed

Transform the view so that the specified rectangle is centered in it and fitted to it as described by fit, keeping the view’s rotation and mirroring.

Parameters:

• rectangle: Rectangle — the rectangle to fit, in project coordinates
• fit: String — how to fit the rectangle, as in CSS’s object-fit: 'contain' shows all of it, and 'cover' fills the whole view with it, cropping the parts that don’t fit — optional, default: ‘contain’

Example:Fitting the view to the bounds of an item:

Converts the passed point from project coordinate space to view coordinate space, which is measured in browser pixels in relation to the position of the view element.

Parameters:

• point: Point — the point in project coordinates to be converted

Returns:

• Point — the point converted into view coordinates

Converts the passed point from view coordinate space to project coordinate space.

Parameters:

• point: Point — the point in view coordinates to be converted

Returns:

• Point — the point converted into project coordinates

Determines and returns the event location in project coordinate space.

Parameters:

• event: Event — the native event object for which to determine the location.

Returns:

• Point — the event point in project coordinates.

Attach an event handler to the view.

Parameters:

• type: String — the type of event: ‘frame’, ‘resize’, ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘click’, ‘doubleclick’, ‘mousemove’, ‘mouseenter’, ‘mouseleave’
• function: Function — the function to be called when the event occurs, receiving a MouseEvent or Event object as its sole argument

Returns:

• View — this view itself, so calls can be chained

Example:Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}

Attach one or more event handlers to the view.

Parameters:

• param: Object — an object literal containing one or more of the following properties: frame, resize

Returns:

• View — this view itself, so calls can be chained

Example:Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}

Detach an event handler from the view.

Parameters:

• type: String — the event type: ‘frame’, ‘resize’, ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘click’, ‘doubleclick’, ‘mousemove’, ‘mouseenter’, ‘mouseleave’
• function: Function — the function to be detached

Returns:

• View — this view itself, so calls can be chained

Example:Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}

Detach one or more event handlers from the view.

Parameters:

• param: Object — an object literal containing one or more of the following properties: frame, resize

Returns:

• View — this view itself, so calls can be chained

Emit an event on the view.

Parameters:

• type: String — the event type: ‘frame’, ‘resize’, ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘click’, ‘doubleclick’, ‘mousemove’, ‘mouseenter’, ‘mouseleave’
• event: Object — an object literal containing properties describing the event

Returns:

• Boolean — true if the event had listeners, false otherwise

Check if the view has one or more event handlers of the specified type.

Parameters:

• type: String — the event type: ‘frame’, ‘resize’, ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘click’, ‘doubleclick’, ‘mousemove’, ‘mouseenter’, ‘mouseleave’

Returns:

• Boolean — true if the view has one or more event handlers of the specified type, false otherwise

Handles a mouse event that the host provides, for hosts without a DOM, such as workers, or with their own event source. It runs the same handling as the DOM’s mouse events: the active tool’s handlers, with tool.minDistance and the like, then those of the items under the point and of the view, including the events that Paper.js derives itself: 'mousedrag', 'click', 'doubleclick', 'mouseenter' and 'mouseleave'. Points outside the view’s bounds are handled too, since the host decides which events belong to its drawing surface.

Options:

• [options.modifiers] {Object} the state of the modifier keys, see {@link Key#modifiers}
• options.button: Number — the mouse button — default: 0
• options.time: Number — the time of the event in seconds, see event.time — default: Date.now() / 1000

Parameters:

• type: String — the type of the event: ‘mousedown’, ‘mousemove’, ‘mouseup’
• point: Point — the location of the mouse in project coordinates
• options: Object — the details of the event — optional

Returns:

• Boolean — true if a handler prevented the event’s default, false otherwise

Handles a key event that the host provides, for hosts without a DOM, such as workers, or with their own event source. It updates Key#modifiers and Key#isDown(key), and calls the view’s and the active tool’s handlers, as the DOM’s key events do.

Options:

• [options.character] {String} the character that the key produces. By default, keydown takes the key itself if it is a single character, the space, carriage return and tab characters for 'space', 'enter' and 'tab', and keyup the character of its keydown
• [options.modifiers] {Object} the state of the modifier keys, see {@link Key#modifiers}
• options.time: Number — the time of the event in seconds, see event.time — default: Date.now() / 1000

Parameters:

• type: String — the type of the event: ‘keydown’, ‘keyup’
• key: String — the key, as in keyEvent.key
• options: Object — the details of the event — optional