HTML 5 고급 프로 그래 밍 의 도형 왜곡 및 응용 2 (운용 편)

html 5 에서 그림 왜곡 효 과 를 실현 하 는 원 리 를 소개 하고 drawtriangles 함수 로 확장 하 였 습 니 다.
다음은 위의 연결 입 니 다.
HTML 5 고급 프로 그래 밍 의 도형 왜곡 및 응용 1 (원리 편)
http://blog.csdn.net/lufy_legend/article/details/8084367
다음은 drawtriangles 함수 의 사용 방법 을 상세 하 게 설명 하 겠 습 니 다.그리고 drawtriangles 함 수 를 사용 하여 아래 의 처리 효 과 를 실현 합 니 다.
이 방법 은 AS3 에서 이 식 된 것 이기 때문에 사용 방법 은 AS3 와 기본적으로 일치 합 니 다. 여 기 는 AS3 의 drawtriangles 함수 API 입 니 다. 참고 하 시기 바 랍 니 다.
http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html#drawTriangles()
지난번 에 도 설 명 했 듯 이 이식 후의 drawtriangles 함 수 는 네 번 째 매개 변수의 의미 가 다르다. 여기 서 네 번 째 매개 변 수 는 분할 선의 선 이 굵 고 다섯 번 째 매개 변 수 는 분할 선의 색 을 나타 내 며 설정 하지 않 으 면 분할 선 을 표시 하지 않 는 다.
draw Triangles 함수 의 정의
4. 567913. 위의 문 자 를 직접 보면 이해 하기 어 려 울 것 같 습 니 다. 다음 에 몇 가지 예 를 들 어 보 겠 습 니 다. 마지막 두 개의 매개 변 수 는 비교적 간단 합 니 다. 먼저 이 두 개의 매개 변 수 를 말씀 드 리 겠 습 니 다. 다음은 마지막 두 개의 매개 변 수 는 너비 가 2 이 고 색 은 흰색 의 효과 입 니 다.
위의 그림 에는 삼각형 의 테두리 가 표시 되 어 있다.
자, 이제 다른 세 가지 인자 의 용법 을 말씀 드 리 겠 습 니 다.
1. 첫 번 째 매개 변수 vertices 는 모든 정점 의 좌 표를 정의 하 는 것 이다. 이 몇 개의 정점 의 순 서 는 다음 그림 이다.
vertices 매개 변수 에 저 장 된 것 은 위의 9 개의 정점 좌표 입 니 다. 코드 는 다음 과 같 습 니 다.
4. 567913. 2. 두 번 째 매개 변 수 는 indices 가 삼각형 을 정의 하 는 것 입 니 다. 배열 vertices 에서 세 개의 정점 마다 삼각형 을 구성 할 수 있 습 니 다. indices 는 바로 이런 삼각형 을 정의 하 는 것 입 니 다. 이런 삼각형 의 정점 순 서 는 규정 되 어 있 습 니 다. 사실은 앞의 그림 에서 볼 수 있 듯 이 각 삼각형 은 하나의 사각형 이 고 이런 삼각형 을 정의 할 때이 사각형 의 네 개의 정점 을 기준 으로 삼각형 의 정점 순 서 는 각각 (왼쪽 위, 오른쪽 위, 왼쪽 아래) 과 (오른쪽 위, 왼쪽 아래, 오른쪽 아래) 이다. 아래 그림 과 같다.
그림 의 삼각형 에 대응 하 는 코드 는 다음 과 같다.

drawTriangles(vertices, indices, uvtData,thickness,color)
vertices:        ，                  （   x, y  ）。vertices       。
indices:             ，              。   indexes     null，      （vertices      6   x,y）       。  ，           ，  vertices         。  ，indexes[1]    (vertices[2], vertices[3])。
uvtData:                   。                  。           UV     UVT   。   UV   ，(0,0)        ，(1,1)        。
thickness:           
color:           

2. 세 번 째 매개 변 수 는 uvt Data 는 위의 모든 정점 이 전체 그림 의 비례 에 비해 정의 하 는 것 이다. 예 를 들 어 위의 그림 중의 9 개의 정점 의 좌표 이다. 그들 은 원래 그림 의 위치 에 비해 각각 다음 그림 과 같다.
코드 로 환산 하면 다음 과 같다.

vertices = new Array();
vertices.push(0, 0);
vertices.push(0, 120);
vertices.push(0, 240);
vertices.push(120, 0);
vertices.push(120, 120);
vertices.push(120, 240);
vertices.push(240, 0);
vertices.push(240, 120);
vertices.push(240, 240);

위의 매개 변 수 를 정의 한 다음 에 LSprite 대상 의 graphics 속성의 beginBitmapFill 과 drawTriangles 두 함 수 를 통 해 다양한 도형 을 그 릴 수 있 습 니 다.
beginBitmapFill 은 그래 픽 영역 을 비트 맵 이미지 로 채 웁 니 다. 매개 변 수 는 LBitmapData 대상 입 니 다.
만약 에 vertices 매개 변수 에서 정 의 된 좌표 위치 가 원래 그림 에 대응 하 는 위치 라면 그림 은 변화 가 없 지만 이런 좌표 의 위 치 를 바 꾸 면 다음 코드 와 같다.

indices = new Array();
indices.push(0, 3, 1);
indices.push(3, 1, 4);
indices.push(1, 4, 2);
indices.push(4, 2, 5);
indices.push(3, 6, 4);
indices.push(6, 4, 7);
indices.push(4, 7, 5);
indices.push(7, 5, 8);

효과
위의 변형 은 그림 을 8 개의 삼각형 으로 나 누 어 더욱 다양한 변형 을 실현 하려 면 그림 을 더 많은 작은 삼각형 으로 나 누 면 된다.
예 를 들 어 나 는 이 함 수 를 이용 하여 허름 한 그림 장식 도 구 를 만 들 었 는데 효 과 는 다음 과 같다.
여러분 은 아래 의 연결 을 클릭 하여 그것 의 효 과 를 테스트 할 수 있 습 니 다.
http://lufylegend.com/html5/lufylegend/ps.html
옮 겨 싣 기 설명: lufylegend 블 로그
비고:
drawtriangles 함 수 를 사용 하려 면 HTML 5 오픈 소스 엔진 lufylegend 의 1.5 버 전 이상 을 다운로드 해 야 합 니 다. lufylegend 1.5 버 전의 발표 주 소 는 다음 과 같 습 니 다.
http://blog.csdn.net/lufy_legend/article/details/8054658
drawtriangles 함 수 는 여러 가지 효 과 를 실현 할 수 있 고 3D 효과 도 쉽게 실현 할 수 있 습 니 다. 예 를 들 어 우리 가 흔히 볼 수 있 는 책 뒤 집기 효과, 그리고 3D 지구 회전 등 은 다음 에 계속 소개 하 겠 습 니 다. 제 블 로그 에 계속 관심 을 가 져 주 십시오.
http://blog.csdn.net/lufy_legend