Comment tirer des images de missiles au-dessus des lignes?

Question

Comme vous pouvez le voir ci-dessous, les images des petits missiles ne sont pas sur les lignes. Comment puis-je créer un décalage respectant l'angle et la rotation. J'utilise l'interpolation linéaire pour extraire les coordonnées x y entre les extrémités de chaque ligne droite.

  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

Je pense que le problème est que vous définissez l'angle de l'image comme celui-ci Missle_ROT.TransformMatrix = Matrix3x2.CreateRotation((float)radians);.

Le système de coordonnées est comme ceci:

Ainsi, lorsque vous utilisez Matrix3x2.CreateRotation Method (Single) pour faire pivoter l'image, il en rotation avec le point central par défaut qui est aussi le point en haut à gauche de cette image. En tant que solution, vous pouvez utiliser Matrix3x2.CreateRotation Method (Single, Vector2) pour spécifier le centre de rotation, et pour votre scénario, ce centre devrait être le centre de votre image. Vous pouvez avoir un test comme celui-ci:

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

Et pour votre dernier code pour dessiner l'image args.DrawingSession.DrawImage(Missle_ROT, Convert.ToSingle(pointX), Convert.ToSingle(pointY));, il tirer encore l'image du (0,0) le point, vous devez également calculer le point central de l'image à la « pointx » et « pointu » comme ceci:

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

Answer 2

On veut dessiner une image (de dimensions w, h en pixels) sur l'écran, en rotation avec le centre au pixel spécifié coordonnées px et py. Vous devez trouver l'emplacement du coin supérieur gauche de l'image (avec les coordonnées x_A et y_A). Cela se fait avec une rotation des coordonnées de l'emplacement relatif du centre de l'image (h/2 et w/2).

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