@azleur/transform
v0.2.5
Published
This TypeScript module offers a common representation for 2D coordinate transformations where the old `x` and `y` axes are kept parallel to the new ones. It also offers tools for calculating transforms and applying them to 2D vectors.
Downloads
26
Readme
Axis-aligned transforms
This TypeScript module offers a common representation for 2D coordinate transformations where the old x
and y
axes are kept parallel to the new ones. It also offers tools for calculating transforms and applying them to 2D vectors.
How it works
AffineTransform
represents an axis-aligned coordinate transformation (map(x0,y0)
in some coordinate system to(x1, y1)
in a different coordinate system, keeping old and new (X, Y) axes parallel).- You can apply a transform to a point using
TransformPoint()
, and recover the original point usingInverseTransformPoint()
. - Same for rects, using
TransformRect()
andInverseTransformRect()
. - You can stretch coordinates from one rectangle to another by using
ScaleStretch()
. - You can fit coordinates from one rectangle into another (without stretching) by using
ScaleFit()
.
Example
const bounds1 = new Rect(0, 0, 2, 3); // w: 2, h: 3, center: { x: 1, y: 1.5 }.
const bounds2 = new Rect(1, 1, 5, 10); // w: 4, h: 9, center: { x: 3, y: 5.5 }.
const rect0 = new Rect(1, 1, 2, 2); // w: 1, h: 1, center: {x: 1.5, y: 1.5}.
const v0 = new Vec2(1, 1); // {x: 1, y: 1}.
// --------
// Same relative position within rect:
const stretch = ScaleStretch(bounds1, bounds2); // Scale x by 2 and y by 3, send corners to corners and center to center.
const v1 = TransformPoint(v0, stretch); // v1 == { x: 3, y: 4 }.
const v2 = InverseTransformPoint(v1, stretch); // v2 == v0.
const rect1 = TransformRect(r0, stretch); // rect1 == { min: { x: 3, y: 4 }, max: { x: 5, y: 7 } }.
const rect2 = InverseTransformRect(r0, stretch); // rect2 == { min: { x: 0, y: 0 }, max: { x: 0.5, y: 0.333 } }.
// --------
// Don't stretch vectors (zoom equally on all directions):
const fit = ScaleFit(bounds1, bounds2); // Scale x and y by 2, send center to center.
const v3 = TransformPoint(v0, fit); // v3 == { x: 3, y: 4.5 }.
const v4 = InverseTransformPoint(v3, fit); // v4 == v0.
// etc.