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 | 승수를 적용할 행렬 |
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 | 속성을 복사할 행렬 |
설명
이 메서드는 해당 행렬의 요소 값을 반환합니다.
반환값
- 행렬의 값을 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 인스턴스를 만들고 이 인스턴스를 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 형식으로 정의하는 배열입니다. |