Keys detail of RadialGradient data

[Wykay-z]

Issue in https://www.adobe.io/xd/uxp/develop/reference/RadialGradient/

Hi there,

I was having a hard time trying to transform the data of RadialGradient to css gradient. There are many keys: startX, startY, startR, endX, endY, endR and gradeintTransfrom with a matrix value. I can get the start point and gradient radius, however there is no information about the transform matrix, so I can't calculate the degree of the gradient.

The tutorial only points out what endR means. How about other keys? What are they representing. Please tell us more detail.

Thank you.

Reference: Figma gradient position handler from https://www.figma.com/developers/api

[DaveInMatrix]

The rotation of a RadialGradient is not directly exposed via the plugin APIs at this time. However the transformation matrix is provided from toString() on a shape's fill. I answered a similar question here about how to get useful information out of a matrix. This code demonstrates how to get the rotation of a RadialGradient:

function getRotationFromMatrix2D(matrix2D) {
let a = matrix2D.a;
let b = matrix2D.b;
let c = matrix2D.c;
let d = matrix2D.d;
let rotation = 0;
if (a != 0 || b != 0) {
let r = Math.sqrt(a * a + b * b);
rotation = (b > 0 ? Math.acos(a / r) : -Math.acos(a / r)) * (180 / Math.PI);
} else if (c != 0 || d != 0) {
let s = Math.sqrt(c * c + d * d);
rotation = (Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s))) * (180 / Math.PI);
}
return rotation;
}

const fillValue = selection.items[0].fill;
const transform = fillValue.toString().split("(")[1].split(")")[0].split(",");
const gradientMatrix = new Matrix(transform[0], transform[1], transform[2], transform[3], transform[4], transform[5]);
// Default rotation is 0 degrees, which is to the right
const gradientRotation = getRotationFromMatrix2D(gradientMatrix);
console.log("gradientRotation: " + gradientRotation);