Docs - Chillin

Overview

Element

Basic Element

View Element

Effect

Crop Mask

Prop	Type	Required	Example	Value Range	Description
type	string	true	-	crop \| ellipse	The type of mask, such as "crop" or "ellipse".
centerX	number	true	-	-	The horizontal position of the mask center, in pixels.
centerY	number	true	-	-	The vertical position of the mask center, in pixels.
width	number	true	-	-	The width of the mask, in pixels.
height	number	true	-	-	The height of the mask, in pixels.

imageElement.json

{
    "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
    "type": "Image",
    "start": 0,
    "duration": 5,
    "trackIndex": 0,
    "x": -58.59302855661144,
    "y": 48.394393104046685,
    "blendMode": "normal",
    "anchorX": 1051.1350332909515,
    "anchorY": 2519.1996978825114,
    "rotation": 0,
    "maskData": {
        "type": "crop",
        "centerX": 1051.1350332909515,
        "centerY": 2519.1996978825114,
        "width": 2121.862754282655,
        "height": 2949.902587890625
    },
    "scaleX": 0.23356401384083045,
    "scaleY": 0.23356401384083045,
    "alpha": 1,
    "skewX": 0,
    "skewY": 0,
    "keyframes": [],
    "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
    "ext": "jpeg"
}

Shape Mask

Prop	Type	Required	Example	Value Range	Description
type	string	true	-	crop \| ellipse	The type of mask, such as "crop" or "ellipse".
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	The type of shape, such as "rect" or "ellipse".
x	number	true	-	-	The horizontal position of the mask, in pixels.
y	number	true	-	-	The vertical position of the mask, in pixels.
scaleX	number	true	-	-	The horizontal scale of the mask.
scaleY	number	true	-	-	The vertical scale of the mask.
rotation	number	true	-	-	The rotation of the mask, in degrees.
width	number	true	-	-	The width of the mask, in pixels.
height	number	true	-	-	The height of the mask, in pixels.
fill	string	true	-	-	The fill color of the mask, in hexadecimal format.
view	object	true	-	-	The view of the mask.

imageElement.json

{
    "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
    "type": "Image",
    "start": 0,
    "duration": 5,
    "trackIndex": 0,
    "x": -58.59302855661144,
    "y": 48.394393104046685,
    "blendMode": "normal",
    "anchorX": 1051.1350332909515,
    "anchorY": 2519.1996978825114,
    "rotation": 0,
    "maskData": {
        "type": "shape",
        "shapeType": "SHAPE_ELLIPSE",
        "x": 1935.8609161703698,
        "y": 2120.7135441063306,
        "scaleX": 1,
        "scaleY": 1,
        "rotation": 0,
        "width": 2604,
        "height": 2604,
        "fill": "#ffffff",
        "view": {
            "scaleX": 1,
            "scaleY": 1,
            "x": 0,
            "y": 0,
            "width": 2604,
            "height": 2604,
            "rotation": 0,
            "anchorX": 0,
            "anchorY": 0
        }
    },
    "scaleX": 0.23356401384083045,
    "scaleY": 0.23356401384083045,
    "alpha": 1,
    "skewX": 0,
    "skewY": 0,
    "keyframes": [],
    "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
    "ext": "jpeg",
}