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?
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.