기하 인터페이스 모듈 레벨 1

1. 소개

이 절은 규범적이지 않습니다.

이 명세는 3x2 및 4x4 차원의 점, 직사각형, 사사각형 그리고 변환 행렬을 표현하기 위한 여러 기하 인터페이스를 설명합니다.

SVG 인터페이스인 SVGPoint, SVGRect 그리고 SVGMatrix는 여기에서 정의한 인터페이스의 별칭으로, SVG, 캔버스 2D 컨텍스트 및 CSS 변환에서 사용하는 공통 인터페이스를 선호합니다. [SVG11] [HTML] [CSS3-TRANSFORMS]

2. DOMPoint 인터페이스

2D 또는 3D 점은 다음 WebIDL 인터페이스로 표현될 수 있습니다:

[Exposed=(Window,Worker),
 Serializable]
interface DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPointReadOnly fromPoint(optional DOMPointInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double z;
    readonly attribute unrestricted double w;

    [NewObject] DOMPoint matrixTransform(optional DOMMatrixInit matrix = {});

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGPoint]
interface DOMPoint : DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPoint fromPoint(optional DOMPointInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double z;
    inherit attribute unrestricted double w;
};

dictionary DOMPointInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double z = 0;
    unrestricted double w = 1;
};

다음 알고리즘은 DOMPointReadOnly 객체가 내부 멤버 변수 x 좌표, y 좌표, z 좌표 및 w 원근을 가지고 있음을 가정합니다. DOMPointReadOnly 뿐만 아니라 상속받는 인터페이스 DOMPoint는 이 변수들의 값을 접근 및 설정할 수 있어야 합니다.

인터페이스가 DOMPointReadOnly 객체를 속성이나 함수로 반환하는 경우 내부 멤버 변수 값을 수정할 수 있을 수도 있습니다. 이러한 인터페이스는 반드시 이 능력을 명시적으로 서술해야 합니다.

내부 멤버 변수는 그 어떤 방법으로도 외부에 노출되어서는 안 됩니다.

DOMPointReadOnly(x, y, z, w) 및 DOMPoint(x, y, z, w) 생성자가 호출될 때 다음 절차를 실행해야 합니다:

1. point를 새로운 DOMPointReadOnly 또는 DOMPoint 객체로 초기화합니다.

2. point의 변수 x 좌표를 x로, y 좌표를 y로, z 좌표를 z로, w 원근을 w로 설정합니다.

3. point를 반환합니다.

fromPoint(other) 정적 메서드는 DOMPointReadOnly 에서 DOMPointReadOnly를 딕셔너리에서 생성 해야 합니다.

fromPoint(other) 정적 메서드는 DOMPoint에서 DOMPoint를 딕셔너리에서 생성 해야 합니다.

DOMPointReadOnly를 딕셔너리에서 생성 other 또는 DOMPoint를 딕셔너리에서 생성 other를 하려면 다음 단계를 따르세요:

1. point를 새로운 DOMPointReadOnly 또는 DOMPoint 객체로 초기화합니다.

2. point의 변수 x 좌표를 other의 x 딕셔너리 멤버로, y 좌표를 other의 y 딕셔너리 멤버로, z 좌표를 other의 z 딕셔너리 멤버로, w 원근을 other의 w 딕셔너리 멤버로 설정합니다.

3. point를 반환합니다.

matrixTransform(matrix) 메서드는 호출될 때 다음 절차를 실행해야 합니다:

1. matrixObject를 딕셔너리에서 DOMMatrix 생성을 matrix에 대해 호출한 결과로 합니다.

2. 현재 점과 matrixObject를 인자로 하여 행렬로 점 변환하기를 호출한 결과를 반환합니다. 현재 점은 수정되지 않습니다.

var point = new DOMPoint(5, 4);
var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]);
var transformedPoint = point.matrixTransform(matrix);

2.1. 행렬로 점 변환하기

점을 행렬로 변환하기를 하려면 point와 matrix를 기준으로 다음을 따라야 합니다:

1. x를 point의 x 좌표로 합니다.

2. y를 point의 y 좌표로 합니다.

3. z를 point의 z 좌표로 합니다.

4. w를 point의 w 원근으로 합니다.

5. pointVector를 x, y, z, w 순서의 요소로 구성된 새로운 컬럼 벡터로 합니다.

   $\left[\begin{array}{c}x\\ y\\ z\\ w\end{array}\right]$

6. pointVector를 전치 곱하여 matrix와 곱한 값으로 설정합니다.

7. transformedPoint를 새로운 DOMPoint 객체로 합니다.

8. transformedPoint의 x 좌표를 pointVector의 첫 번째 요소로 설정합니다.

9. transformedPoint의 y 좌표를 pointVector의 두 번째 요소로 설정합니다.

10. transformedPoint의 z 좌표를 pointVector의 세 번째 요소로 설정합니다.

11. transformedPoint의 w 원근을 pointVector의 네 번째 요소로 설정합니다.

12. transformedPoint를 반환합니다.

참고: matrix의 is 2D가 true이고, point의 z 좌표가 0 또는 -0이며 point의 w 원근이 1이면 이것은 2D 변환입니다. 그렇지 않으면 3D 변환입니다.

3. DOMRect 인터페이스

DOMRectReadOnly 인터페이스를 구현하는 객체는 직사각형을 나타냅니다.

직사각형은 다음과 같은 속성을 가집니다:

기점(origin)

직사각형의 너비(width)가 음이 아니면 수평 기점은 왼쪽 모서리이고, 그렇지 않으면 오른쪽 모서리입니다. 마찬가지로 높이(height)가 음이 아니면 수직 기점은 상단 모서리이고, 그렇지 않으면 하단 모서리입니다.

x 좌표

뷰포트의 왼쪽 모서리와 직사각형의 기점 사이의 수평 거리입니다.

y 좌표

뷰포트의 상단 모서리와 직사각형의 기점 사이의 수직 거리입니다.

너비(width)

직사각형의 너비입니다. 음수일 수 있습니다.

높이(height)

직사각형의 높이입니다. 음수일 수 있습니다.

[Exposed=(Window,Worker),
 Serializable]
interface DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRectReadOnly fromRect(optional DOMRectInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double width;
    readonly attribute unrestricted double height;
    readonly attribute unrestricted double top;
    readonly attribute unrestricted double right;
    readonly attribute unrestricted double bottom;
    readonly attribute unrestricted double left;

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGRect]
interface DOMRect : DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRect fromRect(optional DOMRectInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

dictionary DOMRectInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double width = 0;
    unrestricted double height = 0;
};

다음 알고리즘은 DOMRectReadOnly 객체가 내부 멤버 변수 x 좌표, y 좌표, 너비 값 및 높이 값을 가지고 있음을 가정합니다. DOMRectReadOnly 뿐만 아니라 상속 인터페이스 DOMRect는 이 변수들의 값을 접근 및 설정할 수 있어야 합니다.

속성이나 함수로 DOMRectReadOnly 객체를 반환하는 인터페이스는 내부 멤버 변수 값을 수정할 수 있을 수도 있습니다. 이런 인터페이스는 이런 기능을 명시적으로 기술해야 합니다.

내부 멤버 변수는 어떠한 방식으로도 노출되어서는 안 됩니다.

DOMRectReadOnly(x, y, width, height) 및 DOMRect(x, y, width, height) 생성자는 호출될 때 다음 절차를 따라야 합니다:

1. rect를 새로운 DOMRectReadOnly 또는 DOMRect 객체로 만듭니다.

2. rect의 변수 x 좌표를 x로, y 좌표를 y로, 너비 값을 width로, 높이 값을 height로 설정합니다.

3. rect를 반환합니다.

fromRect(other) 정적 메서드는 DOMRectReadOnly 에서 딕셔너리에서 DOMRectReadOnly 생성을 other로 실행해야 합니다.

