Sunday, August 15, 2010

Silverlight Star Polyline – Back to school geometry.

So today I wanted to create a Favorites button that would highlight/deem when a favorite node is or not selected. And as we are running some math/geometry whiteboard sessions from time to time here in Valtera I decided to polish my brain a bit with only using calculator for the following:

cos 36d = 0.809, sin 36d = 0.588, cos 18d = 0.951, sin 18d = 0.309

In order to see my mistakes I had to setup some visual test bench:

image

which would be a circle divided by 72 degrees and then again by 72 with shift of 36. I decided to go with outer radius of 100 and inner of 40.

And here is the final result:

image

Giving the polyline of:

<Polyline Points="100,0,123.52,67.64 123.52,67.64,195.1,69
195.1,69,138.04,112.36 138.04,112.36,158.8,180.09 158.8,180.09,100,140
100,140,41.2,180.09 41.2,180.09,61.98,112.6 61.98,112.6,4.9,69
4.9,69,76.48,67.64 76.48,67.64,100,0"
Stroke="Green" />

Following are the bench and polyline xaml:

<Grid x:Name="LayoutRoot" Background="White">
        <Ellipse Fill="#FFF4F4F5" Width="200" Height="200" Stroke="Black" />
        <Ellipse Fill="#FFF4F4F5" Width="80" Height="80" Stroke="Black"/>
        <Line X1="100" Y1="100" X2="100"  Y2="0" Stroke="Black"/>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">
            <Line.RenderTransform>
                <CompositeTransform Rotation="72"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">
            <Line.RenderTransform>
                <CompositeTransform Rotation="144"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0"  RenderTransformOrigin="0.5,0.5" Stroke="Black">
            <Line.RenderTransform>
                <CompositeTransform Rotation="216"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Black">
            <Line.RenderTransform>
                <CompositeTransform Rotation="288"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">
            <Line.RenderTransform>
                <CompositeTransform Rotation="36"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">
            <Line.RenderTransform>
                <CompositeTransform Rotation="108"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0"  RenderTransformOrigin="0.5,0.5" Stroke="Blue">
            <Line.RenderTransform>
                <CompositeTransform Rotation="180"/>
            </Line.RenderTransform>
        </Line>
        <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">
            <Line.RenderTransform>
                <CompositeTransform Rotation="250"/>
            </Line.RenderTransform>
        </Line>
            <Line X1="100" Y1="100" X2="100"  Y2="0" RenderTransformOrigin="0.5,0.5" Stroke="Blue">
            <Line.RenderTransform>
                <CompositeTransform Rotation="324"/>
            </Line.RenderTransform>
        </Line>
            <Polyline Points="100,0,123.52,67.64 123.52,67.64,195.1,69
195.1,69,138.04,112.36 138.04,112.36,158.8,180.09
158.8,180.09,100,140 100,140,41.2,180.09 41.2,180.09,61.98,112.6
61.98,112.6,4.9,69 4.9,69,76.48,67.64 76.48,67.64,100,0"
Stroke="Green" />
    </Grid>

imageIf we want a smaller star  , we can just divide all points by factor (like 10):

<Polyline Fill="Yellow" Points="10,0,12.352,6.764 12.352,6.764,19.51,6.9 
19.51,6.9,13.804,11.236 13.804,11.236,15.88,18.009 15.88,18.009,10.0,14.0 
10.0,14.0,4.12,18.009 4.12,18.009,6.198,11.26 6.198,11.26,0.49,6.9 
0.49,6.9,7.648,6.764 7.648,6.764,10.0,0" Stroke="Black"/>
Post a Comment