How to pull missile images on top of the lines?

Question

As you can see below, the images of the little missiles are not over the lines. How can I create an offset that respects the angle and rotation. I am using linear interpolation to extract x y coordinates between the ends of each straight line.

            float xDiff = end_xpos[i] - start_xpos[i];
            float yDiff = end_ypos[i] - start_ypos[i];
            double degrees = Math.Atan2(yDiff, xDiff) * 180.0 / Math.PI;
            double radians = (Math.PI / 180) * degrees;


            args.DrawingSession.DrawLine(start_xpos[i], start_ypos[i], end_xpos[i], end_ypos[i], Color.FromArgb(Alpha_line, 255, 255, 255), 2);

            pointX = Math.Round((start_xpos[i] + (end_xpos[i] - start_xpos[i]) * percent), 1);
            pointY = Math.Round((start_ypos[i] + (end_ypos[i] - start_ypos[i]) * percent), 1);

            Missle_ROT.TransformMatrix = Matrix3x2.CreateRotation((float)radians);
            args.DrawingSession.DrawImage(Missle_ROT, Convert.ToSingle(pointX), Convert.ToSingle(pointY));

Answer 1

I think the problem is that you set the angle of your image like this Missle_ROT.TransformMatrix = Matrix3x2.CreateRotation((float)radians);.

The coordinate system is like this:

So when you used Matrix3x2.CreateRotation Method (Single) to rotate the image, it rotated with the default center point which is also the left-top point of this image. As a solution you can use Matrix3x2.CreateRotation Method (Single, Vector2) to specify the rotation center, and for your scenario, this center should possible be the center of your image. You can have a test like this:

var image = await CanvasBitmap.LoadAsync(sender, "Assets/solidimg.png");
var transform = new Transform2DEffect() { Source = image };
//draw image's left-top point (0,0) of the image
args.DrawingSession.DrawCircle(new Vector2(200, 200), 10, Colors.Black);
//draw image with no trasform effect
transform.TransformMatrix = Matrix3x2.CreateRotation(0);
args.DrawingSession.DrawImage(transform, 200, 200);
//draw image with trasform effect and center on the (0,0) point
transform.TransformMatrix = Matrix3x2.CreateRotation((float)(20 * Math.PI) / 180);
args.DrawingSession.DrawImage(transform, 200, 200);
//draw image's center point of the image
args.DrawingSession.DrawCircle(new Vector2((float)(200 + image.Size.Width / 2), (float)(200 + image.Size.Height / 2)), 10, Colors.Red);
//draw image with trasform effect and center on the image's center
transform.TransformMatrix = Matrix3x2.CreateRotation((float)(20 * Math.PI) / 180, new Vector2((float)image.Size.Width / 2, (float)image.Size.Height / 2));
args.DrawingSession.DrawImage(transform, 200, 200);

And for your last code to draw image args.DrawingSession.DrawImage(Missle_ROT, Convert.ToSingle(pointX), Convert.ToSingle(pointY));, it still draw the image from the the (0,0) point, you should also calculate the center point of the image to the "pointX" and "pointY" like this:

args.DrawingSession.DrawImage(Missle_ROT, Convert.ToSingle(pointX- (float)image.Size.Width / 2), Convert.ToSingle(pointY- (float)image.Size.Height / 2));

Answer 2

You want to draw an image (of dimensions w,h in pixels) on the screen, rotated with the center at specified pixel coordinates px and py. You need to find the location of the upper left corner of the image (with coordinates x_A and y_A).

This is done with a coordinate rotation of the relative location of the image center (h/2 and w/2).

x_A = px - (w/2)*cos(θ) + (h/2)*sin(θ)
y_A = py - (w/2)*sin(θ) - (h/2)*cos(θ)