new Viewport(canvas)
Viewport defines the user view into the content being rendered, similar to a camera it defines the size of the content, rotation and position of the content.
The viewport can be moved, rotated and scaled to navigate the virtual canvas.
Parameters:
| Name | Type | Description |
|---|---|---|
canvas |
Element | Canvas DOM element where the viewport is being rendered. |
- Source:
Members
canvas :Element
Canvas DOM element where the viewport is being rendered.
Type:
- Element
- Source:
center :Vector2
Center point of the viewport. Relative to the size of the canvas.
Rotation and zoom is applied relative to this point.
Type:
- Source:
centerOnPointer
Flag to indicate if the viewport should move when scaling.
For some application its easier to focus the target if the viewport moves to the pointer location while scaling.
- Source:
inverseMatrix :Matrix
Inverse of the local transformation matrix.
Used to transform points from local to global coordinates.
Type:
- Source:
matrix :Matrix
Local transformation matrix applied to the object.
Type:
- Source:
matrixNeedsUpdate :boolean
If true the matrix is updated before rendering the object.
Disable this if you want to update the matrix manually.
Type:
- boolean
- Source:
position :Vector2
Position of the viewport.
Type:
- Source:
rotation :number
Rotation of the object relative to its center.
Type:
- number
- Source:
rotationPoint
Value of the initial point of rotation if the viewport is being rotated.
Is set to null when the viewport is not being rotated.
- Source:
scale :number
Scale of the object.
Type:
- number
- Source:
uuid :string
UUID of the object.
Type:
- string
- Source:
Methods
centerObject(object, canvas)
Center the viewport relative to a object.
The position of the object is used a central point, this method does not consider "box" attributes or other strucures in the object.
Uses the object's local transformation matrix and the canvas size to calculate the new position of the viewport.
Parameters:
| Name | Type | Description |
|---|---|---|
object |
Object2D | Object to be centered on the viewport. |
canvas |
Element | Canvas element where the image is drawn. |
- Source:
updateMatrix()
Calculate and update the viewport transformation matrix.
Also updates the inverse matrix of the viewport.
- Source: