CODEWITHSUNDEEP
javascriptraphael
afsantos
afsantos

Reputation: 5206

Filling a path depends on the drawing order

I need to draw an inverted triangle inside another triangle, using Raphaël.js. Similar to the following ASCII art:

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

The only difference being that I'm drawing it sideways (with the top to the right), in order to apply rotations to it.

Depending on the order in which I draw the lines in the path string, the center may, or may not, be colored with the filling color.

HTML

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

CSS

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

JavaScript (filling the inside)

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 (leaves the inside blank)

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"
});

Note that the only difference is the first two points.

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

What is causing Raphaël to misbehave?

How do I determine beforehand if the figure is going to be filled?

Demo: jsFiddle

Just toggle the comments between the two blocks of JavaScript.

Upvotes: 1

Views: 98

Answers (1)

Chocimier
Chocimier

Reputation: 48

It's probably related to fill-rule: http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty .

Upvotes: 1

Related Questions