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

发布于 2024-12-09 20:20:55 字数 255 浏览 1 评论 0原文

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

渐变示例

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泡沫很甜 2024-12-16 20:20:55

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

将图形切成四个矩形

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

边缘为另一种颜色的图形

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

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

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

In theory it should be possible to do this by slicing the graph into four triangles.

Slice the graph into four rectangles

Each triangle can then be filled with a gradient that is mostly your solid color but at one end it turns into your edge color. By setting the right angle on the gradient you can make it look like only the edges on the graph have a different color.

Graph with edges in another color

I've created the rectangle above using the following code.

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

Your case will be a bit more complex though. You will have to first find the middle of the graph to be able to slice it into triangles. Then you need to find the angle for each of the gradients.

回复收藏 0 原文