5

我怎样才能像这个例子一样使用带有 Raphaël.js 的剪辑路径。似乎 Raphael.js 中只有 clip-rect。

4

3 回答 3

2

您可以通过路径绘制的形状切割一个孔。这是一种称为甜甜圈洞的技术，您可以在我的索引页面上看到一个示例 如果这看起来很难，它不是 请参阅信息数据库和标记为甜甜圈洞的技术 我的网站索引是 http://www.irunmywebsite.com/ Err它曾经是。现在你可以找到一个多剪辑路径（想象通过几个孔看到一个视图} 旋转木马和缩略图支架只是一个路径...... 请参阅 Raphael Crousel

我在下面提供了一个更好的例子。中央蓝色区域有几个洞。这有多种用途。它是我所说的 DOM / SVG 混合解决方案的一部分。

出于各种原因切割多用途孔

于 2012-01-26T23:15:06.840 回答
1

我不认为你可以通过拉斐尔做到这一点。您可以通过直接操作 DOM 来做到这一点，但您将失去为该元素调用 Raphael 方法的能力。

现在 IE 支持 SVG，我发现 Raphael 有点过时了。您可以使用纯 javascript 和 SVG 规范做更多事情。

于 2012-01-26T16:39:25.567 回答
0

如果，就像在示例图像中一样，它是您尝试剪辑的光栅图像（ png, gif, ... 位图像素图像），这实际上非常简单。jpg在 Raphael 2 中，您只需将填充设置为指向图像文件。它使用它作为背景图像。

如果您想使用 Raphael 路径或形状（如图像文件的剪贴蒙版或剪辑路径）裁剪图像或照片，只需将图像设置为路径的填充。

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

限制（AFAIK）：

  • 每条路径只有一张图片
  • 每张图像只有一个路径（对复杂蒙版使用复合路径）
  • 背景位置之类的事情并不容易 -请参阅此问题了解更多信息
  • 我认为不可能阻止图像重复
于 2013-07-04T15:57:59.287 回答