Question

我需要使用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

是什么导致Raphaël行为不端？

如何预先确定是否要填充数字？

演示：jsFiddle

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

Answer 1

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

填充路径取决于绘制顺序

是什么导致Raphaël行为不端？

如何预先确定是否要填充数字？

1 个答案: