How transform works?

Developer
4

Hi @Amerehei,

I know the difference between boundingBox and transform can be a little confusing, but I will explain.

You can also check out the article for changing the display size of of elements.

Simple definitions:

  • transform: used to SET the width/height, x/y, scale and rotation of an element in mutations, but are also returned from query
  • boundingBox: used to QUERY width/height and location x/y of an element on screen, you can only change the element’s boundingBox by using transform to change width/height, scale, or rotation

If scale is 1 and there is no rotation of an element, the boundingBox and transform should always be the same. If scale is used, or if you change to origin point, transform x/y will not be the same as boundingBox x/y. If you have seen any times the boundingBox and transform x/y are not the same without rotation or changing origin, please let me know.

Why is boundingBox x/y not always equal to transform x/y or element width/height?

  1. rotation has been applied to an element.
  • when rotation is applied to an element, it is rotated on the rotation origin, and the transform x/y is the location of the origin (by default anchor is top-left)
  • boundingBox x/y is the top-left most area of the rotated shape, and width/height is the number of pixels used to display the rotated shape

For example

image
image1762×1404 67.1 KB

The query of this this rotated shape element with transfer.origin top-left and x/y = 0 and bounding box is the area around the rotated shape (the orange box in the diagram):

{
    "data": {
        "elements": [
            {
                "__typename": "Shape",
                "id": "651d624ad588d86e98d1ec73",
                "transform": {
                    "x": 0,
                    "y": 0,
                    "rotateZ": -45,
                    "scaleX": 1,
                    "scaleY": 1,
                    "origin": {
                        "anchor": "TopLeft",
                        "point": null
                    }
                },
                "boundingBox": {
                    "x": -106.06601717798213,
                    "y": -1.7798214457798167e-7,
                    "width": 212.13203435596427,
                    "height": 212.13203435596427
                },
                "shapeText": "rotation",
                "style": {
                    "width": 150,
                    "height": 150
                }
            }
        ]
    }
}
  1. When an image has been scaled, the boundingBox width/height will not match the image.width/height. The image.height and image.width are the actual dimensions of the shape, and do not change. If scale=1, the image width/height will match the boundingBox width/height. If scale is applied, then boundingBox width/height is calculated by multiplying image width/heigh times scale.

For example

  • image without scale applied - note image width/heigh and boundingBox width/height are both 1024:
{
    "data": {
        "elements": [
            {
                "__typename": "Image",
                "id": "651d40fec91b8fe35b0e168d",
                "transform": {
                    "x": -1882.9389970541738,
                    "y": 576.1680572349469,
                    "rotateZ": 0,
                    "scaleX": 1,
                    "scaleY": 1,
                    "origin": {
                        "anchor": "TopLeft",
                        "point": null
                    }
                },
                "boundingBox": {
                    "x": -1882.9389970541738,
                    "y": 576.1680572349469,
                    "width": 1024,
                    "height": 1024
                },
                "width": 1024,
                "height": 1024
            }
        ]
    }
}
  • image with scale applied - not the difference between image width/height and boundingBox width/height with boundingBox width/height = scaleX * image width/height:
{
    "data": {
        "elements": [
            {
                "__typename": "Image",
                "id": "651d40eec91b8fe35b0e168b",
                "transform": {
                    "x": -1321,
                    "y": -77.30120652174469,
                    "rotateZ": 0,
                    "scaleX": 0.48828125,
                    "scaleY": 0.48828125,
                    "origin": {
                        "anchor": "TopLeft",
                        "point": null
                    }
                },
                "boundingBox": {
                    "x": -1321,
                    "y": -77.30120652174469,
                    "width": 500,
                    "height": 500
                },
                "width": 1024,
                "height": 1024
            }
        ]
    }
}
2 Likes