如何将导弹图像拉到线上？

Question

正如您在下面看到的，小导弹的图像并没有越界。我怎样才能创建一个尊重角度和旋转的偏移量。我正在使用线性插值来提取每条直线两端之间的 x y 坐标。

            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

我认为问题出在你像这样设置图像的角度 Missle_ROT.TransformMatrix = Matrix3x2.CreateRotation((float)radians);。

坐标系是这样的：

所以当你使用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)指定旋转中心时，对于你的场景，这个中心应该是你图像的中心。你可以有这样的测试：

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);

而对于你最后一个绘制图像的代码 args.DrawingSession.DrawImage(Missle_ROT, Convert.ToSingle(pointX), Convert.ToSingle(pointY));，它仍然从 (0,0) 点绘制图像，你还应该计算图像的中心点到 "pointX" 和 "pointY" 像这样：

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

Answer 2

您想在屏幕上绘制图像（尺寸 w，h 像素），以指定像素坐标 px 和 [=14= 为中心旋转].您需要找到图像左上角的位置（坐标x_A和y_A）。

这是通过图像中心（h/2和w/2）的相对位置的坐标旋转完成的。

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

如何将导弹图像拉到线上？

How to pull missile images on top of the lines?

c#

graphics

offset

win2d

uwp