0

这是我尝试填充路径时的当前结果： screenshot 。

注意笔画是正确的，但填充不是： jsfiddle 。

我看过填充规则，但这似乎没有多大作用。我猜这个问题更多是因为我的形状没有正确关闭。

请帮忙！

这是为上述生成的 svg：

<svg height="75" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="" fill="#949598" stroke="#000000" d="M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z" stroke-width="0"/>
<path style="fill-opacity: 1.2;" fill="#c9532f" stroke="#00ff00" d="M75,75M48.144896960365074,4.972837836089695A75,75,0,0,0,0,74.99999999999999M75,75M64.25795878414603,46.989135134435884A30,30,0,0,0,45,75M64.25795878414603,46.989135134435884L48.144896960365074,4.972837836089695M45,75L0,75Z" stroke-width="1" fill-opacity="1.2"/>
<circle cx="75" cy="75" r="5" fill="#333333" stroke="#000" style="" stroke-width="0"/>    
</svg>
4

1 回答 1

1

小甜甜圈的路径被绘制成四个部分，在页面上跳跃，在确定形状的内部和外部时，这似乎使 Raphael 感到困惑。（我无法确切说明它是如何做出这一决定的。）

最简单的解决方案是通过从不从页面“抬起你的笔”来绘制形状——换句话说，通过构造路径字符串以仅在开头使用一个“M”。这不可能适用于所有形状，但在您的情况下非常容易。下面，我重新排列了路径，以便将其分段绘制，而无需跳转到新坐标：

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");

（为了便于阅读，我还对这些值进行了四舍五入。不需要小数点后 10 位的像素值）。

如您所见，这从同一个地方开始，将外部曲线绘制到 0,75，将线绘制到内部曲线的底部，顺时针绘制内部曲线，然后与原点重新连接。请注意，内部曲线需要第二个布尔值，即“扫描标志”，从 0 更改为 1，才能在相反方向正确绘制。

一般来说，最好以与手动绘制路径相同的方式构建路径（如果可能），以便在您回头观察它们时保持它们的连贯性。

这是整个事情：

var paper = Raphael(0, 0, 800, 600);    
var p1 = paper.path("M75,75L150,75.00000000000001A75,75,0,0,0,0,74.99999999999999M75,75L45,75A30,30,0,1,1,105,75.00000000000001Z").attr("fill", "#949598");

var p2 = paper.path("M48.1,5A75,75,0,0,0,0,75L45,75A30,30,0,0,1,64.2,47L48.1,5").attr("fill", "#c9532f");  

var c = paper.circle(64.2,47, 5).attr("fill", "#333333");
于 2013-01-11T20:04:20.457 回答