Calculate geometry created by "slicing" rectangle with lines

Given a rectangle with a series lines intersecting it, how would you calculate the points of each individual shape created? In this particular application that we are working on, the user can "slice" a rectangle into sub-shapes, similar to how Adobe Illustrator's scissors tool works. Programmatically speaking, I can do the interaction part and drawing, but I'm unsure how to calculate the shapes. The rectangle will always be a fixed size and users cannot plot a point that is not on the main rectangle's sides.

EDIT:

Not really looking to get the area of each of the shapes shown in the diagram (A, B, C, etc). What I would to solve is this: given the points that define each dotted line, I want to find the points that define each created shape. So (in the drawing) area is defined by A=(0,0),(0,1),(1,0); B=(0,1),(0,3),(1,3),(2,0),(1,0); and so on. I know the size of the rectangle is 5x4 and that will never change, only a series of lines that the user can create by tapping two points on the rect, thereby slicing a section in two for each line.

• Apologies for the noob question in advance. I went to art school! Jan 9, 2014 at 6:30

If you have the points you can use elementary calculation (triangle, trapezoid etc.) to calculate the area.

I would like to repeat myself:

The way you draw your picture it might be easier to slice all pieces in triangles because then you can read the lenght of sides and hight of the triangles right away and wouldn't have to calculate that much. You could almost "see" the area of the triangles and just add them up - no equation to solve at all.

I'm not quite sure what you are really asking, but I can tell you a general way to solve it.

Letting $$A(0,0),B(a,0),C(a,b),D(0,b)$$ be the vertices of the rectangle where $a,b\gt0$. (you would know the values $a,b$.)

If you have a line represented as$$Ax+By+C=0,$$ you'll be able to find the coordinates of the intersection points.

Once you know the coordinates of the intersection points, then you can calculate the area of each individual shape. If the shape is a quadrilateral, you can divide it into two triangles. This will makes it easier for you to calculate its area.

EDIT : You can calculate the coordinates of the intersection points in the following way with a rectangle which I wrote in my comment.

If the line you have is represented as $$y=x+1,$$ then consider $x=0, y=3$. (These are the lines included the edges of the rectangle.)

Then, you'll know that the line intersects at $$(0,1),(2,3).$$ So, we know that the area of a triangle made by this line is $$1\times 2\times \frac 12=1.$$

• I am really asking how to get the x,y points of each point in a shape created, imagining if the rectangle was sliced up along the dotted lines. This is so I can redraw the square as multiple shapes in different colors. Jan 9, 2014 at 6:42
• OK. If your rectangle $ABCD$ is $3\times 4$ for example, you can put it in $xy$-coordinates plane as I wrote in my answer : $A(0,0),B(4,0),C(4,3),D(0,3).$ Then, you can find the coordinates of the intersection points if you know the equation of the lines. Jan 9, 2014 at 6:45
• The way you draw your picture it might be easier to slice all pieces in triangles because then you can read the lenght of sides and hight of the triangles right away and wouldn't have to calculate that much Jan 9, 2014 at 6:52
• @typeoneerror: I added at bit in my answer. Does this help? Jan 9, 2014 at 7:11
• Ok, maybe the rectangle of your picture is $4\times 5$? If so, you can get some areas : for example, the area of $C$ is $2\times 4\times (1/2)=2.$ Is this what you want? But for example, we cannot get the area of $G$ because we don't know its height. Jan 9, 2014 at 7:21