angular-kendo - 在 Angular Kendo 绘图 API 中构建形状时使用 LinearGradient 作为填充颜色

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定义中，颜色被定义为字符串。我在 Kendo 文档中找不到描述这可能如何工作的示例。我将不胜感激任何见解。

Answer 1

您可以将渐变直接传递给 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
  });

例子