javascript - 如何使用 Raphael 在对象的内边缘创建渐变填充？

Question

我有一个动态生成的图表，它说明了适合容器的项目范围，相对于项目的宽度和厚度。我试图证明靠近“拟合范围”边缘的项目可能不如靠近图表中间的项目拟合得好。为此，我想用绿色填充我的形状，它有一个渐变，在边缘周围变成黄色。这个黄色区域应该在整个内边缘周围具有均匀的厚度，如下图所示。我怎样才能用拉斐尔完成这个？我知道如何进行实心填充；渐变是我遇到困难的地方。预先感谢您的帮助!

Answer 1

理论上，应该可以通过将图形切成四个三 Angular 形来做到这一点。

然后可以用渐变填充每个三 Angular 形，该渐变主要是您的纯色，但在一端会变成您的边缘颜色。通过在渐变上设置直 Angular ，您可以使它看起来好像只有图形上的边缘具有不同的颜色。

我使用以下代码创建了上面的矩形。

var slice1 = paper.path("M200 200L100 100L300 100").attr({
    "fill": "90-#0f0:70-#ff0:95",
});

var slice2 = paper.path("M200 200L300 100L300 300").attr({
    "fill": "0-#0f0:70-#ff0:95",
});

var slice3 = paper.path("M200 200L300 300L100 300").attr({
    "fill": "270-#0f0:70-#ff0:95",
});

var slice4 = paper.path("M200 200L100 300L100 100").attr({
    "fill": "180-#0f0:70-#ff0:95",
});

不过，您的情况会稍微复杂一些。您必须首先找到图形的中间才能将其切成三 Angular 形。然后您需要找到每个渐变的 Angular 。