fromRect(other) 정적 메서드는 DOMRect 에서 딕셔너리에서 DOMRect 생성을 other로 실행해야 합니다.

DOMRectReadOnly를 딕셔너리에서 생성 other 또는 DOMRect를 딕셔너리에서 생성 other를 하려면 다음 단계를 따르세요:

1. rect를 새로운 DOMRectReadOnly 또는 DOMRect로 만듭니다.

2. rect의 변수 x 좌표를 other의 x 딕셔너리 멤버로, y 좌표를 other의 y 딕셔너리 멤버로, 너비 값을 other의 width 딕셔너리 멤버로, 높이 값을 other의 height 딕셔너리 멤버로 설정합니다.

3. rect를 반환합니다.

4. DOMRectList 인터페이스

[Exposed=Window]
interface DOMRectList {
    readonly attribute unsigned long length;
    getter DOMRect? item(unsigned long index);
};

length 속성은 해당 객체에 연관된 모든 DOMRect 객체의 총 개수를 반환해야 합니다.

item(index) 메서드는, 호출될 때 index가 해당 객체에 연관된 DOMRect 객체의 개수보다 크거나 같으면 null을 반환해야 합니다. 그렇지 않으면 index에 해당하는 DOMRect 객체를 반환해야 합니다. 인덱스는 0부터 시작합니다.

DOMRectList 는 오직 레거시 웹 콘텐츠 호환성을 위해 존재합니다. 새로운 API를 지정할 때에는 DOMRectList를 사용하지 말아야 하며, 대신 sequence<DOMRect>를 사용해야 합니다. [WEBIDL]

5. DOMQuad 인터페이스

DOMQuad 인터페이스를 구현하는 객체는 사사각형을 나타냅니다.

[Exposed=(Window,Worker),
 Serializable]
interface DOMQuad {
    constructor(optional DOMPointInit p1 = {}, optional DOMPointInit p2 = {},
            optional DOMPointInit p3 = {}, optional DOMPointInit p4 = {});

    [NewObject] static DOMQuad fromRect(optional DOMRectInit other = {});
    [NewObject] static DOMQuad fromQuad(optional DOMQuadInit other = {});

    [SameObject] readonly attribute DOMPoint p1;
    [SameObject] readonly attribute DOMPoint p2;
    [SameObject] readonly attribute DOMPoint p3;
    [SameObject] readonly attribute DOMPoint p4;
    [NewObject] DOMRect getBounds();

    [Default] object toJSON();
};

dictionary DOMQuadInit {
  DOMPointInit p1;
  DOMPointInit p2;
  DOMPointInit p3;
  DOMPointInit p4;
};

다음 알고리즘은 DOMQuad 객체가 내부 멤버 변수 첫 번째 점, 두 번째 점, 세 번째 점, 네 번째 점을 가지고 있음을 가정합니다. 이 값들은 DOMPoint 객체입니다. DOMQuad는 이 변수값을 접근하고 설정할 수 있어야 하며, 작성자는 이 DOMPoint 객체를 수정할 수 있고, 이는 사사각형 객체에 직접 영향을 줍니다.

속성이나 함수로 DOMQuad 객체를 반환하는 인터페이스는 내부 멤버 변수 값을 수정할 수 있을 수도 있습니다. 이런 인터페이스는 이런 능력을 명확히 기술해야 합니다.

내부 멤버 변수는 외부에 노출되지 않아야 합니다.

DOMQuad(p1, p2, p3, p4) 생성자를 호출하면 다음 절차를 따라야 합니다:

1. point1을 p1 딕셔너리의 각 멤버 값으로 속성을 설정한 새로운 DOMPoint 객체로 초기화합니다.

2. point2를 p2 딕셔너리의 각 멤버 값으로 속성을 설정한 새로운 DOMPoint 객체로 초기화합니다.

3. point3를 p3 딕셔너리의 각 멤버 값으로 속성을 설정한 새로운 DOMPoint 객체로 초기화합니다.

4. point4를 p4 딕셔너리의 각 멤버 값으로 속성을 설정한 새로운 DOMPoint 객체로 초기화합니다.

5. DOMQuad의 첫 번째 점은 point1, 두 번째 점은 point2, 세 번째 점은 point3, 네 번째 점은 point4로 설정해 반환합니다.

참고: DOMPoint 및 DOMPointReadOnly 매개변수도 전달할 수 있습니다. 전달된 매개변수는 내부적으로 WebIDL 규칙을 따라 올바른 객체 타입으로 변환됩니다. [WEBIDL]

fromRect(other) 정적 메서드는 DOMQuad에서 DOMRectInit 딕셔너리로부터 DOMQuad 생성을 other로 실행해야 합니다.

DOMRectInit 딕셔너리로부터 DOMQuad 생성 other는 다음 절차를 따릅니다:

1. x, y, width, height를 각각 other의 x, y, width, height로 설정합니다.

2. point1을 DOMPoint 객체로 초기화합니다. x 좌표는 x, y 좌표는 y, z 좌표는 0, w 원근은 1.

3. point2를 DOMPoint 객체로 초기화합니다. x 좌표는 x+width, y 좌표는 y, z 좌표는 0, w 원근은 1.

4. point3를 DOMPoint 객체로 초기화합니다. x 좌표는 x+width, y 좌표는 y+height, z 좌표는 0, w 원근은 1.

5. point4를 DOMPoint 객체로 초기화합니다. x 좌표는 x, y 좌표는 y+height, z 좌표는 0, w 원근은 1.

6. DOMQuad의 첫 번째 점은 point1, 두 번째 점은 point2, 세 번째 점은 point3, 네 번째 점은 point4로 설정해 반환합니다.

fromQuad(other) 정적 메서드는 DOMQuad에서 DOMQuadInit 딕셔너리로부터 DOMQuad 생성을 other로 실행해야 합니다.

DOMQuadInit 딕셔너리로부터 DOMQuad 생성 other는 다음 절차를 따릅니다:

1. point1을 other의 p1 딕셔너리 멤버가 존재하면 딕셔너리로부터 DOMPoint 생성 결과로 초기화합니다.

2. point2를 other의 p2 딕셔너리 멤버가 존재하면 딕셔너리로부터 DOMPoint 생성 결과로 초기화합니다.

3. point3를 other의 p3 딕셔너리 멤버가 존재하면 딕셔너리로부터 DOMPoint 생성 결과로 초기화합니다.

4. point4를 other의 p4 딕셔너리 멤버가 존재하면 딕셔너리로부터 DOMPoint 생성 결과로 초기화합니다.

5. DOMQuad의 첫 번째 점은 point1, 두 번째 점은 point2, 세 번째 점은 point3, 네 번째 점은 point4로 설정해 반환합니다.

getBounds() 메서드는 호출될 때 다음 알고리즘을 따라야 합니다:

1. bounds를 DOMRect 객체로 초기화합니다.

2. left를 NaN-안전 최소값으로 합니다. 첫 번째 점의 x 좌표, 두 번째 점의 x 좌표, 세 번째 점의 x 좌표, 네 번째 점의 x 좌표.

3. top를 NaN-안전 최소값으로 합니다. 첫 번째 점의 y 좌표, 두 번째 점의 y 좌표, 세 번째 점의 y 좌표, 네 번째 점의 y 좌표.

4. right를 NaN-안전 최대값으로 합니다. 첫 번째 점의 x 좌표, 두 번째 점의 x 좌표, 세 번째 점의 x 좌표, 네 번째 점의 x 좌표.

5. bottom를 NaN-안전 최대값으로 합니다. 첫 번째 점의 y 좌표, 두 번째 점의 y 좌표, 세 번째 점의 y 좌표, 네 번째 점의 y 좌표.

6. bounds의 x 좌표는 left, y 좌표는 top, 너비 값은 right-left, 높이 값은 bottom-top으로 설정합니다.

7. bounds를 반환합니다.

var point = new DOMPoint(2, 0);
var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10});

