viewport.js
a 2D camera (viewport) designed to work with PIXI.js
Code Example
// create a renderer
renderer = new Renderer({color: 'rgba(0, 0, 0, 0.25)'});
// create the viewport
var viewport = new Viewport(renderer, 1000, 1000);
// move the center
viewport.moveTo(500, 500);
// zoom in
viewport.zoom(500);
Installation
npm install yy-viewport
Example
https://davidfig.github.io/viewport/
see also
- https://davidfig.github.io/debug/
- https://davidfig.github.io/update/
- https://davidfig.github.io/animate/
- https://davidfig.github.io/renderer/
API Reference
Viewport
creates a zoomable and moveable window into a scene renderer is of type github.com/davidfig/renderer stage is optional and taken from renderer if not specified
Kind: global class
- Viewport
- new Viewport(renderer, width, height, stage)
- .view(width, height, [center])
- .resize()
- .move(deltaX, deltaY)
- .moveTo(x, y)
- .moveTopLeft(x, y)
- .zoom(zoomDelta, [center])
- .zoomPinch(x, y, amount, min, max, [center])
- .zoomTo(zoomX, zoomY, [center])
- .zoomToFit(width, height, [center])
- .zoomPercent(percent, [center])
- .fitX()
- .fitY()
- .fit()
- .heightTo(height)
- .toWorldFromScreen(x, y) ⇒
object - .toScreenFromWorld(world) ⇒
object - .toScreenSize(original) ⇒
- .toWorldSize(original) ⇒
number - .screenHeightInWorld() ⇒
number - .screenWidthInWorld() ⇒
number - .screenXtoY(x) ⇒
number - .screenYtoX(y) ⇒
number - .scaleGet() ⇒
number
new Viewport(renderer, width, height, stage)
| Param | Type | Description |
|---|---|---|
| renderer | Renderer |
from yy-renderer |
| width | number |
|
| height | number |
|
| stage | PIXI.Container |
viewport.view(width, height, [center])
Change view window for viewport
Kind: instance method of Viewport
| Param | Type |
|---|---|
| width | number |
| height | number |
| [center] | PIXI.Point |
viewport.resize()
resizes view based on renderer.width
Kind: instance method of Viewport
viewport.move(deltaX, deltaY)
moves the viewport using a delta (not absolute)
Kind: instance method of Viewport
| Param | Type |
|---|---|
| deltaX | number |
| deltaY | number |
viewport.moveTo(x, y)
moves the center of the viewport to a specific coordinate
Kind: instance method of Viewport
| Param | Type |
|---|---|
| x | number | PIXI.Point |
| y | number |
viewport.moveTopLeft(x, y)
moves the top-left of the viewport to a specific coordinate
Kind: instance method of Viewport
| Param | Type |
|---|---|
| x | number |
| y | number |
viewport.zoom(zoomDelta, [center])
changes zoom by zoomDelta; height is changed based on aspect ratio
Kind: instance method of Viewport
| Param | Type |
|---|---|
| zoomDelta | number |
| [center] | PIXI.Point |
viewport.zoomPinch(x, y, amount, min, max, [center])
pinch to zoom
Kind: instance method of Viewport
| Param | Type | Description |
|---|---|---|
| x | number |
in screen coordinates |
| y | number |
in screen coordinates |
| amount | number |
|
| min | number |
world coordinate |
| max | number |
in world coordinates |
| [center] | PIXI.Point |
viewport.zoomTo(zoomX, zoomY, [center])
zooms to a specific value
Kind: instance method of Viewport
| Param | Type | Description |
|---|---|---|
| zoomX | number |
if === 0 then zoomY is used |
| zoomY | number |
only used if zoomX is set to 0 |
| [center] | PIXI.Point |
viewport.zoomToFit(width, height, [center])
Kind: instance method of Viewport
| Param | Type |
|---|---|
| width | number |
| height | number |
| [center] | PIXI.Point |
viewport.zoomPercent(percent, [center])
zoom by a percentage of the current zoom
Kind: instance method of Viewport
| Param | Type |
|---|---|
| percent | number |
| [center] | PIXI.Point |
viewport.fitX()
fit entire stage _width on screen
Kind: instance method of Viewport
viewport.fitY()
fit entire stage _height on screen
Kind: instance method of Viewport
viewport.fit()
fit entire stage on screen
Kind: instance method of Viewport
viewport.heightTo(height)
change _height of view area
Kind: instance method of Viewport
| Param | Type |
|---|---|
| height | width |
viewport.toWorldFromScreen(x, y) ⇒ object
transform a world coordinate to a screen coordinate
Kind: instance method of Viewport
Returns: object - x, y
| Param | Type |
|---|---|
| x | number | PIXI.Point |
| y | number |
viewport.toScreenFromWorld(world) ⇒ object
transform a world coordinate to a screen coordinate
Kind: instance method of Viewport
Returns: object - x, y
| Param | Type |
|---|---|
| world | PIXI.Point |
viewport.toScreenSize(original) ⇒
Transform a number from view size to screen size
Kind: instance method of Viewport
Returns: number
| Param | Type |
|---|---|
| original | number |
viewport.toWorldSize(original) ⇒ number
Transform a number from screen size to view size
Kind: instance method of Viewport
| Param | Type |
|---|---|
| original | number |
viewport.screenHeightInWorld() ⇒ number
Kind: instance method of Viewport
Returns: number - screen _height in the world coordinate system
viewport.screenWidthInWorld() ⇒ number
Kind: instance method of Viewport
Returns: number - screen _width in the world coordinate system
viewport.screenXtoY(x) ⇒ number
converts an x value to a y value in the screen coordinates
Kind: instance method of Viewport
| Param | Type |
|---|---|
| x | number |
viewport.screenYtoX(y) ⇒ number
converts a y value to an x value in the screen coordinates
Kind: instance method of Viewport
| Param | Type |
|---|---|
| y | number |
viewport.scaleGet() ⇒ number
Kind: instance method of Viewport
Returns: number - scale
Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown