如何使用 Raphael.js 绘制“透明笔画”

Posted 2023-02-23

【中文标题】如何使用 Raphael.js 绘制“透明笔画”

【英文标题】：How can I draw a "transparent stroke" with Raphael.js

【发布时间】：2013-04-05 12:33:58

【问题描述】：

我正在尝试绘制图形的路径，以便路径是透明的，而画布的其余部分则不是。这样我就可以使用画布作为遮罩，并使用 html 元素用不同的颜色填充路径。有点像这样：

【问题讨论】：

也许这行得通？ ***.com/questions/6042550/…

我不是 Raphaeljs 专家，但您可以在 documentation page 上查看 stroke-opacity。

是的，问题是用纯色填充纸张的其余部分（减去路径）。

【参考方案1】：

没有办法通过 Raphael 在本地实现这一点，但可以通过对 Raphael 生成的 SVG 进行一些选择性修改来实现。考虑使用应用于路径的mask。这个技巧用来制作绝对美味的视觉效果here。

不要忘记，您可以通过纸对象的canvas 属性访问与拉斐尔纸对象关联的 DOM 节点（我不知道为什么 Baranovskiy 选择了这样一个误导性的名称！）。您可以使用它直接与 DOM 中的 SVG 交互，但我不能保证 Raphael 和自定义修改之间的交互 ​​=)

【讨论】：

感谢凯文的建议！无论如何，我不会对 Raphael 做太多繁重的工作，所以我可能会坚持使用 SVG。无论如何，在这个应用程序中不支持 IE ;)

【参考方案2】：

要仅填充路径的外部，您必须绘制通常称为由两个路径字符串组成的“甜甜圈”。

你会在这里找到一个很好的例子：How to achieve 'donut holes' with paths in Raphael。

这个想法是： * 将外部路径字符串作为一个大的逆时针闭合矩形，告诉浏览器必须填充的是里面的内容 * 将内部路径字符串拼接成你想要的顺时针闭合路径，告诉浏览器要填的是外面的。

因此会产生一个带有孔的填充形状，该孔是两个填充形状的交集。