Monday, May 12, 2008

Round Shapes

Today's tip is for rounding shapes. If you've tried to get round shapes in XAML you may have encountered some problems. The simple way to round out corners is to give your shape a thick stroke, with the line-join property set to round. Unfortunately, if your fill color is a linear gradient it is a huge pain to keep the stroke brush and fill brush in sync as you edit. If your fill is a radial gradient it is often impossible to align the fill and stroke (it appears the size and position of the radial fill is determined by the bounding box for the fill area, which is larger for the thick stroke than the interior). In any case, Vectropy has a few tricks up its sleeve to take care of you.

Make your shape. I'll stick with the star we've been using for all the examples so far:




Now give your shape the thick stroke to round out the corners, as you would have before:




Now choose "Outline Stroke" from the editing menu:




There you go! Vectropy has replaced the old shape with a new shape that matches the outline of the old shape including its stroke.




Now instead of a pointy shape with a big outline to make it round, you have a round shape that you can outline properly: