Class AffineTransform

Static Readonly IDENTITY

applyTransform

• applyTransform(context): void

• Multiplies the affine transform of the given context with this AffineTransform.

  Parameters

  • context: CanvasRenderingContext2D

    the canvas context to modify

  Returns void

concatenate

• concatenate(at): AffineTransform

• Right-multiply this AffineTransform by the given AffineTransform. This has the effect that the given AffineTransform will be applied to the input vector before the current AffineTransform.

  Concatenating a transform A to transform B is equivalent to matrix multiplication of the two transforms. Note that order matters: matrices are applied in right to left order when transforming a vector

  A B vector = A * (B * vector)
  Copy

  We can think of the B matrix being applied first, then the A matrix. This method returns the product with the input at matrix on the right

  this * at
  Copy

  The mathematics is as follows: this matrix is on the left, the other at matrix is on the right:

  [  m11  m21  dx  ]  [  a11  a21  ax  ]
  [  m12  m22  dy  ]  [  a12  a22  ay  ]
  [   0    0    1  ]  [   0    0   1   ]
  Copy

  Result is:

  [ (m11*a11 + m21*a12)  (m11*a21 + m21*a22)  (m11*ax + m21*ay + dx) ]
  [ (m12*a11 + m22*a12)  (m12*a21 + m22*a22)  (m12*ax + m22*ay + dy) ]
  [          0                    0                   1              ]
  Copy

  Parameters

  • at: AffineTransform

    the AffineTransform matrix to right-multiply this AffineTransform matrix by

  Returns AffineTransform

  the product of this AffineTransform matrix right-multiplied by the at AffineTransform matrix

lineTo

• lineTo(x, y, context): void

• Draw a line to the transformed point.

  Parameters

  • x: number

    horizontal coordinate

  • y: number

    vertical coordinate

  • context: CanvasRenderingContext2D

    the canvas context to modify

  Returns void

moveTo

• moveTo(x, y, context): void

• Sets current position in context to the transformed point.

  Parameters

  • x: number

    horizontal coordinate

  • y: number

    vertical coordinate

  • context: CanvasRenderingContext2D

    the canvas context to modify

  Returns void

rotate

• rotate(angle): AffineTransform

• Concatenates a rotation transformation to this AffineTransform.

  The mathematics is as follows: this matrix is on the left, the rotation matrix is on the right, and the angle is represented by t

  [  m11  m21  dx  ]  [ cos(t)  -sin(t)   0 ]
  [  m12  m22  dy  ]  [ sin(t)   cos(t)   0 ]
  [   0    0    1  ]  [  0        0       1 ]
  Copy

  Result is:

  [  (m11*cos(t) + m21*sin(t))  (-m11*sin(t) + m21*cos(t))  0  ]
  [  (m12*cos(t) + m22*sin(t))  (-m12*sin(t) + m22*cos(t))  0  ]
  [              0                          0               1  ]
  Copy

  Parameters

  • angle: number

    angle in radians to; positive angle rotates clockwise.

  Returns AffineTransform

  a new AffineTransform equal to this AffineTransform rotated by the given angle

scale

• scale(x, y): AffineTransform

• Concatenates a scaling transformation to this AffineTransform.

  The mathematics is as follows: this matrix is on the left, the scaling matrix is on the right:

  [  m11  m21  dx  ]  [  x   0   0  ]
  [  m12  m22  dy  ]  [  0   y   0  ]
  [   0    0    1  ]  [  0   0   1  ]
  Copy

  Result is:

  [  m11*x  m21*y  dx  ]
  [  m12*x  m22*y  dy  ]
  [   0      0      1  ]
  Copy

  Parameters

  • x: number

    factor to scale by in horizontal direction

  • y: number

    factor to scale by in vertical direction

  Returns AffineTransform

  a new AffineTransform equal to this AffineTransform scaled by the given x and y factors

setTransform

• setTransform(context): void

• Set the affine transform of the given context to match this AffineTransform.

  Parameters

  • context: CanvasRenderingContext2D

    the canvas context to modify

  Returns void

toString

• toString(): string

• Returns string

  Inherit Doc

transform

• transform(x, y?): Vector

• Apply this transform to the given point, returning the transformation of the given point.

  The mathematics is as follows:

  [  m11  m21  dx  ]  [ x ]
  [  m12  m22  dy  ]  [ y ]
  [   0    0    1  ]  [ 1 ]
  Copy

  Result is:

  [ m11 x + m21 y + dx ]
  [ m12 x + m22 y + dy ]
  [          1         ]
  Copy

  Parameters

  • x: number | GenericVector

    the x coordinate or Vector containing both x and y

  • Optional y: number

    the y coordinate (or undefined if a vector was passed for x)

  Returns Vector

  the transformation of the given point.

  Throws

  if x is not a GenericVector, or x, y are not numbers

translate

• translate(x, y?): AffineTransform

• Concatenates a translation to this AffineTransform.

  The mathematics is as follows: this matrix is on the left, the scaling matrix is on the right:

  [  m11  m21  dx  ]  [  1    0   x  ]
  [  m12  m22  dy  ]  [  0    1   y  ]
  [   0    0    1  ]  [  0    0   1  ]
  Copy

  Result is:

  [ m11  m21  (m11*x + m21*y + dx) ]
  [ m12  m22  (m12*x + m22*y + dy) ]
  [ 0    0            1            ]
  Copy

  Parameters

  • x: number | GenericVector

    the x coordinate or vector

  • Optional y: number

    the y coordinate (or undefined if a vector was passed for x)

  Returns AffineTransform

  a new AffineTransform equal to this AffineTransform translated by the given amount

  Throws

  if x is not a GenericVector, or x, y are not numbers