Using a LinearGradient as fill color when building shapes in the Angular Kendo Drawing API - angular-kendo

Question

I'm attempting to build a rectangle with a linear gradient fill using code similar to:
const gradient = new LinearGradient({
stops: [
new GradientStop({
color: "gray",
offset: 0,
opacity: 0
}),
new GradientStop({
offset: 0.5,
color: "orange",
opacity: 0.8
})]
});
const geometry = new GeomRectangle([0, 0], [100, 25]);
const rect = new Rect(geometry, {
stroke: { color: "black", width: 1 },
fill: { color: gradient, opacity: 1 } <- Compile error wants string
});
However, in the TypeScript FillOptions definition, color is defined as string. I can't find an example in the Kendo docs that describe how this might work. I'd be grateful for any insights.

Answer 1

You can pass the gradient directly to the "fill" option of both a Path or a Rect:
const gradient = new LinearGradient({
name: "LG1",
stops: [
{
offset: 0,
color: "gray",
opacity: 0
}, {
offset: 0.5,
color: "orange",
opacity: 0.8
}
]
});
// Create the square border by drawing a straight path
const path = new Path({
stroke: {
color: "#9999b6",
width: 2
},
fill: gradient
});
const anotherRect = new RectGeometry(
new Point(100, 100),
new Size(50, 50)
);
const drawingRect = new Rect(anotherRect, {
stroke: {
color: "#9999b6",
width: 2
},
fill: gradient
});
EXAMPLE