Layers

A layer is a rectangle that draws elements. Layers can display images, videos or text. Every layer inherits a set of default properties: width, height and a blue background.

# Create a layer 
layerA = new Layer
    x: 0y: 0width: 100height: 100
Properties

A layers position, size and looks are defined by its properties. Besides being able to define an image, background, or video, you can also transform, hide layers, scale layers and more.

layerB = new Layer
    backgroundColor: "#2DD7AA",
    width: 60height: 60,
    scale: 1borderRadius: 3

You can also define and override properties after having created a layer.

layerB.borderRadius = 3
layerB.rotation = 45
layerB.opacity = 0.8
layerB.scale = 0.8
Positioning

A layer can be positioned with its x and y properties. These values define the distance from the top-left corner of the canvas. The minX, minY, midX, midY, maxX and maxY values can also be used to position a layer.

# Properties of layerA 
# x:40, y:40, width:80 
 
layerB.x = layerA.x     # 40 
layerB.x = layerA.minX  # 40 
layerB.x = layerA.maxX  # 120 

The distance from the top-left corner of the canvas to the center of a layer can be calculated with midX and midY.

# The x value of the center 
layerB.x = layerA.midX  # 80 
 
# The y value of the center 
layerB.y = layerA.midY  # 80 

You can center a layer within its superLayer (see Hierarchy), or on the screen by calling the center() function. Layers can also be exclusively centered horizontally or vertically.

# Center 
layerA.center()
 
# Center horizontally 
layerA.centerX()
 
# Center vertically 
layerA.centerY()
Hierarchy

Layers can have a parent and/or children. Parent layers are called superLayers, and child layers are called subLayers. Layers inherit properties from their superLayers.

# Two ways to define hierarchy 
layerB.superLayer = layerA
layerA.addSubLayer(layerB)
Layer types

Layers can contain images, videos and text.

# Layer with image 
layerA = new Layer
    image:"image.png"
# Layer with video 
layerA = new VideoLayer
    video: "video.mp4"
# Layer with HTML 
layerA = new Layer
layerA.html ="Hello"
Summary
  • Layers are defined by properties
  • Layers have hierarchy and inherit properties from their parents
  • Layers can be transformed, scaled, masked, rotated and more
  • Layers can contain images, videos and text