figureone
    Preparing search index...

    Figure API Reference

    Figure Element base class

    The set of properties and methods shared by all figure elements

    A figure element has several color related properties. Color is defined as an RGBA array with values between 0 and 1. The alpha channel defines the transparency or opacity of the color where 1 is fully opaque and 0 is fully transparent.

    The color property stores the element's current color, while the defaultColor property stores the element's color when not dimmed or dissolving. Color should only be set using the setColor method.

    An element can be "dimmed" or "undimmed". For instance, a red element might turn grey when dimmed. The property dimColor stores the desired color to dim to and should be set with setDimColor()

    An element can be dissolved in or out with animation. Dissolving an element out transitions its opacity from its current value to 0. The opacity property is used when dissolving. The opacity is multiplied by the alpha channel of color to net a final opacity. Opacity should not be set directly as it will be overwritten by dissolve animations.

    Notifications - The notification manager property notifications will publish the following events:

    • beforeSetTransform: published just before the transform property is changed
    • setTransform: published whenever the transform property is changed
    • startBeingMoved: published when the element starts being moved by touch
    • stopBeingMoved: published when the element stops being moved by touch
    • startMovingFreely
    • stopMovingFreely
    • show: published when element is shown
    • hide: published when element is hidden
    • visibility: published when element element is shown or hidden
    • onClick: published when element is clicked on
    • color: published whenever color is set
    • beforeDraw
    • afterDraw
    • setState: state of element has been set

    @class

    • name: string

      reference name of element

    • isShown: boolean

      if false then element will not be processed on next draw

    • transform: Transform

      transform to apply element

    • lastDrawTransform: Transform

      transform last used for drawing - includes cascade or all parent transforms

    • parent: FigureElement | null

      parent figure element - null if at top level of figure

    • isTouchable: boolean

      must be true to move or execute onClick

    • isMovable: boolean

      must be true to move

    • onClick: string | () => void

      callback if touched or clicked

    • color: [number, number, number, number]

      element's current color defined as red, green, blue, alpha with range 0 to 1

    • dimColor: [number, number, number, number]

      color to use when dimming element

    • defaultColor: [number, number, number, number]

      color to go to when undimming element

    • opacity: number

      number between 0 and 1 that is multiplied with color alpha channel to get final opacity

    • move: OBJ_ElementMove

      movement parameters

    • scenarios: OBJ_Scenarios

      scenario presets

    • state: ElementState

      current state of element

    • animations: AnimationManager

      element animation manager

    • notifications: NotificationManager

      notification manager for element

    • fnMap: FunctionMap

      function map for use with Recorder

    • customState: Object

      put any custom state information that needs to be captured with recorder here - only stringify-able values can go in this object like strings, numbers, booleans and nested arrays or objects containing these. Functions should not be put in here - use string identifiers to fnMap if functions are needed.

    Extends FigureElement

    Primitive figure element

    A primitive figure element is one that handles an object (drawingObject) that draws to the screen. This object may be a GLObject, a TextObject or a HTMLObject.

    @class

    Extends FigureElement

    Collection figure element

    A collection manages a number of children FigureElements, be they primitives or collections.

    A collection's transform will be passed onto all the children elements.

    @class

    Figure options object

    • htmlId: string | undefined = "figureOneContainer"

      HTML div tag id to tie figure to

    • scene: OBJ_Scene | TypeParsableRect | undefined

      define 2D or 3D scene. 3D can be orthographic or perspective projection, and include camera position and lighting definition. A 2D scene can be defined using left, right, bottom and top, or the short hand rectangle definition.

    • color: TypeColor | undefined = [0, 0, 0, 1]

      default shape color

    • font: OBJ_Font | undefined = { family: 'Helvetica, size: 0.2, style: 'normal', weight: 'normal' }

      default shape font

    • lineWidth: number | undefined

      default shape line width

    • length: number | undefined

      default shape primary dimension

    • backgroundColor: TypeColor | undefined

      background color for the figure. Use [r, g, b, 1] for opaque and [0, 0, 0, 0] for transparent.

    Primary Figure class.

    A figure will attach a WebGL canvas and 2D canvas to the html div element with id "figureOneContainer".

    The figure creates and manages all drawing elements, renders the drawing elements on a browser's animation frames and listens for guestures from the user.

    The figure also has a recorder, allowing it to record and playback states, and gestures.

    To attach to a different div, use the htmlId property in the class constructor.

    If a figure is paused, then all drawing element animations will also be paused.

    Figure has a number of convenience methods for creating drawing elements and useful transforms for converting between the different spaces (e.g. pixel, GL, figure).

    Notifications - The notification manager property notifications will publish the following events:

    • beforeDraw: published before a frame is drawn
    • afterDraw: published after a frame is drawn
    • resize: published after a resize event, but before frame drawing

    @class

    • primitives: FigurePrimitives

      create figure primitives such as shapes, lines and grids

    • collections: FigureCollections

      create figure collections such as advanced lines, shapes, equations and plots

    • notifications: NotificationManager

      notification manager for element

    • fonts: FontManager

      watches and reports on font availability

    // hexagon.
    //
    // For additional examples, see https://github.com/airladon/FigureOne
    //
    // Two files `index.html` and `index.js` in the same directory

    // index.html
    <!doctype html>
    <html>
    <body>
        <div id="figureOneContainer" style="width: 800px; height: 800px; background-color: white;">
        </div>
        <script type="text/javascript" src='https://cdn.jsdelivr.net/npm figureone@0.15.10/figureone.min.js'></script>
        <script type="text/javascript" src='./index.js'></script>
    </body>
    </html>

    // index.js
    const figure = new Fig.Figure({ scene: [-1, -1, 1, 1 ]});
    figure.add(
      {
        name: 'p',
        make: 'polygon',
        radius: 0.5,
        sides: 6,
      },
    );

    // index.js
    const figure = new Fig.Figure({ scene: [-1, -1, 1, 1 ]});
    const hex = figure.shapes.polygon({
      radius: 0.5,
      sides: 6,
    });
    figure.add('hexagon', hex);

    Settings

    Member Visibility

    On This Page

    Figure API Reference