Fill a Triangle formed by 3 Path Segments on a Canvas

Question

Hi: How do I let the user select an area on a canvas enclosed by 3 line segment paths which form a triangle? And fill that area.

---

Mike Gallinger C.Tech. Cutting Edge Computing Software Developer

Answer 1

Hi Mike_CuttingEdge,

based on my understanding, you want to click three point on a Canvas, and then this three point will compose a enclosed path, and then you could fill this path looks like a Triangle, if I understand your issue correctly?

If so, you could get the start point of your mouse on Canvas when MouseDown event, then you could get the end point in MouseUp event, now you could draw a Path on Canvas, the last end point is next path start point, after you draw three pathes, you could compose then as one Path by below code snippet:

<Canvas>
    <Path Fill="Cyan" Stroke="Black">
        <Path.Data>
            <CombinedGeometry  GeometryCombineMode="Union">
                <CombinedGeometry.Geometry1>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigure StartPoint="0,25" IsClosed="True">
                                <LineSegment Point="50,0"/>
                                <LineSegment Point="50,50"/>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <EllipseGeometry Center="60,25" RadiusX="26" RadiusY="26"/>
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Path.Data>
    </Path>
</Canvas>

http://social.msdn.microsoft.com/Forums/eu/wpf/thread/eba79235-39c9-4524-ade6-45298c6a3266

" GeometryCombineMode="Union" and IsClosed="True"" is important.

If you want to fill them, you could set this path.Fill property to achieve this goal.

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Sorry I didn't explain properly. The 3 seperate paths are already created by the user. It can also apply to any group of paths that have already been placed on the canvas. Then the user wants to pick an area enclosed by these paths and fill it with a color.

I figure that:

1) get the mouse position where the user clicks.

2) find which paths are at the boundries of this area. this is the one I find tricky. I don't know how to get these paths from the collection.

3) fill that area.

It will need to be done in code for sure. Any ideas?

---

Mike Gallinger C.Tech. Cutting Edge Computing Software Developer

Answer 3

Hi Mike_CuttingEdge,

I will spend more time on your issue, later, I will demonstrate you how to use HitTest to get the select area, and then check which path is inside this area, then set its fill property.

best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

Thanks.

---

Mike Gallinger C.Tech. Cutting Edge Computing Software Developer