US-1889327: Fixed suggestions to matrix-representation-of-transformations.md and types-of-coordinate-systems.md file

dotnet-desktop-guide/framework/winforms/advanced/matrix-representation-of-transformations.md

@@ -1,6 +1,8 @@
 ---
 title: "Matrix Representation of Transformations"
-ms.date: "03/30/2017"
+description: Learn about matrix representation of linear and composite transformations.
+ms.date: "01/06/2022"
+ms.custom: devdivchpfy22
 dev_langs: 
   - "csharp"
   - "vb"
@@ -19,13 +21,13 @@ ms.assetid: 0659fe00-9e0c-41c4-9118-016f2404c905
 ---
 # Matrix Representation of Transformations
 An m×n matrix is a set of numbers arranged in m rows and n columns. The following illustration shows several matrices.  
-  
- ![Transformations](./media/aboutgdip05-art04.gif "AboutGdip05_art04")  
-  
+
+:::image type="content" source="media/aboutgdip05-art04.gif" alt-text="Illustration of matrices.":::
+
  You can add two matrices of the same size by adding individual elements. The following illustration shows two examples of matrix addition.  
 
- ![Transformations](./media/aboutgdip05-art05.gif "AboutGdip05_art05")  
-  
+:::image type="content" source="media/aboutgdip05-art05.gif" alt-text="Illustration of matrix addition.":::
+
  An m×n matrix can be multiplied by an n×p matrix, and the result is an m×p matrix. The number of columns in the first matrix must be the same as the number of rows in the second matrix. For example, a 4×2 matrix can be multiplied by a 2×3 matrix to produce a 4×3 matrix.  
 
  Points in the plane and rows and columns of a matrix can be thought of as vectors. For example, (2, 5) is a vector with two components, and (3, 7, 1) is a vector with three components. The dot product of two vectors is defined as follows:  
@@ -42,31 +44,31 @@ An m×n matrix is a set of numbers arranged in m rows and n columns. The followi
 
  The following illustration shows several examples of matrix multiplication.  
 
- ![Transformations](./media/aboutgdip05-art06.gif "AboutGdip05_art06")  
-  
+:::image type="content" source="media/aboutgdip05-art06.gif" alt-text="Illustration of matrix multiplication.":::
+
  If you think of a point in a plane as a 1×2 matrix, you can transform that point by multiplying it by a 2×2 matrix. The following illustration shows several transformations applied to the point (2, 1).  
 
- ![Transformations](./media/aboutgdip05-art07.gif "AboutGdip05_art07")  
-  
+:::image type="content" source="media/aboutgdip05-art07.gif" alt-text="Matrix transformation to a point in a plane.":::
+
  All of the transformations shown in the preceding figure are linear transformations. Certain other transformations, such as translation, are not linear, and cannot be expressed as multiplication by a 2×2 matrix. Suppose you want to start with the point (2, 1), rotate it 90 degrees, translate it 3 units in the x direction, and translate it 4 units in the y direction. You can accomplish this by using a matrix multiplication followed by a matrix addition.  
-  
- ![Transformations](./media/aboutgdip05-art08.gif "AboutGdip05_art08")  
-  
+
+:::image type="content" source="media/aboutgdip05-art08.gif" alt-text="Illustration of matrix multiplication followed by a matrix addition.":::
+
  A linear transformation (multiplication by a 2×2 matrix) followed by a translation (addition of a 1×2 matrix) is called an affine transformation. An alternative to storing an affine transformation in a pair of matrices (one for the linear part and one for the translation) is to store the entire transformation in a 3×3 matrix. To make this work, a point in the plane must be stored in a 1×3 matrix with a dummy 3rd coordinate. The usual technique is to make all 3rd coordinates equal to 1. For example, the point (2, 1) is represented by the matrix [2 1 1]. The following illustration shows an affine transformation (rotate 90 degrees; translate 3 units in the x direction, 4 units in the y direction) expressed as multiplication by a single 3×3 matrix.  
-  
- ![Transformations](./media/aboutgdip05-art09.gif "AboutGdip05_art09")  
+
+:::image type="content" source="media/aboutgdip05-art09.gif" alt-text="Illustration of an affine transformation.":::
 
  In the preceding example, the point (2, 1) is mapped to the point (2, 6). Note that the third column of the 3×3 matrix contains the numbers 0, 0, 1. This will always be the case for the 3×3 matrix of an affine transformation. The important numbers are the six numbers in columns 1 and 2. The upper-left 2×2 portion of the matrix represents the linear part of the transformation, and the first two entries in the 3rd row represent the translation.  
-  
- ![Transformations](./media/aboutgdip05-art10.gif "AboutGdip05_art10")  
+
+:::image type="content" source="media/aboutgdip05-art10.gif" alt-text="Illustration of linear and translation part of a matrix transformation.":::
 
  In GDI+ you can store an affine transformation in a <xref:System.Drawing.Drawing2D.Matrix> object. Because the third column of a matrix that represents an affine transformation is always (0, 0, 1), you specify only the six numbers in the first two columns when you construct a <xref:System.Drawing.Drawing2D.Matrix> object. The statement `Matrix myMatrix = new Matrix(0, 1, -1, 0, 3, 4)` constructs the matrix shown in the preceding figure.  
 
 ## Composite Transformations  
  A composite transformation is a sequence of transformations, one followed by the other. Consider the matrices and transformations in the following list:  
 