var rect = new DOMRect(2, 0, 10, 10);
var quad2 = DOMQuad.fromRect(rect);

new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180});

6. DOMMatrix 인터페이스

DOMMatrix 및 DOMMatrixReadOnly 인터페이스는 그래픽 컨텍스트에서 변환을 설명하기 위한 수학적 행렬을 나타냅니다. 아래 절에서는 인터페이스의 세부 사항을 설명합니다.

아래 절에서 용어는 다음과 같은 의미를 갖습니다:

후행 곱(post-multiply)

A를 B로 후행 곱(post-multiply)하면 A · B와 같습니다.

선행 곱(pre-multiply)

A를 B로 선행 곱(pre-multiply)하면 B · A와 같습니다.

곱(multiply)

A를 B로 곱하면 A · B와 같습니다.

[Exposed=(Window,Worker),
 Serializable]
interface DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrixReadOnly fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrixReadOnly fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrixReadOnly fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    readonly attribute unrestricted double a;
    readonly attribute unrestricted double b;
    readonly attribute unrestricted double c;
    readonly attribute unrestricted double d;
    readonly attribute unrestricted double e;
    readonly attribute unrestricted double f;

    readonly attribute unrestricted double m11;
    readonly attribute unrestricted double m12;
    readonly attribute unrestricted double m13;
    readonly attribute unrestricted double m14;
    readonly attribute unrestricted double m21;
    readonly attribute unrestricted double m22;
    readonly attribute unrestricted double m23;
    readonly attribute unrestricted double m24;
    readonly attribute unrestricted double m31;
    readonly attribute unrestricted double m32;
    readonly attribute unrestricted double m33;
    readonly attribute unrestricted double m34;
    readonly attribute unrestricted double m41;
    readonly attribute unrestricted double m42;
    readonly attribute unrestricted double m43;
    readonly attribute unrestricted double m44;

    readonly attribute boolean is2D;
    readonly attribute boolean isIdentity;

    // Immutable transform methods
    [NewObject] DOMMatrix translate(optional unrestricted double tx = 0,
                                    optional unrestricted double ty = 0,
                                    optional unrestricted double tz = 0);
    [NewObject] DOMMatrix scale(optional unrestricted double scaleX = 1,
                                optional unrestricted double scaleY,
                                optional unrestricted double scaleZ = 1,
                                optional unrestricted double originX = 0,
                                optional unrestricted double originY = 0,
                                optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix scaleNonUniform(optional unrestricted double scaleX = 1,
                                          optional unrestricted double scaleY = 1);
    [NewObject] DOMMatrix scale3d(optional unrestricted double scale = 1,
                                  optional unrestricted double originX = 0,
                                  optional unrestricted double originY = 0,
                                  optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix rotate(optional unrestricted double rotX = 0,
                                 optional unrestricted double rotY,
                                 optional unrestricted double rotZ);
    [NewObject] DOMMatrix rotateFromVector(optional unrestricted double x = 0,
                                           optional unrestricted double y = 0);
    [NewObject] DOMMatrix rotateAxisAngle(optional unrestricted double x = 0,
                                          optional unrestricted double y = 0,
                                          optional unrestricted double z = 0,
                                          optional unrestricted double angle = 0);
    [NewObject] DOMMatrix skewX(optional unrestricted double sx = 0);
    [NewObject] DOMMatrix skewY(optional unrestricted double sy = 0);
    [NewObject] DOMMatrix multiply(optional DOMMatrixInit other = {});
    [NewObject] DOMMatrix flipX();
    [NewObject] DOMMatrix flipY();
    [NewObject] DOMMatrix inverse();

    [NewObject] DOMPoint transformPoint(optional DOMPointInit point = {});
    [NewObject] Float32Array toFloat32Array();
    [NewObject] Float64Array toFloat64Array();

    [Exposed=Window] stringifier;
    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=(SVGMatrix,WebKitCSSMatrix)]
interface DOMMatrix : DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrix fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrix fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrix fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    inherit attribute unrestricted double a;
    inherit attribute unrestricted double b;
    inherit attribute unrestricted double c;
    inherit attribute unrestricted double d;
    inherit attribute unrestricted double e;
    inherit attribute unrestricted double f;

    inherit attribute unrestricted double m11;
    inherit attribute unrestricted double m12;
    inherit attribute unrestricted double m13;
    inherit attribute unrestricted double m14;
    inherit attribute unrestricted double m21;
    inherit attribute unrestricted double m22;
    inherit attribute unrestricted double m23;
    inherit attribute unrestricted double m24;
    inherit attribute unrestricted double m31;
    inherit attribute unrestricted double m32;
    inherit attribute unrestricted double m33;
    inherit attribute unrestricted double m34;
    inherit attribute unrestricted double m41;
    inherit attribute unrestricted double m42;
    inherit attribute unrestricted double m43;
    inherit attribute unrestricted double m44;

    // Mutable transform methods
    DOMMatrix multiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix preMultiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix translateSelf(optional unrestricted double tx = 0,
                            optional unrestricted double ty = 0,
                            optional unrestricted double tz = 0);
    DOMMatrix scaleSelf(optional unrestricted double scaleX = 1,
                        optional unrestricted double scaleY,
                        optional unrestricted double scaleZ = 1,
                        optional unrestricted double originX = 0,
                        optional unrestricted double originY = 0,
                        optional unrestricted double originZ = 0);
    DOMMatrix scale3dSelf(optional unrestricted double scale = 1,
                          optional unrestricted double originX = 0,
                          optional unrestricted double originY = 0,
                          optional unrestricted double originZ = 0);
    DOMMatrix rotateSelf(optional unrestricted double rotX = 0,
                         optional unrestricted double rotY,
                         optional unrestricted double rotZ);
    DOMMatrix rotateFromVectorSelf(optional unrestricted double x = 0,
                                   optional unrestricted double y = 0);
    DOMMatrix rotateAxisAngleSelf(optional unrestricted double x = 0,
                                  optional unrestricted double y = 0,
                                  optional unrestricted double z = 0,
                                  optional unrestricted double angle = 0);
    DOMMatrix skewXSelf(optional unrestricted double sx = 0);
    DOMMatrix skewYSelf(optional unrestricted double sy = 0);
    DOMMatrix invertSelf();

    [Exposed=Window] DOMMatrix setMatrixValue(DOMString transformList);
};

dictionary DOMMatrix2DInit {
    unrestricted double a;
    unrestricted double b;
    unrestricted double c;
    unrestricted double d;
    unrestricted double e;
    unrestricted double f;
    unrestricted double m11;
    unrestricted double m12;
    unrestricted double m21;
    unrestricted double m22;
    unrestricted double m41;
    unrestricted double m42;
};

dictionary DOMMatrixInit : DOMMatrix2DInit {
    unrestricted double m13 = 0;
    unrestricted double m14 = 0;
    unrestricted double m23 = 0;
    unrestricted double m24 = 0;
    unrestricted double m31 = 0;
    unrestricted double m32 = 0;
    unrestricted double m33 = 1;
    unrestricted double m34 = 0;
    unrestricted double m43 = 0;
    unrestricted double m44 = 1;
    boolean is2D;
};

다음 알고리즘은 DOMMatrixReadOnly 객체가 내부 멤버 변수 m11 요소, m12 요소, m13 요소, m14 요소, m21 요소, m22 요소, m23 요소, m24 요소, m31 요소, m32 요소, m33 요소, m34 요소, m41 요소, m42 요소, m43 요소, m44 요소 그리고 is 2D를 가지고 있음을 가정합니다. DOMMatrixReadOnly 뿐만 아니라 상속 인터페이스 DOMMatrix는 이 변수들의 값을 접근 및 설정할 수 있어야 합니다.

속성이나 함수로 DOMMatrixReadOnly 객체를 반환하는 인터페이스는 내부 멤버 변수 값을 수정할 수 있을 수도 있습니다. 이런 인터페이스는 이런 기능을 명확히 명시해야 합니다.

