vector - 如何在 Raphael 中使用路径实现“甜甜圈洞”

Question

我想画一个有洞的形状，这样我就可以fill塑造它，而不是用那种颜色填充洞（让它们透明）。

根据W3 路径规范：

复合路径（即具有多个子路径的路径）可能允许对象中出现诸如“甜甜圈洞”之类的效果。

有人可以举一个非常简单的例子来说明如何在Raphael中使用矢量路径执行此操作吗？

非常感谢。

Answer 1

如果您知道诀窍，这将变得非常简单。例如，这不起作用：

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
          " M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");

但这确实有效*：

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");

不同之处在于，要使甜甜圈出现，内部路径的顶点必须以与外部路径相反的顺序绘制（即顺时针绘制一个，逆时针绘制另一个）。我在text.xml.svg.devel 档案中发现的一个花絮。

(*) 至少，它适用于 Chrome、Opera 和 Firefox 4.0 beta，但不适用于 3.6

Answer 2

要在 Firefox 3.6 中实现此功能，您需要关闭漏洞；即在定义内部边界时使坐标重新连接到它们自己。奇怪的是，这对于外部边界似乎没有必要。

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 L 75 75 z")
.attr("fill", "#f00");

只是一个快速的注释来跟进评论 - 顺时针/逆时针的概念起初可能看起来很奇怪，但它在整个 GIS / CAD 技术中是相当标准的。

Answer 3

我认为正确的方法是将属性“fill-rule”设置为值“evenodd”。看看svg 规范：

不要尝试用“Raphael.Element.attr()”来设置它。它不起作用。我改用 jQuery.attr() 函数：

// assuming paper is a Raphael.Paper object
path = paper.path('Mx,y{some path commands for the main shape}Z'
                  +'Mx,y{some path commands for the hole}Z'
);

// this doesn't work
path.attr({'fill-rule': 'evenodd'});
// neither this
path.attr({fillRule: 'evenodd'});

// if you inspect the object returned by paper.path
// you can see it has a reference to the DOM element
console.debug(path)

// so a bit of jQuery and it's done
$(path[0]).attr('fill-rule', 'evenodd');

我已经在复杂的路径上使用了它并取得了成功。

Answer 4

对于任何想要做圆形甜甜圈的人，非常简单的插件Raphael-donut-plugin

要旨：

Raphael.fn.donut = function(x, y, innerRadius, outerRadius) {
  y -= outerRadius;
  return this.path('M'+x+' '+y+'a'+outerRadius+' '+outerRadius +
      ' 0 1 0 1 0m-1 '+
      (outerRadius - innerRadius)+
      'a'+innerRadius+' '+innerRadius+
      ' 0 1 1 -1 0');
};