Set Matrix on Rectangle

Hi,

I’m developing a plugin for AdobeXD and am trying to apply a matrix on a new rectangle.

    // Creating new rectangle
    const newRect = new Rectangle()
    newRect.width = 315
    newRect.height = 910
    newRect.fill = new Color('red')

    // Trying to apply transform - always fails
    let transform = newRect.transform
    const matrix = mockupScreen.transform.clone() // Getting the matrix from the mockupScreen variable, which is a Path
    transform.add(matrix)

    // Adding newRect to the selection
    selection.insertionParent.addChild(newRect)
    newRect.moveInParentCoordinates(10, 10)

However, nothing happens with any transform method that I try to apply to my newRect. Is there a way to apply a matrix to a rectangle?
If not, is there a function from the plugin API I can use to rotate around the X and/or Y axis (aka applying 3d transform), other than the rotateAround function which rotates around the Z axis?

Thanks for your help!

Unfortunately I am not well versed on how to use Matrix or Matrix3D. I can do some research and get back to you. Until then I know that there are also these rotation functions for the X and Y axis:

The plugin APIs do not have a direct way of applying a matrix on a SceneNode since the transform property is read-only. However it is possible to extract the relevant transformation information from one SceneNode’s matrix, then apply those transformations to another SceneNode. XD only uses the translation and rotation values, both of which can be applied in 3D space:

// Copies the transform matrix from nodeA to nodeB
function copyMatrix(nodeA, nodeB) {
    let matrixA = nodeA.transform;
    let rotationZ;

    if (matrixA instanceof Matrix3D) {
        let rotations = getRotationFromMatrix3D(matrixA);
        nodeB.rotateXAround(rotations[0], nodeB.localCenterPoint);
        nodeB.rotateYAround(rotations[1], nodeB.localCenterPoint);
        rotationZ = rotations[2];
    } else {
        rotationZ = getRotationFromMatrix2D(matrixA);
    }

    nodeB.rotateAround(rotationZ, nodeB.localCenterPoint);
    nodeB.translation = { x: matrixA.e, y: matrixA.f };

    if (matrixA.mz) {
        nodeB.zDepth = matrixA.mz;
    }
}

This example plugin demonstrates how to apply the matrix information from one shape to another. To use it, first draw two shapes on the canvas. Select both shapes, then press the “Copy Matrix” button. It also provides code for extracting rotation information from a matrix.

TransformMatrix.zip (2.4 KB)

1 Like

Thank you David. In the end, I used an external API instead.