설명
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 형식으로 정의하는 배열입니다. 이 속성을 지정하지 않으면 행렬이 항등 행렬로 설정됩니다. |
메서드
clone()
설명
이 메서드는 Matrix 인스턴스의 복제본을 반환합니다.
반환값
- Matrix 인스턴스의 복제본입니다.
- 유형 - Matrix
concat(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);
copy(matrix)
설명
이 메서드는 지정된 행렬을 이 행렬에 복사합니다.
매개 변수
반환값
- 이 행렬입니다. 메서드 호출 체인에 유용합니다.
- 유형 - Matrix
| 이름 | 유형 | 설명 |
|---|---|---|
| matrix | Matrix | 속성을 복사할 행렬 |
equals(mat)
getValues()
설명
이 메서드는 해당 행렬의 요소 값을 반환합니다.
반환값
- 행렬의 값을 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
invert()
설명
이 메서드는 행렬을 반례합니다. 반례된 행렬은 정반대의 변형을 적용합니다.
반환값
- 이 행렬입니다. 메서드 호출 체인에 유용합니다.
- 유형 - Matrix
isIdentity()
설명
행렬이 항등 행렬일 경우 이 메서드는 'true'를 나타냅니다.
반환값
- 유형 - boolean
rotate(angle)
설명
이 메서드는 해당 행렬에 회전 변형을 적용합니다.
매개 변수
반환값
- 이 행렬입니다. 메서드 호출 체인에 유용합니다.
- 유형 - Matrix
예제
이 예제에서는 항등 행렬로 초기화된 새로운 Matrix 인스턴스를 만들고 이 인스턴스를 45도로 회전시킵니다.
| 이름 | 유형 | 설명 |
|---|---|---|
| angle | number | 라디안 단위의 각도입니다. 도를 사용하려면 Math.PI/180로 곱합니다. |
var m = new flwebgl.geom.Matrix(); m.rotate(45 * Math.PI / 180);
scale(x, y)
설명
이 메서드는 해당 행렬에 크기 조절 변형을 적용합니다.
매개 변수
반환값
- 이 행렬입니다. 메서드 호출 체인에 유용합니다.
- 유형 - Matrix
예제
이 예제에서는 항등 행렬로 초기화된 새로운 Matrix 인스턴스를 만들고 이 인스턴스를 수평 및 수직 비율로 크기를 조절합니다.
| 이름 | 유형 | 설명 |
|---|---|---|
| x | number | 수평 비율을 지정하는 요소입니다. |
| y | number | 수직 비율을 지정하는 요소입니다. |
var m = new flwebgl.geom.Matrix(); m.scale(2, 2);
setValues(values)
설명
이 메서드는 해당 행렬의 요소 값을 설정합니다.
매개 변수
예제
getValues() 함수 아래의 예제를 참조하십시오.
| 이름 | 유형 | 설명 |
|---|---|---|
| values | number[] | 행렬의 값을 a, b, c, d, tx, ty 형식으로 정의하는 배열입니다. |
transformPoint(point)
transformRect(rect)
설명
이 메서드는 이 행렬에 따라 rect의 4개 점 모두를 변형합니다.
매개 변수
반환값
- 변형된 Rect입니다.
- 유형 - Rect
| 이름 | 유형 | 설명 |
|---|---|---|
| rect | Rect | 변형할 Rect입니다. |
translate(dx, dy)
설명
이 메서드는 x축 및 y축을 따라 행렬을 변형합니다.
매개 변수
반환값
- 이 행렬입니다. 메서드 호출 체인에 유용합니다.
- 유형 - Matrix
| 이름 | 유형 | 설명 |
|---|---|---|
| dx | number | X 축을 따라 오른쪽으로 이동할 크기입니다. |
| dy | number | Y 축을 따라 아래쪽으로 이동할 크기입니다. |
내 계정 로그인