Matrix

Matrix 클래스는 특정 좌표 공간의 점을 다른 좌표 공간으로 매핑하는 방법을 결정하는 변형 행렬을 나타냅니다.

다음과 같이 표시 객체에 대해 다양한 그래픽 변형을 수행할 수 있습니다.

Matrix 객체의 속성을 설정합니다.
Matrix 객체를 Transform 객체의 matrix 속성에 적용합니다.
표시 객체의 transform 속성으로 Transform 객체를 적용합니다.

이러한 변형 기능에는 평행 이동(x와 y 위치 변경), 회전, 크기 조절이 포함됩니다.

이러한 종류의 변형을 총칭하여 어파인 변형(affine transformations)이라고 합니다. 어파인 변형에서는 변형 과정에서 선이 곧은 상태를 유지하며 평행선은 그대로 평행을 이룹니다.

변형 행렬 객체는 다음 내용이 들어 있는 3 x 3 행렬입니다.

| a c tx |
| b d ty |
| u v w  |

기존의 변형 행렬에서 u, v 및 w 속성은 추가적인 기능을 제공합니다. Matrix 클래스는 2차원 공간에서만 작동됩니다. 항상 u와 v의 속성 값은 0.0, w의 속성 값은 1.0으로 가정합니다. 즉, 이 행렬의 유효 값은 다음과 같습니다.

| a c tx |
| b d ty |
| 0 0 1  |

new flwebgl.geom.Matrix(values)

이름	유형	설명
values	number[]	(선택 사항) 행렬의 값을 a, b, c, d, tx, ty 형식으로 정의하는 배열입니다. 이 속성을 지정하지 않으면 행렬이 항등 행렬로 설정됩니다.

설명

이 메서드는 Matrix 인스턴스의 복제본을 반환합니다.

반환값

Matrix 인스턴스의 복제본입니다.
유형 - Matrix

설명

이 메서드는 제공된 행렬을 현재 행렬과 연결하여 두 행렬의 기하학적 효과를 효율적으로 결합합니다.

매개 변수

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

예제

이 예제에서는 회전 행렬과 크기 조절 행렬을 결합합니다.

이름	유형	설명
matrix	Matrix	승수를 적용할 행렬

var m1 = new flwebgl.geom.Matrix();
m1.rotate(45 * Math.PI / 180);

var m2 = new flwebgl.geom.Matrix();
m2.scale(2, 2);

m1.concat(m2);

설명

이 메서드는 지정된 행렬을 이 행렬에 복사합니다.

매개 변수

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

이름	유형	설명
matrix	Matrix	속성을 복사할 행렬

설명

이 메서드는 해당 행렬에 이 인스턴스와 동일한 값이 있는지 여부를 검사합니다.

매개 변수

반환값

유형 - boolean

이름	유형	설명
mat	Matrix	비교할 행렬

설명

이 메서드는 해당 행렬의 요소 값을 반환합니다.

반환값

행렬의 값을 a, b, c, d, tx, ty 형식으로 정의하는 배열입니다.
유형 - number[]

예제

이 예제에서는 행렬의 값을 가져오고 그 값을 0.5만큼 사선형이 되도록 수정합니다.

var m = new flwebgl.geom.Matrix();
var arr = m.getValues();
arr[1] = 0.5;
m.setValues(arr);

설명

이 메서드는 현재 행렬을 항등 행렬로 설정합니다.

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

설명

이 메서드는 행렬을 반례합니다. 반례된 행렬은 정반대의 변형을 적용합니다.

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

설명

행렬이 항등 행렬일 경우 이 메서드는 'true'를 나타냅니다.

반환값

유형 - boolean

설명

이 메서드는 해당 행렬에 회전 변형을 적용합니다.

매개 변수

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

예제

이 예제에서는 항등 행렬로 초기화된 새로운 Matrix 인스턴스를 만들고 이 인스턴스를 45도로 회전시킵니다.

이름	유형	설명
angle	number	라디안 단위의 각도입니다. 도를 사용하려면 Math.PI/180로 곱합니다.

var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

설명

이 메서드는 해당 행렬에 크기 조절 변형을 적용합니다.

매개 변수

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

예제

이 예제에서는 항등 행렬로 초기화된 새로운 Matrix 인스턴스를 만들고 이 인스턴스를 수평 및 수직 비율로 크기를 조절합니다.

이름	유형	설명
x	number	수평 비율을 지정하는 요소입니다.
y	number	수직 비율을 지정하는 요소입니다.

var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

설명

이 메서드는 해당 행렬의 요소 값을 설정합니다.

매개 변수

예제

getValues() 함수 아래의 예제를 참조하십시오.

이름	유형	설명
values	number[]	행렬의 값을 a, b, c, d, tx, ty 형식으로 정의하는 배열입니다.

설명

이 메서드는 이 행렬에 따라 점을 변형합니다.

매개 변수

반환값

변형된 점
유형 - Point

이름	유형	설명
point	Point	변형할 점입니다.

설명

이 메서드는 이 행렬에 따라 rect의 4개 점 모두를 변형합니다.

매개 변수

반환값

변형된 Rect입니다.
유형 - Rect

이름	유형	설명
rect	Rect	변형할 Rect입니다.

설명

이 메서드는 x축 및 y축을 따라 행렬을 변형합니다.

매개 변수

반환값

이 행렬입니다. 메서드 호출 체인에 유용합니다.
유형 - Matrix

이름	유형	설명
dx	number	X 축을 따라 오른쪽으로 이동할 크기입니다.
dy	number	Y 축을 따라 아래쪽으로 이동할 크기입니다.

법적 고지 사항 | 온라인 개인 정보 보호 정책

Matrix

설명

변형 행렬

구문

매개 변수

메서드

clone()

concat(matrix)

copy(matrix)

equals(mat)

getValues()

단위()

invert()

isIdentity()

rotate(angle)

scale(x, y)

setValues(values)

transformPoint(point)

transformRect(rect)

translate(dx, dy)

커뮤니티에 질문하기

문의