내부 멤버 변수는 절대 노출되어서는 안 됩니다.

DOMMatrix 및 DOMMatrixReadOnly 인터페이스는 SVG의 SVGMatrix 인터페이스를 대체합니다. [SVG11]

6.1. DOMMatrix2DInit 및 DOMMatrixInit 딕셔너리

DOMMatrix2DInit 또는 DOMMatrixInit 딕셔너리 dict를 검증 및 수정(2D)하려면 다음 단계를 실행하십시오:

1. 만약 dict에 대해 다음 조건 중 하나 이상이 참이라면 TypeError 예외를 발생시키고 이 단계를 중단하십시오.

   • a 와 m11 모두 존재하며, SameValueZero(a, m11) 가 false인 경우

   • b 와 m12 모두 존재하며 SameValueZero(b, m12) 가 false인 경우

   • c 와 m21 모두 존재하며 SameValueZero(c, m21) 가 false인 경우

   • d 와 m22 모두 존재하며 SameValueZero(d, m22) 가 false인 경우

   • e 와 m41 모두 존재하며 SameValueZero(e, m41) 가 false인 경우

   • f 와 m42 모두 존재하며 SameValueZero(f, m42) 가 false인 경우

2. m11 값이 없으면, 멤버 a 값 또는 그 값도 없으면 1로 설정하세요.

3. m12 값이 없으면, 멤버 b 값 또는 그 값도 없으면 0로 설정하세요.

4. m21 값이 없으면, 멤버 c 값 또는 그 값도 없으면 0로 설정하세요.

5. m22 값이 없으면, 멤버 d 값 또는 그 값도 없으면 1로 설정하세요.

6. m41 값이 없으면, 멤버 e 값 또는 그 값도 없으면 0로 설정하세요.

7. m42 값이 없으면, 멤버 f 값 또는 그 값도 없으면 0로 설정하세요.

참고: SameValueZero 비교 알고리즘은 두 NaN 값에 대해 true를 반환하며, 0 및 -0도 역시 true를 반환합니다. [ECMA-262]

DOMMatrixInit 딕셔너리 dict를 검증 및 수정하려면 다음 단계를 실행하세요:

1. 검증 및 수정(2D)를 dict에 적용하세요.

2. is2D 값이 true이고 다음 중 하나라도 m13, m14, m23, m24, m31, m32, m34, m43 값이 0 또는 -0이 아닌 경우, 또는 m33, m44 값이 1이 아닌 경우, TypeError 예외를 발생시키고 중단하세요.

3. is2D 값이 없고 다음 중 하나라도 m13, m14, m23, m24, m31, m32, m34, m43 값이 0 또는 -0이 아닌 경우, 또는 m33, m44 값이 1이 아닌 경우, is2D 값을 false로 설정하세요.

4. is2D 값이 여전히 없으면 true로 설정하세요.

6.2. 문자열을 추상 행렬로 파싱하기

문자열을 추상 행렬로 파싱하기는, 문자열 transformList에 대해 아래 단계를 수행하는 것을 의미합니다. 4x4 추상 행렬과 boolean 2dTransform을 반환하거나, 실패를 반환합니다.

1. transformList가 빈 문자열이면 "matrix(1, 0, 0, 1, 0, 0)"로 설정합니다.

2. 파싱을 transformList에 대해 CSS transform 속성 문법으로 수행하세요. 결과는 <transform-list>, 키워드 none, 혹은 실패입니다. parsedValue가 실패이거나, <transform-function> 중 <length> 값이 절대 단위가 아니거나, none 이외의 키워드가 사용되면 실패를 반환합니다. [CSS3-SYNTAX] [CSS3-TRANSFORMS]

3. parsedValue가 none이라면, 단일 단위 행렬을 포함하는 <transform-list>로 parsedValue를 설정합니다.

4. 2dTransform은 parsedValue의 2D/3D 차원 상태를 기록합니다.

   parsedValue가 3차원 변환 함수를 포함하는 경우

   2dTransform을 false로 설정합니다.

   그 외의 경우

   2dTransform을 true로 설정합니다.

5. 모든 <transform-function>을 “변환 함수의 수학적 설명”을 따라 4x4 추상 행렬로 변환합니다. [CSS3-TRANSFORMS]

6. matrix를 이 섹션의 첫 그림과 같은 4x4 추상 행렬로 초기화합니다. 모든 행렬을 왼쪽에서 오른쪽으로 후행 곱(post-multiply)해서 그 곱을 matrix로 설정합니다.

7. matrix와 2dTransform을 반환합니다.

6.3. DOMMatrixReadOnly 및 DOMMatrix 객체 생성

2D 행렬 생성하기는 type이 DOMMatrixReadOnly 또는 DOMMatrix이고, init이 6개 요소인 시퀀스일 때 다음을 수행합니다:

1. matrix를 type의 새 인스턴스로 초기화합니다.

2. m11 요소, m12 요소, m21 요소, m22 요소, m41 요소, m42 요소를 init의 값 순서대로 차례로 설정합니다.

3. m13 요소, m14 요소, m23 요소, m24 요소, m31 요소, m32 요소, m34 요소, m43 요소는 0으로 설정합니다.

4. m33 요소 및 m44 요소는 1로 설정합니다.

5. is 2D를 true로 설정합니다.

6. matrix를 반환합니다.

3D 행렬 생성하기는 type이 DOMMatrixReadOnly 또는 DOMMatrix이고, init이 16개 요소 시퀀스일 때 다음을 수행합니다:

1. matrix를 type의 새 인스턴스로 초기화합니다.

2. m11 요소부터 m44 요소까지 init의 값을 컬럼 우선(열 우선) 순서로 설정합니다.

3. is 2D를 false로 설정합니다.

4. matrix를 반환합니다.

DOMMatrixReadOnly(init) 및 DOMMatrix(init) 생성자는 아래 절차를 따라야 합니다:

init이 생략된 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해, 시퀀스 [1, 0, 0, 1, 0, 0]을 넣어 2D 행렬 생성하기를 호출한 결과를 반환합니다.

init이 DOMString인 경우

1. current global object가 Window가 아니면 TypeError 예외를 던집니다.

2. init을 추상 행렬로 파싱하고 matrix와 2dTransform을 얻습니다. 결과가 실패면 SyntaxError DOMException을 던집니다.

3. 2dTransform이 true인 경우

   DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를, [m11, m12, m21, m22, m41, m42] 값으로 호출해 반환합니다.

   그 외의 경우

   DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 3D 행렬 생성하기를, 16개 값으로 호출해 반환합니다.

init이 6개 요소 시퀀스인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를 init값으로 호출해 반환합니다.

init이 16개 요소 시퀀스인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 3D 행렬 생성하기를 init값으로 호출해 반환합니다.

그외의 경우

TypeError 예외를 던집니다.

fromMatrix(other) 정적 메서드는 DOMMatrixReadOnly 에서 딕셔너리로부터 DOMMatrixReadOnly 생성을 other로 실행해야 합니다.

fromMatrix(other) 정적 메서드는 DOMMatrix 에서 딕셔너리로부터 DOMMatrix 생성을 other로 실행해야 합니다.

2D 딕셔너리로부터 DOMMatrixReadOnly 생성 other 또는 2D 딕셔너리로부터 DOMMatrix 생성 other를 위해 다음 단계를 수행하세요:

1. 검증 및 수정(2D)를 other에 적용하세요.

2. 다음 순서로 other의 m11, m12, m21, m22, m41 그리고 m42 값으로 DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를 호출해 반환합니다.

딕셔너리로부터 DOMMatrixReadOnly 생성 other나 딕셔너리로부터 DOMMatrix 생성 other는 아래 절차를 따릅니다:

1. 검증 및 수정를 other에 적용하세요.