-|||  
-|-|-|  
+| Matrix | Transformation |  
+|----------|----------------|  
 |Matrix A|Rotate 90 degrees|  
 |Matrix B|Scale by a factor of 2 in the x direction|  
 |Matrix C|Translate 3 units in the y direction|  
@@ -80,8 +82,8 @@ An m×n matrix is a set of numbers arranged in m rows and n columns. The followi
  [2 1 1]D = [-2 5 1]  
 
  The following illustration shows the matrices A, B, C, and D.  
-  
- ![Transformations](./media/aboutgdip05-art12.gif "AboutGdip05_art12")  
+
+:::image type="content" source="media/aboutgdip05-art12.gif" alt-text="Illustration of matrix A, B, C, and D.":::
 
  The fact that the matrix of a composite transformation can be formed by multiplying the individual transformation matrices means that any sequence of affine transformations can be stored in a single <xref:System.Drawing.Drawing2D.Matrix> object.  
 
@@ -94,8 +96,8 @@ An m×n matrix is a set of numbers arranged in m rows and n columns. The followi
  [!code-vb[System.Drawing.CoordinateSystems#11](~/samples/snippets/visualbasic/VS_Snippets_Winforms/System.Drawing.CoordinateSystems/VB/Class1.vb#11)]  
 
  The following illustration shows the matrix.  
-  
- ![Transformations](./media/aboutgdip05-art13.gif "AboutGdip05_art13")  
+
+:::image type="content" source="media/aboutgdip05-art13.gif" alt-text="Matrix illustration of a composite transformation.":::
 
 ## See also
 

dotnet-desktop-guide/framework/winforms/advanced/types-of-coordinate-systems.md

@@ -1,6 +1,8 @@
 ---
 title: "Types of Coordinate Systems"
-ms.date: "03/30/2017"
+description: Learn about transformations and coordinate systems, including world, page, and device.
+ms.date: "01/06/2022"
+ms.custom: devdivchpfy22
 ms.topic: overview
 dev_langs: 
   - "csharp"
@@ -22,17 +24,17 @@ GDI+ uses three coordinate spaces: world, page, and device. World coordinates ar
 
 ## Transforms and Coordinate Systems  
  Suppose you want to work with a coordinate system that has its origin in the body of the client area rather than the upper-left corner. Say, for example, that you want the origin to be 100 pixels from the left edge of the client area and 50 pixels from the top of the client area. The following illustration shows such a coordinate system.  
-  
- ![Coordinate System](./media/aboutgdip05-art01.gif "AboutGdip05_art01")  
+
+:::image type="content" source="media/aboutgdip05-art01.gif" alt-text="Illustration of a coordinate system.":::
 
  When you make the call `myGraphics.DrawLine(myPen, 0, 0, 160, 80)`, you get the line shown in the following illustration.  
 
- ![Coordinate System](./media/aboutgdip05-art02.gif "AboutGdip05_art02")  
-  
+:::image type="content" source="media/aboutgdip05-art02.gif" alt-text="Illustration of a line in the coordinate system.":::
+
  The coordinates of the endpoints of your line in the three coordinate spaces are as follows:  
 
-|||  
-|-|-|  
+| Coordinate space | Endpoint coordinates |  
+|------------------|----------------------|  
 |World|(0, 0) to (160, 80)|  
 |Page|(100, 50) to (260, 130)|  
 |Device|(100, 50) to (260, 130)|  
@@ -64,8 +66,8 @@ GDI+ uses three coordinate spaces: world, page, and device. World coordinates ar
 
  If we assume that the display device has 96 dots per inch in the horizontal direction and 96 dots per inch in the vertical direction, the endpoints of the line in the preceding example have the following coordinates in the three coordinate spaces:  
 
-|||  
-|-|-|  
+| Coordinate space | Endpoint coordinates |  
+|------------------|----------------------|  
 |World|(0, 0) to (2, 1)|  
 |Page|(0, 0) to (2, 1)|  
 |Device|(0, 0) to (192, 96)|  
@@ -78,13 +80,13 @@ GDI+ uses three coordinate spaces: world, page, and device. World coordinates ar
  [!code-vb[System.Drawing.CoordinateSystems#34](~/samples/snippets/visualbasic/VS_Snippets_Winforms/System.Drawing.CoordinateSystems/VB/Class1.vb#34)]  
 
  The following illustration shows the line and coordinate system.  
-  
- ![Coordinate System](./media/aboutgdip05-art03.gif "AboutGdip05_art03")  
-  
+
+:::image type="content" source="media/aboutgdip05-art03.gif" alt-text="Illustration of a line and coordinate system.":::
+
  If we assume that the display device has 96 dots per inch in the horizontal direction and 96 dots per inch in the vertical direction, the endpoints of the line in the preceding example have the following coordinates in the three coordinate spaces:  
 
-|||  
-|-|-|  
+|Coordinate space | Endpoint coordinates |  
+|-----------------|----------------------|  
 |World|(0, 0) to (2, 1)|  
 |Page|(2, 0.5) to (4, 1.5)|  
 |Device|(192, 48) to (384, 144)|