genie

Genie Developer Hub

Welcome to the genie developer hub. You'll find comprehensive guides and documentation to help you start working with genie as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

Object Rotation

Any object that has a position defined with x and y coordinates and size with specified widthand height can be rotated about its axes.
The rotate property should be a JSON object with the axis & rotateBy properties defined -

axis - The axis about which the object is to be rotated.
Possible values:

  • center [ Defaults to center]
  • top-left
  • top-right
  • bottom-left
  • bottom-right

rotateBy - The angle by which the object should be rotated.
Possible values:

Any integer between -360 to 360 degrees is valid. [ Defaults to 0 ]
Positive values rotate the object clockwise about the axis and negative values rotate the object counter-clockwise about the axis.

Here's a sample shot you could play around with -
Centre (default), rotated by 60 degrees.

{
  "duration": 1000,
  "objects": [
    {
      "comment": "Background Layer",
      "opacity": 1,
      "kind": "rectangle",
      "scale": 1,
      "color": "#1EDDE2",
      "position": {
        "x": 0,
        "y": 0
      },
      "type": "shape",
      "size": {
        "h": 300,
        "w": 300
      }
    },
    {
      "comment": "background",
      "kind": "rectangle",
      "color": "gray",
      "cap": "round",
      "stroke": {
        "color": "#000080",
        "width": 10
      },
      "fill": "transparent",
      "position": {
        "y": 100,
        "x": 100
      },
      "rotate": {
        "rotateBy": -60,
      },
      "type": "shape",
      "size": {
        "h": 100,
        "w": 100
      }
    }
  ],
  "size": {
    "h": 300,
    "w": 300
  }
}

This shows how rotateBy and axis cause changes:

rotate by the centre, -60 degrees

rotate by top-left , -60 degrees

rotate by the bottom right, +30 degrees

Updated 11 months ago



Object Rotation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.