(Sorry about the HTML, but we're all using web
browsers to read our email now, aren't we?)
Shen Hailong wrote:
> I have some problem when to create a polygon
like this:
> "IXI", that draw in black and fill with white, It seems something wrong
> when fill, the filled color exceeds the edge. what can I do with it?
>
> Any hints would be much appreciated.
> "IXI", that draw in black and fill with white, It seems something wrong
> when fill, the filled color exceeds the edge. what can I do with it?
>
> Any hints would be much appreciated.
The following description and pictures should help
explain what's going on. I rendered your shape 16 times normal size, and set
the stroke color to red to make it easier to distinguish amongst the
stroke, the fill and background. (Part of the problem was that your stroke color
was the same as the default background of the buffered image, i.e. black, and
that obscured what was actually being plotted.) I also drew the line of the
mathematical shape outline in blue.
The first thing to know is that pixels are
represented by their top-left corner, so (0,0) refers to the pixel whose top
left is at the origin. The second thing is that when you stroke a path with a
single pixel stroke, at each x co-ordinate, the renderer chooses which of two
vertically adjacent pixels closest to the line is plotted. The one chosen is the
one whose top-left corner is closer to the mathematical line. (This is the case
for lines that are more horizontal than vertical; a similar choice is made
between two horizontally adjacent pixels for lines with slope >
1.)
In the current example, where the line's slop is
exactly 1, the line always falls exactly on pixel corners, so you get the
red pixels shown.
When filling the shape, the the rule is
that the pixels whose centers lie within the outline are plotted. In the
boundary case where the center of a pixel falls exactly on the outline (as in
this case), whether the pixel is plotted depends on whether the interior of the
shape is to the right and below or to the left and above the line. If the former
case, the pixel is regarded as being inside the shape; in the latter case it's
outside and not plotted. The advantage of this rule is that if you plot two
abutting shapes that share an edge, then the pixels plotted at the edge will lie
exactly in one or other of the shapes; no pixels will be plotted twice or not at
all. (The current example actually illustrates that quite nicely: imagine the
two triangles were separate path, and you can see how the filled shapes could be
made to fit together perfectly.)
If you enable anti-aliasing, your shape starts to
look more symmetrical. This is because the redness of the stroked pixels is
proportional to how far their top-left corner is from the outline, and the
whiteness of the filled pixels is proportional to how much of their area lies
within the outline. You get more a gradual effect instead of the 'all or
nothing' you get with non-antialiased rendering. This is shown
below:
Hope this helps,
Cheers,
Pete
path1.gif
path2.gif