2. is2D 딕셔너리 멤버가 true인 경우

   다음 순서로 other의 m11, m12, m21, m22, m41 그리고 m42 값으로 DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를 호출해 반환합니다.

   그 외의 경우

   다음 순서로 other의 m11, m12, m13, ..., m44 값으로 DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 3D 행렬 생성하기를 호출해 반환합니다.

fromFloat32Array(array32) 정적 메서드는 DOMMatrixReadOnly 및 fromFloat32Array(array32) 정적 메서드는 DOMMatrix에서 아래 절차를 따라야 합니다:

array32가 6개 요소인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를, array32값을 순서대로 넣어 호출해 반환합니다.

array32가 16개 요소인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 3D 행렬 생성하기를 array32값을 순서대로 넣어 호출해 반환합니다.

그외의 경우

TypeError 예외를 던집니다.

fromFloat64Array(array64) 정적 메서드는 DOMMatrixReadOnly 및 fromFloat64Array(array64) 정적 메서드는 DOMMatrix에서 아래 절차를 따라야 합니다:

array64가 6개 요소인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 2D 행렬 생성하기를, array64 값들을 순서대로 넣어 호출해 반환합니다.

array64가 16개 요소인 경우

DOMMatrixReadOnly 또는 DOMMatrix 타입에 대해 3D 행렬 생성하기를, array64 값들을 순서대로 넣어 호출해 반환합니다.

그외의 경우

TypeError 예외를 던집니다.

6.4. DOMMatrix 속성

다음 속성 m11 부터 m44 까지는 행렬 인터페이스의 16개 항목에 대응합니다.

다음 속성들은 DOMMatrixReadOnly 의 상태 정보를 제공합니다.

모든 DOMMatrixReadOnly 객체는 boolean is 2D 플래그가 있어야 합니다. 이 플래그는 아래를 나타냅니다:

1. 현재 행렬이 2D 행렬로 초기화되었을 때. 자세한 내용은 개별 생성자를 참조하세요.

2. 오직 2D 변환 연산만 적용되었습니다. 각 가변 및 불변 변환 메서드마다 is 2D를 false로 설정해야 하는지 정의합니다.

참고: is 2D는 DOMMatrix 객체에서 이전에 false로 설정된 경우 true로 다시 설정될 수 없습니다. 단, setMatrixValue() 메서드 호출 시는 예외입니다.

6.5. 불변 변환 메서드

아래 메서드들은 현재 행렬을 수정하지 않고 새로운 DOMMatrix 객체를 반환합니다.

translate(tx, ty, tz)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 translateSelf() 변환을 tx, ty, tz 인자를 사용하여 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

scale(scaleX, scaleY, scaleZ, originX, originY, originZ)

1. scaleY가 없으면 scaleY를 scaleX 값으로 설정합니다.

2. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

3. result에 scaleSelf() 변환을 scaleX, scaleY, scaleZ, originX, originY, originZ 인자로 수행합니다.

4. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

scaleNonUniform(scaleX, scaleY)

참고: 레거시 호환을 위해 SVG 1.1에서 정의된 SVGMatrix 와 호환을 위해 지원됩니다. 작성자는 scale() 사용을 권장합니다.

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 scaleSelf() 변환을 scaleX, scaleY, 1, 0, 0, 0 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

scale3d(scale, originX, originY, originZ)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 scale3dSelf() 변환을 scale, originX, originY, originZ 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

rotate(rotX, rotY, rotZ)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 rotateSelf() 변환을 rotX, rotY, rotZ 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

rotateFromVector(x, y)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 rotateFromVectorSelf() 변환을 x, y 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

rotateAxisAngle(x, y, z, angle)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 rotateAxisAngleSelf() 변환을 x, y, z, angle 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

skewX(sx)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 skewXSelf() 변환을 sx 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

skewY(sy)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 skewYSelf() 변환을 sy 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

multiply(other)

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 multiplySelf() 변환을 other 인자로 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

flipX()

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result를 후행 곱(post-multiply) new DOMMatrix([-1, 0, 0, 1, 0, 0])와 곱합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

flipY()

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result를 후행 곱(post-multiply) new DOMMatrix([1, 0, 0, -1, 0, 0])와 곱합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

inverse()

1. result를 현재 행렬의 값으로 초기화된 행렬로 만듭니다.

2. result에 invertSelf() 변환을 수행합니다.

3. result를 반환합니다.

현재 행렬은 수정되지 않습니다.

다음 메서드들은 현재 행렬을 수정하지 않습니다.

transformPoint(point)

pointObject를 딕셔너리로부터 DOMPoint 생성에 point를 넣어 호출한 결과로 초기화합니다. pointObject와 현재 행렬을 인자로 행렬로 점 변환하기를 호출한 결과를 반환합니다. 전달된 인자는 수정되지 않습니다.

toFloat32Array()

현재 행렬의 m11 부터 m44 까지 16개 요소를 컬럼 우선 순서로 직렬화한 Float32Array를 반환합니다.

toFloat64Array()

현재 행렬의 m11 부터 m44 까지 16개 요소를 컬럼 우선 순서로 직렬화한 Float64Array를 반환합니다.

문자열화 동작(stringification behavior)

1. m11 요소부터 m44 요소 중 하나라도 유한한 값이 아니면 "InvalidStateError" DOMException을 던집니다.

   참고: CSS 문법은 NaN 또는 Infinity 값을 표현할 수 없습니다.

2. string을 빈 문자열로 초기화합니다.

3. is 2D가 true라면:

   1. string에 "matrix("를 추가합니다.

   2. ! ToString(m11 요소)를 string에 추가합니다.

   3. string에 ", "를 추가합니다.

   4. ! ToString(m12 요소)를 string에 추가합니다.

   5. string에 ", "를 추가합니다.

   6. ! ToString(m21 요소)를 string에 추가합니다.

   7. string에 ", "를 추가합니다.

   8. ! ToString(m22 요소)를 string에 추가합니다.

   9. string에 ", "를 추가합니다.

   10. ! ToString(m41 요소)를 string에 추가합니다.

   11. string에 ", "를 추가합니다.

   12. ! ToString(m42 요소)를 string에 추가합니다.

   13. string에 ")"를 추가합니다.

   참고: 이 문자열은 CSS Transforms <matrix()> 함수 형태가 됩니다. [CSS3-TRANSFORMS]

4. 그 외의 경우:

   1. string에 "matrix3d("를 추가합니다.

   2. ! ToString(m11 요소)를 string에 추가합니다.

   3. string에 ", "를 추가합니다.

   4. ! ToString(m12 요소)를 string에 추가합니다.

   5. string에 ", "를 추가합니다.

   6. ! ToString(m13 요소)를 string에 추가합니다.

   7. string에 ", "를 추가합니다.

   8. ! ToString(m14 요소)를 string에 추가합니다.

   9. string에 ", "를 추가합니다.

   10. ! ToString(m21 요소)를 string에 추가합니다.

   11. string에 ", "를 추가합니다.

   12. ! ToString(m22 요소)를 string에 추가합니다.

   13. string에 ", "를 추가합니다.

   14. ! ToString(m23 요소)를 string에 추가합니다.

   15. string에 ", "를 추가합니다.

   16. ! ToString(m24 요소)를 string에 추가합니다.

   17. string에 ", "를 추가합니다.

   18. ! ToString(m41 요소)를 string에 추가합니다.

   19. string에 ", "를 추가합니다.

   20. ! ToString(m42 요소)를 string에 추가합니다.

   21. string에 ", "를 추가합니다.

   22. ! ToString(m43 요소)를 string에 추가합니다.

   23. string에 ", "를 추가합니다.

   24. ! ToString(m44 요소)를 string에 추가합니다.

   25. string에 ")"를 추가합니다.

   참고: 이 문자열은 CSS Transforms <matrix3d()> 함수 형태가 됩니다. [CSS3-TRANSFORMS]

5. string을 반환합니다.

테스트

• DOMMatrix-stringifier.html (실시간 테스트) (소스)

