Ball inside a hoop

Topics: Developer Forum
Jun 21, 2014 at 7:55 AM
Hi there,

I'm trying to get a ball to sit inside of a hoop, just like a googly eye. I then want to be able to shake my device and have the ball fly around, but first things first is getting the ball to sit in the hoop. This is what I have so far,
    <Canvas Background="Green">
        <Path x:Name="frictionArea" Data="M203.5,24 C103.813,24 23,104.813 23,204.5 C23,304.187 103.813,385 203.5,385 C303.187,385 384,304.187 384,204.5 C384,104.813 303.187,24 203.5,24 z M204,0 C316.666,0 408,91.3339 408,204 C408,316.666 316.666,408 204,408 C91.3339,408 0,316.666 0,204 C0,91.3339 91.3339,0 204,0 z" Fill="Black" HorizontalAlignment="Left" Height="408" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="408" Canvas.Left="10" Canvas.Top="10"/>
        <Ellipse x:Name="ball" Width="50" Height="50" Fill="Black" Canvas.Left="122" Canvas.Top="166"></Ellipse>

        <Spritehand_FarseerHelper:PhysicsController Height="10" Width="10" MousePickEnabled="True" GravityVertical="500" Canvas.Left="-30"/>
        <Spritehand_FarseerHelper:PhysicsStaticHolder Height="10" Width="10" Body="frictionArea" Canvas.Left="-30"/>
    </Canvas>
The ball starts in the hoop then wanders to the edge and falls off of it lol. How can I get it to stay inside? I quite need to use a hoop as opposed to 2 shapes ontop of each other trapping the ball as I will need various hoops with their own ball in around my canvas.

Many thanks in advance.
Jun 21, 2014 at 8:12 AM
I can clarify that the following works, 2 shapes ontop of each other, but I will find it hard for these to fit into my image without looking odd.
    <Canvas Background="Green">
        <Path x:Name="frictionAreaTop" Data="M0,0 L370,0 L370,145 L272.886,145 L273,140.5 C273,89.9659 232.034,49 181.5,49 C130.966,49 90,89.9659 90,140.5 L90.1138,145 L0,145 z" Fill="Black" HorizontalAlignment="Left" Height="259.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="510" Canvas.Left="32" Canvas.Top="-65.5"/>
        <Path x:Name="frictionAreaBottom" Data="M0,0 L90.4908,0 L91.0543,4.43452 C97.7652,48.3551 135.704,82 181.5,82 C227.296,82 265.235,48.3551 271.946,4.43452 L272.509,0 L370,0 L370,127 L0,127 z" Fill="Black" HorizontalAlignment="Left" Height="231" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="510" Canvas.Left="32" Canvas.Top="194"/>

        <Ellipse x:Name="ball" Width="50" Height="50" Fill="Black" Canvas.Left="252" Canvas.Top="164"></Ellipse>

        <Spritehand_FarseerHelper:PhysicsController Height="10" Width="10" MousePickEnabled="True" GravityVertical="500" Canvas.Left="-30"/>
        <Spritehand_FarseerHelper:PhysicsStaticHolder Height="10" Width="10" Body="frictionAreaTop" Canvas.Left="-30"/>
        <Spritehand_FarseerHelper:PhysicsStaticHolder Height="10" Width="10" Body="frictionAreaBottom" Canvas.Left="-30"/>
    </Canvas>
Jun 21, 2014 at 8:14 AM
Actually I take that back, I just made the shapes transparent so this should do me :)
Jun 21, 2014 at 8:20 AM
Just incase anyone else needs this, a working example is as follows,
    <Grid>
        <Canvas>
            <Ellipse Fill="White" Width="324" Height="326.072" Canvas.Left="191" Canvas.Top="18.114" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                <Ellipse.RenderTransform>
                    <CompositeTransform SkewY="0.593" TranslateY="1.49"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>
        <Canvas Background="Transparent">
            <Path x:Name="frictionAreaTop" Data="M0,0 L370,0 L370,145 L272.886,145 L273,140.5 C273,89.9659 232.034,49 181.5,49 C130.966,49 90,89.9659 90,140.5 L90.1138,145 L0,145 z" Fill="Transparent" HorizontalAlignment="Left" Height="259.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="651" Canvas.Left="32" Canvas.Top="-65.5"/>
            <Path x:Name="frictionAreaBottom" Data="M0,0 L90.4908,0 L91.0543,4.43452 C97.7652,48.3551 135.704,82 181.5,82 C227.296,82 265.235,48.3551 271.946,4.43452 L272.509,0 L370,0 L370,127 L0,127 z" Fill="Transparent" HorizontalAlignment="Left" Height="231" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="651" Canvas.Left="32" Canvas.Top="194"/>

            <Ellipse x:Name="ball" Width="150" Height="150" Fill="Black" Canvas.Left="279" Canvas.Top="115"></Ellipse>

            <Spritehand_FarseerHelper:PhysicsController Height="10" Width="10" MousePickEnabled="True" GravityVertical="500" Canvas.Left="-30"/>
            <Spritehand_FarseerHelper:PhysicsStaticHolder Height="10" Width="10" Body="frictionAreaTop" Canvas.Left="-30"/>
            <Spritehand_FarseerHelper:PhysicsStaticHolder Height="10" Width="10" Body="frictionAreaBottom" Canvas.Left="-30"/>
        </Canvas>
        <Canvas>
            <Ellipse Stroke="Black" StrokeThickness="5" Width="324" Height="326.072" Canvas.Left="191" Canvas.Top="18.114" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                <Ellipse.RenderTransform>
                    <CompositeTransform SkewY="0.593" TranslateY="1.49"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>
    </Grid>