The overlap Element

The overlap displays two images that overlap. The image in the foreground is displayed in front of the other image.

{
    "type": "overlap",
    "tags": array<string>,
    "version": string,
    "foreground": string,
    "foreground_size": {
        "width": number,
        "height": number
    },
    "background": string,
    "background_size": {
        "width": number,
        "height": number
    },
    "margin": {
        "x": number,
        "y": number
    }
}

foreground String, always present, since v1.0.0

The foreground property contains the image which is on top of the other image (which is specified in the background property). The foreground image should be displayed slightly smaller and on top of the background image.

The image data is base64 encoded.

foreground_size Object, always present, since v1.0.0

The foreground_size property describes the dimensions of the foreground image.

foreground_size.width Number, always present, since v1.0.0

The width property specifies the width of the foreground image.

foreground_size.height Number, always present, since v1.0.0

The height property specifies the height of the foreground image.

background String, always present, since v1.0.0

The background peroperty contains the image which is displayed behind the other image (which is specified in the foreground property).

The image data is base64 encoded.

background_size Object, always present, since v1.0.0

The background_size property describes the dimensions of the background image.

background_size.width Number, always present, since v1.0.0

The width property specifies the width of the background image.

background_size.height Number, always present, since v1.0.0

The height property specifies the height of the background image.

margin Object, always present, since v1.0.0

The margin property describes the position of the foreground image in relation to the background image.

Overlap margin diagram

margin.x Number, always present, since v1.0.0

The margin.x property describes the margin between the left edge of the background image and the left edge of the foreground image.

margin.y Number, always present, since v1.0.0

The margin.y property describes the margin between the top edge of the background image and the top edge of the foreground image.

Example

{
    "type": "overlap",
    "tags": [],
    "version": "1.0.0",
    "background": "data:image/png;base64,...",
    "background_size": {
     "width": 200,
     "height": 200
    },
    "foreground": "data:image/png;base64,...",
    "foreground_size": {
     "width": 100,
     "height": 100
    },
    "margin": {
    "x": 50,
    "y": 50
    }
}

Changelog


1.0.0 - 01.02.2019

  • initial version

results matching ""

    No results matching ""