var matrix = new DOMMatrix();
matrix.scaleSelf(2);
matrix.translateSelf(20,20);
console.assert(matrix.toString() ===
                "matrix(2, 0, 0, 2, 40, 40)");

var matrix = new DOMMatrix();
matrix.scale3dSelf(2);
console.assert(matrix.toString() ===
                "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)");

var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
var string = matrix + " Batman!";

6.6. 가변 변환 메서드

아래 메서드들은 현재 행렬을 직접 수정하며, 각 메서드는 호출된 행렬 자신을 반환합니다. 주요 장점은 컨텐츠 작성자가 메서드 체이닝을 사용할 수 있다는 점입니다.

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20);
matrix.scaleSelf(2);
matrix.translateSelf(-20, -20);

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20);

참고: 메서드 체이닝을 사용하는 작성자는 불필요한 중간 DOMMatrix 객체의 생성으로 인한 메모리 낭비를 막기 위해, 가변 변환 메서드를 사용할 것을 권장합니다.

multiplySelf(other)

1. otherObject를 딕셔너리로부터 DOMMatrix 생성에 other를 넣어 호출해 얻습니다.

2. 현재 행렬에 otherObject를 후행 곱(post-multiply)합니다.

3. otherObject의 is 2D가 false면, 현재 행렬의 is 2D 값을 false로 설정합니다.

4. 현재 행렬을 반환합니다.

preMultiplySelf(other)

1. otherObject를 딕셔너리로부터 DOMMatrix 생성에 other를 넣어 호출해 얻습니다.

2. 현재 행렬에 otherObject를 선행 곱(pre-multiply)합니다.

3. otherObject의 is 2D가 false면, 현재 행렬의 is 2D 값을 false로 설정합니다.

4. 현재 행렬을 반환합니다.

translateSelf(tx, ty, tz)

1. 현재 행렬에 translation 변환을 후행 곱(post-multiply)합니다. 3D translation 행렬은 CSS Transforms에서 정의됩니다. [CSS3-TRANSFORMS]

2. tz가 명시되고 0 또는 -0이 아니라면, 현재 행렬의 is 2D 값을 false로 설정합니다.

3. 현재 행렬을 반환합니다.

scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

1. 현재 행렬에 translateSelf() 변환을 originX, originY, originZ 인자로 수행합니다.

2. scaleY가 없으면 scaleY를 scaleX 값으로 설정합니다.

3. 현재 행렬에 비일률적 스케일(non-uniform scale) 변환을 후행 곱(post-multiply)합니다. 3D 스케일 행렬은 CSS Transforms에서 정의되며 sx = scaleX, sy = scaleY, sz = scaleZ입니다. [CSS3-TRANSFORMS]

4. originX, originY, originZ의 부호를 반전합니다.

5. 현재 행렬에 translateSelf() 변환을 originX, originY, originZ 인자로 수행합니다.

6. scaleZ가 1이 아니면, 현재 행렬의 is 2D 값을 false로 설정합니다.

7. 현재 행렬을 반환합니다.

scale3dSelf(scale, originX, originY, originZ)

1. 현재 행렬에 translateSelf() 변환을 originX, originY, originZ 인자로 수행합니다.

2. 현재 행렬에 일률적(균일) 3D 스케일 변환을 후행 곱(post-multiply)합니다 (m11 = m22 = m33 = scale). 3D 스케일 행렬은 CSS Transforms에서 정의되며 sx = sy = sz = scale입니다. [CSS3-TRANSFORMS]

3. 현재 행렬에 translateSelf() 변환을 -originX, -originY, -originZ 인자로 수행합니다.

4. scale이 1이 아니면, 현재 행렬의 is 2D 값을 false로 설정합니다.

5. 현재 행렬을 반환합니다.

rotateSelf(rotX, rotY, rotZ)

1. rotY와 rotZ가 모두 없으면 rotZ를 rotX 값으로 설정하고 rotX, rotY는 0으로 설정합니다.

2. rotY가 계속 없으면 0으로 설정합니다.

3. rotZ가 계속 없으면 0으로 설정합니다.

4. rotX 또는 rotY가 0 또는 -0이 아니라면, 현재 행렬의 is 2D를 false로 설정합니다.

5. 현재 행렬에 0, 0, 1 벡터를 기준으로 rotZ만큼 회전 변환을 후행 곱(post-multiply)합니다 (단위: degree). 3D 회전 행렬은 CSS Transforms에서 정의되며 alpha = rotZ degree입니다. [CSS3-TRANSFORMS]

6. 현재 행렬에 0, 1, 0 벡터를 기준으로 rotY(degree)만큼 회전 변환을 후행 곱합니다. 3D 회전 행렬은 CSS Transforms에서 정의되며 alpha = rotY degree입니다. [CSS3-TRANSFORMS]

7. 현재 행렬에 1, 0, 0 벡터를 기준으로 rotX(degree)만큼 회전 변환을 후행 곱합니다. 3D 회전 행렬은 CSS Transforms에서 정의되며 alpha = rotX degree입니다. [CSS3-TRANSFORMS]

8. 현재 행렬을 반환합니다.

rotateFromVectorSelf(x, y)

1. 현재 행렬에 벡터 (1,0)^T와 (x,y)^T 사이의 시계방향 각도로 회전 변환을 후행 곱(post-multiply)합니다. x와 y가 모두 0 또는 -0이면, 각도는 0으로 지정합니다. 2D 회전 행렬은 CSS Transforms에서 정의되며, alpha는 벡터 (1,0)^T와 (x,y)^T 사이의 각도(degree)입니다. [CSS3-TRANSFORMS]

2. 현재 행렬을 반환합니다.

rotateAxisAngleSelf(x, y, z, angle)

1. 현재 행렬에 지정한 벡터 x, y, z와 각도 angle(degree)로 회전 변환을 후행 곱(post-multiply)합니다. 3D 회전 행렬은 CSS Transforms에서 정의되며 alpha = angle degree입니다. [CSS3-TRANSFORMS]

2. x 또는 y가 0 또는 -0이 아니라면, 현재 행렬의 is 2D 값을 false로 설정합니다.

3. 현재 행렬을 반환합니다.

skewXSelf(sx)

1. 현재 행렬에 지정 각도 sx(degree)로 skewX 변환을 후행 곱(post-multiply)합니다. 2D skewX 행렬은 CSS Transforms에서 정의되며 alpha = sx degree입니다. [CSS3-TRANSFORMS]

2. 현재 행렬을 반환합니다.

skewYSelf(sy)

1. 현재 행렬에 지정 각도 sy(degree)로 skewY 변환을 후행 곱(post-multiply)합니다. 2D skewY 행렬은 CSS Transforms에서 정의되며 beta = sy degree입니다. [CSS3-TRANSFORMS]

2. 현재 행렬을 반환합니다.

invertSelf()

1. 현재 행렬을 반전시킵니다.

2. 현재 행렬이 반전 불가능하면, 모든 속성을 NaN으로 설정하고 is 2D를 false로 설정합니다.

3. 현재 행렬을 반환합니다.

테스트

• DOMMatrix-invert-invertible.html (실시간 테스트) (소스)
• DOMMatrix-invert-non-invertible.html (실시간 테스트) (소스)
• DOMMatrix-invert-preserves-2d.html (실시간 테스트) (소스)
• DOMMatrix-invertSelf.html (실시간 테스트) (소스)

setMatrixValue(transformList)

1. transformList를 추상 행렬로 파싱하여 matrix, 2dTransform을 얻습니다. 결과가 실패면 "SyntaxError" DOMException을 던집니다.

2. is 2D 값을 2dTransform으로 설정합니다.

3. m11 요소부터 m44 요소까지 각 요소를 column-major 순서로 matrix의 값으로 설정합니다.

4. 현재 행렬을 반환합니다.

테스트

• DOMMatrix-css-string.worker.js (실시간 테스트) (소스)

7. 구조화 직렬화

