none
Need help in creating this effect

    Question

  • Hello frineds,

    I'm sure it must be very simple for the geeks out here, but i've tried everything .

    I'm trying to create a basic billiards game. kindly see the image below.

    pooltable


    I've been able to successfully achieve the rotation effect. my problem is that by no means i'm able to precisely get the point around which the stick should rotate, i wan't the stick to rorate around the black ball in the middle.

    Design : all the elemnts (stick,ball etc..) are usercontrols which are placed on a Main.xaml page.

    The stick has a property which changes the stick's rotatetransform from the mousemove event on the mainpage.

    I've tried to set the CenterX,CenterY of the rotatetransform to GetLeft, GetTop of the black ball but to no avail.

    I've also tried the RenderTransformOrigin of that too in vain.

    The stick always rotates around a circle which has a big radius and not around the circle encircling the black ball

    Plz guide me on this.


    Sunday, December 26, 2010 4:42 AM

Answers

  • I would solve this problem in the following way.

    If you have the stick control, with vertical orientation and pointing north:

    1. always place the stick R pixels under the ball to which you want to rotate to. If the ball moves, move the stick: stick.X = ball.X, stick.Y = ball.Y + R

    2. Set the CenterY of the Rotationtransform to -R, on the stick control. You need to do this only once. CenterX = stick.Width/2.0.

    3. Determine the current angle of rotation, using mouse coordinates, and correct the phase.

    4. Set the rotation angle on the stick control. Just store the new rotation angle, don't work with the previous angle.

     

    Tuesday, December 28, 2010 4:07 AM

All replies

  • hi

    Don't use the CompositTransf

    <Grid x:Name="LayoutRoot" Background="White">
    		<Rectangle Fill="#FFDE1515" Stroke="Black" Height="30" Margin="20,0,0,190" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="230" RenderTransformOrigin="1.261,0.333">
    			<Rectangle.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform Angle="30"/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Ellipse Fill="#FF020202" Stroke="Black" Height="40" Margin="290,0,310,190" VerticalAlignment="Bottom"/>
    	</Grid>

    The RenderTransformOrigin="1.261,0.333" is pointed to the center of the Bloack Elipse. In this example i use e Transform Group (Blend 3) but it should work with a CompositTransformer too (Blend4 )

    Sunday, December 26, 2010 9:38 AM
  • thanx for ur reply, but i've to dynamically change the angle etc.. i can't put RenderTransformOrigin="1.261,0.333", i've to dynamically find it based on the current location of the black ball. i'm pasting the xAML for ur reference.


    black ball



    <Ellipse 
    				x:Name="cueBall" Height="27" Width="22" Canvas.Left="269" Canvas.Top="157" MouseLeftButtonUp="cueBall_MouseLeftButtonUp">
    				<Ellipse.Fill>
    					<RadialGradientBrush GradientOrigin="0.75,0.25" 
    						Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
    						<GradientStop Color="#FFC1CCC3" Offset="0" />
    						<GradientStop Color="#FF230D23" Offset="1" />
    					</RadialGradientBrush>
    				</Ellipse.Fill>
    			</Ellipse>


    stick control :

    <PoolItems:Stickxaml Name="stick" Canvas.Left="31" Canvas.Top="160" Width="234" Height="19" MouseLeftButtonDown="stick_MouseLeftButtonDown" MouseMove="stick_MouseMove" MouseLeftButtonUp="stick_MouseLeftButtonUp"></PoolItems:Stickxaml>


    when i move the mouse on the canvas


    private void Canvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {
    	if(!isCaptured)
    	{
    		Point MousePosition= e.GetPosition(null);
    		Point CanvasCenter = new Point(poolTable.ActualHeight/2,poolTable.ActualWidth/2);
    		lastAngle=Math.Atan2(lastPosition.Y-CanvasCenter.Y,lastPosition.X-CanvasCenter.X);
    		currentAngle=Math.Atan2(MousePosition.Y-CanvasCenter.Y,MousePosition.X-CanvasCenter.X);
    		stick.RotationAngle=RadianToDegrees(currentAngle-lastAngle);
    		//stick.RotateAround=new Point(10,10);
    		//stick.RenderTransformOrigin=new Point(Canvas.GetLeft(cueBall)+stick.ActualWidth,Canvas.GetTop(cueBall)+stick.ActualHeight);
    		//stick.RenderTransformOrigin=new Point(0,0);
    		stick.RotateAround=new Point(1,1);
    		/*Point currentPosition = e.GetPosition(stick);
    		//lastAngle=Math.Atan2(lastPosition.Y-poolTable.Height);
    		var p= tr.Transform(new Point(0,0));
    		stick.RotateAround=currentPosition;
    		stick.RotateAround=new Point((Canvas.GetLeft(cueBall)+cueBall.Width)/10,(Canvas.GetTop(cueBall)+cueBall.Height)/10);
    		*/
    	}
    }



    as you can see, there is a property for stick

    stick.RotateAround which changes the CenterX , CenterY

    public Point RotateAround
    {
    	set
    	{
    		stickRotation.CenterX=value.X;
    		stickRotation.CenterY=value.Y;
    	}
    }


    Monday, December 27, 2010 12:12 AM
  • any more help guys???

    Monday, December 27, 2010 10:17 PM
  • I would solve this problem in the following way.

    If you have the stick control, with vertical orientation and pointing north:

    1. always place the stick R pixels under the ball to which you want to rotate to. If the ball moves, move the stick: stick.X = ball.X, stick.Y = ball.Y + R

    2. Set the CenterY of the Rotationtransform to -R, on the stick control. You need to do this only once. CenterX = stick.Width/2.0.

    3. Determine the current angle of rotation, using mouse coordinates, and correct the phase.

    4. Set the rotation angle on the stick control. Just store the new rotation angle, don't work with the previous angle.

     

    Tuesday, December 28, 2010 4:07 AM