레퍼런스 quadraticVertex()

quadraticVertex()

사용자 정의 도형에 2차 베지어 곡선(quadratic Bézier curve)을 추가합니다.

quadraticVertex() 함수는 사용자 정의 도형에 곡선을 추가합니다. 이 함수가 생성하는 베지어 곡선은 bezierVertex() 함수의 결과물과 유사합니다. quadraticVertex() 함수는 beginShape()endShape() 함수 사이에서 호출되어야 합니다. 곡선은 이전 꼭짓점을 첫 번째 앵커 포인트(anchor point)로 사용하므로, quadraticVertex() 함수를 사용하기 전에, 최소한 한 번 vertex() 를 호출해야합니다.

처음 두 매개변수인 cxcy 는 곡선의 컨트롤 포인트(control point)를 설정합니다. 컨트롤 포인트는 곡선을 해당 방향으로 "끌어"당깁니다.

마지막 두 매개 변수인 x3y3 는 마지막 앵커 포인트를 설정합니다. 마지막 앵커 포인트는 곡선이 끝나는 위치입니다.

베지어 곡선은 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!

관련 레퍼런스