yy-viewport v1.2.1

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)

viewport.view(width, height, center)

Change view window for viewport

Kind: instance method of Viewport

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

viewport.moveTo(x, y)

moves the center of the viewport to a specific coordinate

Kind: instance method of Viewport

viewport.moveTopLeft(x, y)

moves the top-left of the viewport to a specific coordinate

Kind: instance method of Viewport

viewport.zoom(zoomDelta, center)

changes zoom by zoomDelta; height is changed based on aspect ratio

Kind: instance method of Viewport

viewport.zoomPinch(x, y, amount, min, max, center)

pinch to zoom

Kind: instance method of Viewport

viewport.zoomTo(zoomX, zoomY, center)

zooms to a specific value

Kind: instance method of Viewport

viewport.zoomToFit(width, height, center)

Kind: instance method of Viewport

viewport.zoomPercent(percent, center)

zoom by a percentage of the current zoom

Kind: instance method of Viewport

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

viewport.toWorldFromScreen(x, y) ⇒ object

transform a world coordinate to a screen coordinate

Kind: instance method of Viewport
Returns: object - x, y

viewport.toScreenFromWorld(world) ⇒ object

transform a world coordinate to a screen coordinate

Kind: instance method of Viewport
Returns: object - x, y

viewport.toScreenSize(original) ⇒

Transform a number from view size to screen size

Kind: instance method of Viewport
Returns: number

viewport.toWorldSize(original) ⇒ number

Transform a number from screen size to view size

Kind: instance method of Viewport

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

viewport.screenYtoX(y) ⇒ number

converts a y value to an x value in the screen coordinates

Kind: instance method of Viewport

viewport.scaleGet() ⇒ number

Kind: instance method of Viewport
Returns: number - scale

Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown