Использование LinearGradient в качестве цвета заливки при построении фигур в API рисования углового кендо

Question

Я пытаюсь построить прямоугольник с линейной градиентной заливкой, используя код, подобный следующему:

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
 });

Однако в определении TypeScript FillOptions цвет определяется как строка. Я не могу найти пример в документации по Кендо, который описывает, как это может работать. Буду благодарен за любые идеи.

Answer 1

Вы можете передать градиент непосредственно в опцию "fill" как Path, так и 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
  });

ПРИМЕР