Layer Mask attribute¶

class Mask¶

If specified, this attribute will define a bump mask. This value can only be 1 layer with an optional invert attribute. Any transparent part of the mask layer will be removed from the current layer for which the mask is defined.

This attribute that can be used as a cropping mechanism.

Meaning of a mask layer’s Size and Offset

Where “current layer” is the layer in which the mask attribute is set:

• The mask layer’s offset is relative the current layer’s offset.

• The resulting mask layer’s size (after rendering) is expanded or cropped to the current layer’s size.

Text as a mask Text as a layer Rectangle as a mask Rectangle as a layer

my-layout.yml¶

layers:
  - background: { color: "#4051B2" }
  - background: { image: images/rainbow.png }
    mask:
      typography:
        content: This string was used as a mask.
        line:
          height: 1.2
          amount: 3
        align: center

my-layout.yml¶

layers:
  - background: { color: "#4051B2" }
  - typography:
      content: This string was used as a mask.
      line:
        height: 1.2
        amount: 3
      align: center

my-layout.yml¶

layers:
  - background: { color: "#4051B2" }
  - background: { image: images/rainbow.png }
    mask:
      size: { width: 600, height: 315 }
      offset: { x: 300, y: 158 }
      rectangle:
        color: '#FFFFFF3F' # a transparent color
        radius: 100
        border:
          width: 50
          color: white

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - size: { width: 600, height: 315 }
    offset: { x: 300, y: 158 }
    rectangle:
      color: '#FFFFFF3F' # a transparent color
      radius: 100
      border:
        width: 50
        color: white

invert : bool¶

Use this bool attribute to cause the mask layer’s transparency to become inverted. This is only useful if excluding pixels from the layer’s image is desired.

Excluding an image Excluding with negative offset Excluding with same offset Excluding with positive offset

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  # this red background is drawn to prove the transparency of the mask
  - background: { color: red }
    offset: { x: 600 }
  - size: { width: 200, height: 200 }
    offset: { x: 500, y: 215 }
    rectangle:
      color: green
      radius: 50
    mask:
      invert: true
      size: { width: 150, height: 150 }
      offset: { x: 25, y: 25 }
      icon: { image: 'sphinx_logo' }

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - background: { color: white }
    offset: { x: 450, y: 150 }
    size: { width: 300, height: 300 }
    mask:
      invert: true
      size: { width: 300, height: 300 }
      offset: { x: -150 }
      ellipse: { color: '#0000003f' }

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - background: { color: white }
    offset: { x: 450, y: 150 }
    size: { width: 300, height: 300 }
    mask:
      invert: true
      size: { width: 300, height: 300 }
      
      ellipse: { color: '#0000003f' }

my-layout.yml¶

layers:
  - background: { color: '#4051B2' }
  - background: { color: white }
    offset: { x: 450, y: 150 }
    size: { width: 300, height: 300 }
    mask:
      invert: true
      size: { width: 300, height: 300 }
      offset: { x: 150 }
      ellipse: { color: '#0000003f' }