사용자 정의 도형에 2차 베지어 곡선(quadratic Bézier curve)을 추가합니다.
quadraticVertex()
함수는 사용자 정의 도형에 곡선을 추가합니다. 이 함수가 생성하는 베지어 곡선은 bezierVertex() 함수의 결과물과 유사합니다. quadraticVertex()
함수는 beginShape() 및 endShape() 함수 사이에서 호출되어야 합니다. 곡선은 이전 꼭짓점을 첫 번째 앵커 포인트(anchor point)로 사용하므로, quadraticVertex()
함수를 사용하기 전에, 최소한 한 번 vertex() 를 호출해야합니다.
처음 두 매개변수인 cx
와 cy
는 곡선의 컨트롤 포인트(control point)를 설정합니다. 컨트롤 포인트는 곡선을 해당 방향으로 "끌어"당깁니다.
마지막 두 매개 변수인 x3
와 y3
는 마지막 앵커 포인트를 설정합니다. 마지막 앵커 포인트는 곡선이 끝나는 위치입니다.
베지어 곡선은 WebGL 모드를 사용하여 3D에서도 그릴 수 있습니다. 3D 버전의 bezierVertex()
는 각 점에 x,y,z 좌표가 있으므로 총 8개의 인수가 존재합니다.
참고: quadraticVertex()
는 beginShape() 에 인수가 전달된 경우 작동하지 않습니다.
예제
구문
quadraticVertex(cx, cy, x3, y3)
quadraticVertex(cx, cy, cz, x3, y3, z3)
매개변수
cx
Number:
컨트롤 포인트의 x 좌표.
cy
Number:
컨트롤 포인트의 y 좌표.
x3
Number:
앵커 포인트의 x 좌표.
y3
Number:
앵커 포인트의 y 좌표.
cz
Number:
컨트롤 포인트의 z 좌표.
z3
Number:
앵커 포인트의 z 좌표.
Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!