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

Question

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

   

Answer 1

There's no way to achieve this natively through Raphael, but it could be accomplished by some selective modification of the SVG produced by Raphael. Consider the use of a mask applied to the path. This technique is used to absolutely delicious visual effect here.

Don't forget that you can access the DOM node associated with a Raphael paper object through that paper object's canvas property (I don't know why Baranovskiy chose such a misleading name!). You could use this to interact directly with the SVG in the DOM, though I can't vouch for interactions between Raphael and custom modifications =)

Answer 2

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

你会在这里找到一个很好的例子：如何在 Raphael 中使用路径实现“甜甜圈洞”。

想法是： * 将外部路径字符串作为一个大的逆时针闭合矩形，告诉浏览器必须填充的是里面的内容 * 将内部路径字符串连接为您想要的顺时针闭合路径，告诉浏览器有什么被填满的是外面的东西。

从而产生带有孔的填充形状，该孔是两个填充形状的交集。