DOMPointReadOnly, DOMPoint, DOMRectReadOnly, DOMRect, DOMQuad, DOMMatrixReadOnly, 그리고 DOMMatrix 객체는 직렬화 가능한 객체입니다. [HTML]

DOMPointReadOnly 및 DOMPoint에 대한 직렬화 단계는 value와 serialized가 주어졌을 때 다음과 같습니다:

1. serialized.[[X]]를 value의 x 좌표로 설정합니다.

2. serialized.[[Y]]를 value의 y 좌표로 설정합니다.

3. serialized.[[Z]]를 value의 z 좌표로 설정합니다.

4. serialized.[[W]]를 value의 w 원근으로 설정합니다.

이들의 역직렬화 단계는 serialized와 value가 주어졌을 때 다음과 같습니다:

1. value의 x 좌표를 serialized.[[X]]로 설정합니다.

2. value의 y 좌표를 serialized.[[Y]]로 설정합니다.

3. value의 z 좌표를 serialized.[[Z]]로 설정합니다.

4. value의 w 원근을 serialized.[[W]]로 설정합니다.

DOMRectReadOnly 및 DOMRect에 대한 직렬화 단계는 value와 serialized가 주어졌을 때 다음과 같습니다:

1. serialized.[[X]]를 value의 x 좌표로 설정합니다.

2. serialized.[[Y]]를 value의 y 좌표로 설정합니다.

3. serialized.[[Width]]를 value의 너비 값으로 설정합니다.

4. serialized.[[Height]]를 value의 높이 값으로 설정합니다.

이들의 역직렬화 단계는 serialized와 value가 주어졌을 때 다음과 같습니다:

1. value의 x 좌표를 serialized.[[X]]로 설정합니다.

2. value의 y 좌표를 serialized.[[Y]]로 설정합니다.

3. value의 너비 값을 serialized.[[Width]]로 설정합니다.

4. value의 높이 값을 serialized.[[Height]]로 설정합니다.

DOMQuad에 대한 직렬화 단계는 value와 serialized가 주어졌을 때 다음과 같습니다:

1. serialized.[[P1]]를 value의 하위 직렬화 결과인 point 1으로 설정합니다.

2. serialized.[[P2]]를 하위 직렬화 결과인 value의 point 2로 설정합니다.

3. serialized.[[P3]]를 하위 직렬화 결과인 value의 point 3로 설정합니다.

4. serialized.[[P4]]를 하위 직렬화 결과인 value의 point 4로 설정합니다.

이들의 역직렬화 단계는 serialized와 value가 주어졌을 때 다음과 같습니다:

1. value의 point 1을 하위 역직렬화한 serialized.[[P1]]로 설정합니다.

2. value의 point 2를 하위 역직렬화한 serialized.[[P2]]로 설정합니다.

3. value의 point 3을 하위 역직렬화한 serialized.[[P3]]로 설정합니다.

4. value의 point 4를 하위 역직렬화한 serialized.[[P4]]로 설정합니다.

DOMMatrixReadOnly 및 DOMMatrix에 대한 직렬화 단계는 value와 serialized가 주어졌을 때 다음과 같습니다:

1. value의 is 2D가 true인 경우:

   1. serialized.[[M11]]을 value의 m11 요소로 설정합니다.

   2. serialized.[[M12]]를 value의 m12 요소로 설정합니다.

   3. serialized.[[M21]]을 value의 m21 요소로 설정합니다.

   4. serialized.[[M22]]를 value의 m22 요소로 설정합니다.

   5. serialized.[[M41]]을 value의 m41 요소로 설정합니다.

   6. serialized.[[M42]]를 value의 m42 요소로 설정합니다.

   7. serialized.[[Is2D]]를 true로 설정합니다.

   참고: 2D DOMMatrix 또는 DOMMatrixReadOnly는 일부 다른 요소(예: m13 요소)에 대해 -0 값을 가질 수 있으며, 이 알고리즘으로는 왕복 변환이 보장되지 않습니다.

2. 그 외의 경우:

   1. serialized.[[M11]]을 value의 m11 요소로 설정합니다.

   2. serialized.[[M12]]를 value의 m12 요소로 설정합니다.

   3. serialized.[[M13]]을 value의 m13 요소로 설정합니다.

   4. serialized.[[M14]]를 value의 m14 요소로 설정합니다.

   5. serialized.[[M21]]을 value의 m21 요소로 설정합니다.

   6. serialized.[[M22]]를 value의 m22 요소로 설정합니다.

   7. serialized.[[M23]]을 value의 m23 요소로 설정합니다.

   8. serialized.[[M24]]를 value의 m24 요소로 설정합니다.

   9. serialized.[[M31]]을 value의 m31 요소로 설정합니다.

   10. serialized.[[M32]]를 value의 m32 요소로 설정합니다.

   11. serialized.[[M33]]을 value의 m33 요소로 설정합니다.

   12. serialized.[[M34]]를 value의 m34 요소로 설정합니다.

   13. serialized.[[M41]]을 value의 m41 요소로 설정합니다.

   14. serialized.[[M42]]를 value의 m42 요소로 설정합니다.

   15. serialized.[[M43]]을 value의 m43 요소로 설정합니다.

   16. serialized.[[M44]]를 value의 m44 요소로 설정합니다.

   17. serialized.[[Is2D]]를 false로 설정합니다.

   이들의 역직렬화 단계는 serialized와 value가 주어졌을 때 다음과 같습니다:

   1. serialized.[[Is2D]]가 true인 경우:

      1. value의 m11 요소를 serialized.[[M11]]로 설정합니다.

      2. value의 m12 요소를 serialized.[[M12]]로 설정합니다.

      3. value의 m13 요소를 0으로 설정합니다.

      4. value의 m14 요소를 0으로 설정합니다.

      5. value의 m21 요소를 serialized.[[M21]]로 설정합니다.

      6. value의 m22 요소를 serialized.[[M22]]로 설정합니다.

      7. value의 m23 요소를 0으로 설정합니다.

      8. value의 m24 요소를 0으로 설정합니다.

      9. value의 m31 요소를 0으로 설정합니다.

      10. value의 m32 요소를 0으로 설정합니다.

      11. value의 m33 요소를 1로 설정합니다.

      12. value의 m34 요소를 0으로 설정합니다.

      13. value의 m41 요소를 serialized.[[M41]]로 설정합니다.

      14. value의 m42 요소를 serialized.[[M42]]로 설정합니다.

      15. value의 m43 요소를 0으로 설정합니다.

      16. value의 m44 요소를 1로 설정합니다.

      17. value의 is 2D를 true로 설정합니다.

   2. 그 외의 경우:

      1. value의 m11 요소를 serialized.[[M11]]로 설정합니다.

      2. value의 m12 요소를 serialized.[[M12]]로 설정합니다.

      3. value의 m13 요소를 serialized.[[M13]]로 설정합니다.

      4. value의 m14 요소를 serialized.[[M14]]로 설정합니다.

      5. value의 m21 요소를 serialized.[[M21]]로 설정합니다.

      6. value의 m22 요소를 serialized.[[M22]]로 설정합니다.

      7. value의 m23 요소를 serialized.[[M23]]로 설정합니다.

      8. value의 m24 요소를 serialized.[[M24]]로 설정합니다.

      9. value의 m31 요소를 serialized.[[M31]]로 설정합니다.

      10. value의 m32 요소를 serialized.[[M32]]로 설정합니다.

      11. value의 m33 요소를 serialized.[[M33]]로 설정합니다.

      12. value의 m34 요소를 serialized.[[M34]]로 설정합니다.

      13. value의 m41 요소를 serialized.[[M41]]로 설정합니다.

      14. value의 m42 요소를 serialized.[[M42]]로 설정합니다.

      15. value의 m43 요소를 serialized.[[M43]]로 설정합니다.

      16. value의 m44 요소를 serialized.[[M44]]로 설정합니다.

      17. value의 is 2D를 false로 설정합니다.

