Noiseless Praying Mantis

    yy-viewport

    1.2.1 • Public • Published

    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

    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

    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

    Keywords

    none

    Install

    npm i yy-viewport

    DownloadsWeekly Downloads

    0

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • davidfig