I2Djs-v3
  • Introduction to I2Djs
  • Getting Started
    • Installation
    • Quick Start
    • Resources
  • Guide
    • Canvas: Create-animate
    • SVG: Create-animate
    • WebGL: Create-animate
    • Data Join-Action
    • Animation-Chaining
    • Canvas: Textures & Sprite animation
    • Canvas: Heatmap
    • WebGL: Heatmap
    • WebGL: Custom Shaders
    • Canvas: GeoWorld Map with D3 modules
    • Canvas: Clipping, Masking, Pattern
    • SVG: Clipping, Masking, Pattern
    • I2Djs + Physics Engine - MatterJs
  • API Reference
    • Layers
      • Canvas Layer
      • SVG Layer
      • WebGL Layer
    • Elements API
    • Canvas additional features
    • WebGL additional features
      • Custom Shader
      • Geometry
      • Render Target
      • Texture Object
    • Join Action
    • Animation
    • Chaining
    • Path
    • Events
    • Behaviour
      • Zoom and Pan
      • Drag
  • Examples
    • Canvas
    • SVG
    • WebGL
Powered by GitBook
On this page
  • Layer API:
  • Layer Methods:

Was this helpful?

  1. API Reference
  2. Layers

WebGL Layer

Layer API:

#.webglLayer( #containerId, contextAttrObj, Layersettings );

webglLayer API returns rendering instance of WebGL-2D context. It accepts arguments the same as CanvasLayer API.

Example:

var webglLayer = i2d.webglLayer('#containerId', {
    premultiplieAlpha: false,
    depth: false
}, {
    autoUpdate: true
})
  • containerID :- CSS ID selector which uniquely identifies the container in which the Canvas element will be rendered.

  • contextAttrObject :- Canvas context attributes, which will be passed to the getContext method.

  • SettingsObj - Object with below settings.

    • enableEvents - Boolean - Flag to enable/disable events for the rendered layer. Default is False

    • enableResize - Boolean - Flag to enable/disable window resize event. If it is disabled, the layer won't be resized on the container resize. Default is True.

    • autoUpdate - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke layerInstance.update() to manually render the changes to the DOM.

Layer Methods:

Layer.setLayerId ( String ) - For setting ID attribute to the Layer Dom element.

Layer.setClear( function ); - To set clear callback method. Accepts function as an input, which gets invoked on every refreshCycle before render begins. The Clear function gets context as an argument.

Layer.setClearColor ( Color );

Layer.setAttr ( attr, value ); - To set attributes to the layer Dom Element.

Layer.setStyle ( prop, value ); - To set style properties to the layer Dom Element.

Layer.SetPixelRation ( Int ); - To set device Pixel ratio.

Layer.SetSize ( width, height ); - Optional - To set the Size of the canvas layer. If not, the parent container size will be inherited by the layer.

Layer.enableEvents ( Boolean );

Layer.getPixels ( x, y, width, height ); - To fetch pixels from the specified rectangle area of the canvas layer. It returns ImageData object.

Layer.putPixels ( imageData, x, y); - To paint pixels to the canvas. It accepts ImageData along with position x, y as an argument.

Layer.clear ( );

Layer.setContext ( prop, value ); - To set properties to the WebGL context.

Layer.update ( ); - API to manually trigger the Layer update. In the case of the default behavior, all the changes from VDOM will be applied to the DOM as a part of the refresh cycle.

Layer.destroy ( ); - To remove layer instance. It removes the DOM element along with the vDOM. and also unbinds all the event listeners if any.

Layer.MeshGeometry (); -

Layer.PointsGeometry ();

Layer.LineGeometry ();

Layer.TextureObject ();

Layer.RenderTarget ();

PreviousSVG LayerNextElements API

Last updated 4 years ago

Was this helpful?