Raphaël.js中的clip-path

时间:2012-01-26 06:31:57

标签: javascript html5 raphael vector-graphics clip

如何使用与此example之类的Raphaël.js的剪辑路径。它接缝Raphael.js只有剪辑矩形。

3 个答案:

答案 0 :(得分:2)

您可以通过路径绘制的形状切出一个洞。 这是一种称为甜甜圈的技术,您可以在我的索引页面上看到一个示例 如果这看起来很难,那就不是了 查看信息数据库和标记为甜甜圈孔的技术 我的网站索引是 http://www.irunmywebsite.com/ 曾经是错的。 现在你可以找到一个多个剪辑路径(想象一下,通过几个洞看到一个视图) 旋转木马和缩略图只是一条路...... See the Raphael Crousel

我在下面列出了一个更好的例子。中央蓝色区域有几个切入其中的孔。这有多用途。 它是我称之为DOM / SVG混合解决方案的一部分。

Cut multi purpose holes for a variety of reasons

答案 1 :(得分:1)

我认为你不能通过Raphael做到这一点。您可以通过直接操作DOM来实现,但是您将无法为该元素调用Raphael方法。

我发现Raphael有点过时,现在IE支持SVG。你可以使用普通的javascript和SVG规范做更多的事情。

答案 2 :(得分:0)

如果像示例图像一样,它是一个光栅图像(pnggifjpg ...位图像素图像),你试图剪辑,它实际上很容易。在Raphael 2中,您只需将填充设置为指向图像文件即可。它将它用作背景图像。

如果您想使用拉斐尔路径裁剪图像或照片或剪裁蒙版或图像文件的剪辑路径等形状,只需将图像设置为路径填充。

somepath.attr({fill: 'someimage.png'});

限制(AFAIK):

  • 每个路径只有一个图像
  • 每张图片只有一条路径(使用复合蒙版的复合路径)
  • 背景位置之类的东西并不容易 - see this question for more
  • 我认为不可能停止重复图像