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

Question

我有一个动态生成的图表，用于说明相对于项目的宽度和厚度，容纳在容器中的项目范围。我试图证明“适合范围”边缘附近的项目可能不如靠近图形中间的项目那么好。要做到这一点，我想用绿色填充我的形状，其渐变在边缘处变成黄色。该黄色区域应在整个内边缘周围具有均匀的厚度，如下图所示。我怎么能用拉斐尔来做到这一点？我知道如何做一个坚实的填充;渐变是我遇到困难的地方。在此先感谢您的帮助！

Answer 1

理论上，应该可以通过将图形切割成四个三角形来实现这一点。

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

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

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

但你的情况会有点复杂。您必须首先找到图形的中间部分才能将其切成三角形。然后你需要找到每个渐变的角度。

Answer 2

晚上，

它并不像它看起来那么容易。可能是由于如何在VML中实现它的问题。

我能做的最好的事情是在原始背后使用稍大的目标对象克隆，然后在其上使用渐变填充。

我做了一个例子in this fiddle

希望有所帮助。

Answer 3

您可以在覆盖的椭圆上使用径向渐变，但会留下相当大的黄色角 要找到对象的中心，请使用旧的getBBox（）