如何在导线上拉导弹图像？ [英] How to pull missile images on top of the lines?

问题描述

正如你可以在下面看到的那样，这些小型导弹的图像没有超出界限。
如何创建一个尊重角度和旋转的偏移量。我正在使用线性插值来提取每条直线末端之间的xy坐标。

  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）*度; 
 
 
 args.DrawingSession.DrawLine（start_xpos [i]，start_ypos [i]，end_xpos [i]，end_ypos [i]，Color.FromArgb（Alpha_line，255,255,255） ，2）; $（b）
 $ b 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））; b 
 
 
 $ b 
 rel =nofollow noreferrer>   
解决方案
我认为问题在于您设置图像的角度，如 Missle_ROT.TransformMatrix = Matrix3x2.CreateRotation（（float）radians） ; 。
 
 
 
坐标系是这样的：
 
 
  
 
 
 
因此，当您使用 Matrix3x2.CreateRotation方法（单个）旋转图像，它旋转时的默认中心点也是该图像的左上角点。作为解决方案，您可以使用 Matrix3x2.CreateRotation方法（Single，Vector2）指定旋转中心，对于您的场景，该中心应该可能是图像的中心。您可以进行如下测试： 
 
 
  var image = await CanvasBitmap.LoadAsync（sender，Assets / solidimg.png） ; 
 var transform = new Transform2DEffect（）{Source = image}; 
 //绘制图像的左上角点（0,0）
 args.DrawingSession.DrawCircle（new Vector2（200,200），10，Colors.Black）; 
 //绘制没有变形效果的图像
 transform.TransformMatrix = Matrix3x2.CreateRotation（0）; 
 args.DrawingSession.DrawImage（transform，200，200）; 
 //用trasform效果绘制图像，并以（0,0）点为中心
 transform.TransformMatrix = Matrix3x2.CreateRotation（（float）（20 * Math.PI）/ 180）; 
 args.DrawingSession.DrawImage（transform，200，200）; 
 //绘制图像的中心点
 args.DrawingSession.DrawCircle（new Vector2（（float）（200 + image.Size.Width / 2），（float）（200 + image.Size .Height / 2）），10，Colors.Red）; 
 //以trasform效果绘制图像并以图像中心为中心
 transform.TransformMatrix = Matrix3x2.CreateRotation（（float）（20 * Math.PI）/ 180，new Vector2（（float））图像。 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就像这样：
 
 pre $ $ $ $ $ $ $ args.DrawingSession.DrawImage（Missle_ROT，Convert.ToSingle（pointX-（ float）image.Size.Width / 2），Convert.ToSingle（pointY-（float）image.Size.Height / 2））; 
  

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

解决方案

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

这篇关于如何在导线上拉导弹图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！