Question

I ran into a problem recently while creating a custom flex component and it came down the the lineTo behavior.

Lets say I draw a Rectangle using drawRect of width 200, 200. This means its coordinates range from 0, 0 to 199, 199. I then draw a line inside this rectangle from 0, 10 to 200, 10. It draws correctly from 0, 10, to 199, 10 i.e. the right end of the line aligns with the right edge of the Rectangle; there is no overshoort/undershoot. Below is the code.

var g:Graphics = graphics;
g.clear();
g.beginFill(0x0000ff, 1);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();

g.lineStyle(0, 0xff0000, 1);
g.moveTo(0, 10);
g.lineTo(200, 10);

Does this mean that lineTo doesn't include the final point (199,10)? I tried this with getBounds/getRect (with just a horizontal line without the Rectangle and it also prints it as (x:0, y:10, w:200, h:0). i.e. the width is 200 (from 0, to 199).

var g:Graphics = graphics;
g.clear();
g.lineStyle(0, 0xff0000, 1);
g.moveTo(0, 10);
g.lineTo(200, 10);
trace ("Bounds:", getBounds(this)); // prints (x:0, y:0, w:200, h:0)
trace ("Rect:", getRect(this)); // prints (x:0, y:0, w:200, h:0)

However, if I draw the line from right to left, from (199, 10) to (-1, 10). There is a gap between the right end of the line and the right edge of the Rectangle. Also the line overshoots the Rectangle on the left side by one unit.

var g:Graphics = graphics;
g.clear();
g.beginFill(0x0000ff, 1);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();

g.lineStyle(0, 0xff0000, 1);
g.moveTo(199, 10);
g.lineTo(-1, 10);

This seems like lineTo behavior from right to left is different from lineTo behavior left to right; I doubt that's the case and I think I'm missing something. Does anyone know what I'm missing?

EDIT: Followup to answer from user2139426

So that means if I draw a line from (0, 0) to (200, 0). The will be drawn from the upper left corner of (0,0), which would include that full pixel width, to the upper left corner of (200, 0) which would only include the pixel (199, 0) and a small part in (200, 0). Is that correct?

What part of the upper left corner is actually included is it possible to know this?

This seems like a very important detail. I read through Adobe docs, Essential Actionscript, AS Bible etc. and they always explain as though the whole pixel is included. Do you know any resource (doc/book) that actually explains this type of stuff clearly? or is it just general graphics programming (I am new to this).

Was it helpful?

Solution

You are thinking in Pixels.

Try to think in Vectors. The line you see in screen over a pixel is not exactly over that pixel, is in the upper left corner of that pixel.

A line from 0 to 200 width is 200 The point 0 is between the pixel -1 and pixel 0, and the point 200 is between the pixel 199 and pixel 200.

A line from -1 to 199 width is 200 The point -1 is between the pixel -2 and the pixel -1 and the point 199 is between the pixel 198 and pixel 199.

The behavior of lineTo is fine.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top