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

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