베지어 곡선을 그립니다.
베지어 곡선은 부드럽게 경사지는 모양과 곡선을 만들 수 있습니다. 이 곡선은 두 개의 앵커 포인트(anchor point)와 두 개의 컨트롤 포인트(control point)로 정의됩니다. 베지어 곡선은 curve() 함수로 생성하는 스플라인 곡선보다 더 많은 컨트롤이 가능합니다.
처음 두 매개변수인 x1 와 y1 는 다음을 설정합니다. 첫 번째 앵커 포인트는 곡선이 시작되는 지점입니다.
다음 네 개의 매개 변수인 x2, y2, x3, 그리고 y3는 두 컨트롤 포인트를 설정합니다. 컨트롤 포인트는 곡선을 그 방향으로 '끌어당깁니다'.
일곱 번째와 여덟 번째 매개변수 x4 와 y4 는 마지막 앵커 포인트를 설정합니다. 마지막 앵커 포인트는 곡선이 끝나는 지점입니다.
베지어 곡선은 WebGL 모드를 사용하여 3D로도 그릴 수 있습니다. 3D 버전의 bezier() 는 각 점이 x, y, z좌표를 가지고 있기 때문에 열두 개의 인수를 가집니다.
예제
구문
bezier(x1, y1, x2, y2, x3, y3, x4, y4)bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)매개변수
x1
Number:
첫 번째 앵커 포인트의 x 좌표입니다.
y1
Number:
첫 번째 앵커 포인트의 y 좌표입니다.
x2
Number:
첫 번째 컨트롤 포인트의 x 좌표입니다.
y2
Number:
첫 번째 컨트롤 포인트의 y 좌표입니다.
x3
Number:
두 번째 컨트롤 포인트의 x 좌표입니다.
y3
Number:
두 번째 컨트롤 포인트의 y 좌표입니다.
x4
Number:
두 번째 앵커 포인트의 x 좌표입니다.
y4
Number:
두 번째 앵커 포인트의 y 좌표입니다.
z1
Number:
첫 번째 앵커 포인트의 z 좌표입니다.
z2
Number:
첫 번째 컨트롤 포인트의 z 좌표입니다.
z3
Number:
두 번째 컨트롤 포인트의 z 좌표입니다.
z4
Number:
두 번째 앵커 포인트의 z 좌표입니다.
Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/curves.js and open a pull request!