8. 보안 고려사항

DOMMatrix 및 DOMMatrixReadOnly 인터페이스는 CSS 구문으로 문자열을 파싱하는 진입점(entry-point)을 제공합니다. 따라서 CSS Syntax 명세의 보안 고려사항이 적용됩니다. [CSS3-SYNTAX]

이 명세에서 정의한 인터페이스는 다른 보안 또는 개인정보 영향이 알려진 바 없습니다. 그러나 이 명세의 인터페이스를 사용하는 API를 가진 다른 명세에서는 보안 또는 개인정보 문제를 초래할 수도 있습니다.

9. 개인정보 보호 고려사항

10. 역사적 고찰

이 절은 규범적이지 않습니다.

이 명세에서 정의한 인터페이스는 이전 명세에 있던 유사 인터페이스와 일부 사용자 에이전트의 독자적 인터페이스를 대체하기 위해 만들어졌습니다. 이 절에서는 이러한 인터페이스를 열거합니다.

10.1. CSSOM View

이전 CSSOM View 명세는 ClientRect 인터페이스를 정의했으며, 이는 DOMRect로 대체되었습니다. 이 명세를 준수하는 구현체는 ClientRect를 지원하지 않습니다. [CSSOM-VIEW]

10.2. SVG

이전 SVG 명세는 SVGPoint, SVGRect, SVGMatrix를 정의했습니다. 이 명세에서는 각각 DOMPoint, DOMRect, DOMMatrix의 별칭(alias)으로 정의합니다. [SVG11]

10.3. 비표준

일부 사용자 에이전트는 WebKitPoint 인터페이스를 지원했습니다. 이 명세를 준수하는 구현체는 WebKitPoint를 지원하지 않습니다.

여러 사용자 에이전트는 WebKitCSSMatrix 인터페이스도 지원했으며, 이는 웹에서 널리 사용됩니다. 이 명세에서는 DOMMatrix의 별칭(alias)으로 정의합니다.

일부 사용자 에이전트는 MSCSSMatrix 인터페이스도 지원했습니다. 이 명세를 준수하는 구현체는 MSCSSMatrix를 지원하지 않습니다.

문서 규칙

비어 있지 않은 unrestricted double 값의 리스트에 대해 NaN 안전 최소값(NaN-safe minimum) 은 리스트 내에 NaN이 포함되어 있으면 NaN이 되고, 그렇지 않으면 리스트의 최소값이 됩니다.

동일하게, 비어 있지 않은 unrestricted double 값의 리스트에 대해 NaN 안전 최대값(NaN-safe maximum)은 리스트 내에 NaN이 있으면 NaN이 되고, 그렇지 않으면 리스트의 최대값이 됩니다.

최신 버전 이후 변경 사항

이 절은 규범적이지 않습니다.

다음 변경 사항은 2018년 12월 4일 후보 권고안(CR) 이후로 적용되었습니다.

• 열 벡터가 행렬에 선행 곱(pre-multiply)된다는 의미를 명확하게 기술(#294, #359)

• 최소값과 최대값 정의에 NaN 우선 적용 명시(#222)

• WebIDL 생성자 정의 방식 변경

• 딕셔너리의 기본값 추가

• matrixTransform에 [NewObject] 추가하여 산문 설명과 일치시킴

• 중복되는 originZ 체크 제거(#350)

• DOMRectList에 명시적으로 [Exposed] 추가

• Web Platform Tests 커버리지 추가

다음 변경 사항은 2014년 11월 25일 후보 권고안(CR) 이후로 적용되었습니다.

• 인터페이스에서 일반적으로 오버로딩된 생성자 대신 특정 정적 생성(operation)을 사용하도록 변경하여 일관성 있게 만듦. 단, DOMMatrix 는 WebKitCSSMatrix 와의 호환성을 위해 여전히 오버로딩된 생성자를 사용함.

• DOMMatrixInit 딕셔너리 도입.

• 인터페이스에 대해 JSON 직렬화기 추가.

• DOMMatrixReadOnly 및 DOMMatrix 를 WebKitCSSMatrix와 호환되게 변경:

  • rotate() 와 rotateSelf() 인자를 (angle, originX, originY)에서 (rotX, rotY, rotZ)로 변경.

  • scale() 및 scaleSelf() 메서드들을 scaleNonUniform()/scaleNonUniformSelf()와 더 유사하게 변경하고, scaleNonUniformSelf()는 삭제. scaleNonUniform()은 레거시 용도로 유지.

  • DOMMatrix/DOMMatrixReadOnly의 모든 인자를 setMatrixValue()를 제외하고 옵션으로 변경.

  • 인자가 없는 생성자 추가.

  • WebKitCSSMatrix 를 DOMMatrix의 레거시 window 별칭으로 정의.

• Worker에서는 DOMMatrix 와 DOMMatrixReadOnly가 CSS 구문 파싱 및 문자열화 기능을 지원하지 않음.

• 인터페이스의 구조화 직렬화 정의.

• bounds 속성(live)을 DOMQuad 에서 비-live getBounds() 메서드로 변경. "관련된 bounding rectangle" 개념도 삭제.

• DOMMatrix 및 DOMMatrixReadOnly 에 대한 문자열 파서(parser)가 SVG 규칙 대신 CSS 규칙을 사용하도록 변경.

• DOMMatrix 와 DOMMatrixReadOnly 문자열화 함수는 비유한(non-finite) 값이 있으면 예외를 던지고 그 외에는 ToString 알고리즘을 사용. [ECMA-262]

• 비교 연산에서 0과 -0을 항상 동등하게 취급.

• § 9 개인정보 보호 고려사항 및 § 10 역사적 고찰 절 추가.

다음 변경 사항은 2014년 9월 18일 Working Draft 이후로 적용되었습니다.

• DOMPointReadOnly, DOMPoint, DOMRectReadOnly, DOMRect, DOMQuad, DOMMatrixReadOnly 및 DOMMatrix 를 Window 및 Worker에 노출함. 인터페이스 복제(cloning) 정의.

다음 변경 사항은 2014년 6월 26일 Last Call Public Working Draft 이후로 적용되었습니다.

• DOMPointReadOnly 에 4개의 인자를 받는 생성자 추가.

• DOMRectReadOnly 에 4개의 인자를 받는 생성자 추가.

• DOMMatrixReadOnly 에 숫자 시퀀스를 인자로 받는 생성자 추가.

• DOMRectList 를 ArrayClass로 변경. 인터페이스는 레거시 용도로만 사용 가능.

• DOMRectList 를 브라우저 피드백 대기 상태(at-Risk)로 표시.

• 모든 인터페이스를 내부 요소 관점에서 read-only/writable 및 상속 동작을 설명.

• IndexSizeError 예외를 TypeError로 변경.

다음 변경 사항은 2014년 5월 22일 첫 공개 Working Draft 이후로 적용되었습니다.

• 가변 변환 메서드 *By를 *Self로 이름 변경(예: translateBy()가 translateSelf()로 변경).

• invert()를 invertSelf()로 이름 변경.

• setMatrixValue() 추가, transformation list를 DOMString으로 받음.

• is2D 및 isIdentity 속성을 read-only로 변경.

• DOMMatrixReadOnly 가 3D 변환 및 is2D 속성값 변경 추적.

• invertSelf() 및 inverse() 가 더 이상 예외를 던지지 않음.

감사의 말

편집자들은 본 명세에 기여한 Robert O’Callahan께 감사드립니다. DOMMatrix 초안 제안을 해주신 Dean Jackson께도 감사드립니다. Adenilson Cavalcanti, Benoit Jacob, Boris Zbarsky, Brian Birtles, Cameron McCormack, Domenic Denicola, Kari Pihkala, Max Vujovic, Mike Taylor, Peter Hall, Philip Jägenstedt, Simon Fraser, 그리고 Timothy Loh 등 세심한 리뷰와 의견, 수정에 감사드립니다.