1

我需要使用 Raphaël.js 在另一个三角形内绘制一个倒三角形。类似于以下 ASCII 艺术：

   /\
  /__\
 /\  /\
/__\/__\

唯一的区别是我将它横向绘制（顶部向右），以便对其应用旋转。

根据我在path字符串中绘制线条的顺序，中心可能会或可能不会用填充颜色着色。

HTML

<div id="paper"></div>

CSS

div#paper {
    width: 200px;
    height: 200px
}

JavaScript（填充内部）

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x, y, "L", x + w, cy, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

JavaScript（将内部留空）

function triangles(paper, x, y, w, h, attr) {
    var cx = x + w / 2,
        cy = y + h / 2,
        path = ["M", x + w, cy, "L", x, y, x, y + h, "Z",
                "M", cx, y + h/4, "L", cx,
                y + h*3/4, x, cy, "Z"].join(" ");
    return paper.path(path).attr(attr);
}

var paper = Raphael(document.getElementById("paper"), 200, 200);
triangles(paper, 20, 20, 80, 80, {
    fill: "#abcabd"
});

请注意，唯一的区别是前两点。

// Fills the inside:
"M", x, y, "L", x + w, cy
// Doesn't fill the inside:
"M", x + w, cy, "L", x, y

是什么导致拉斐尔行为不端？

我如何事先确定该数字是否将被填充？

演示：jsFiddle

只需在两个 JavaScript 块之间切换注释即可。

4

1 回答 1

1

它可能与填充规则有关：http ://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty 。

于 2013-09-14T22:33:26.913 回答