레퍼런스 curveVertex()

curveVertex()

사용자 정의 도형에 스플라인 곡선 세그먼트를 추가합니다.

curveVertex() 는 사용자 정의 도형에 곡선 세그먼트를 추가합니다. 스플라인 곡선은 curve() 함수에서 만들어지는 곡선과 유사합니다. curveVertex() 함수는 beginShape()endShape() 함수 사이에서 호출되어야 합니다.

스플라인 곡선은 부드럽게 기울어지는 도형과 곡선을 생성할 수 있습니다. 이는 마치 일련의 점들에 연결된 케이블과 같습니다. 스플라인은 두 개의 앵커 포인트(anchor point)와 두 개의 컨트롤 포인트(control point)로 정의됩니다. beginShape()endShape() 사이에 curveVertex() 함수를 최소 네 번 호출하여 곡선을 그릴 수 있습니다.:

beginShape(); <p>// Add the first control point. curveVertex(84, 91);</p> <p>// Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17);</p> <p>// Add the second control point. curveVertex(32, 91);</p> <p>endShape(); </p>

The code snippet above would only draw the curve between the anchor points, similar to the curve() function. The segments between the control and anchor points can be drawn by calling curveVertex() with the coordinates of the control points:

beginShape(); <p>// Add the first control point and draw a segment to it. curveVertex(84, 91); curveVertex(84, 91);</p> <p>// Add the anchor points to draw between. curveVertex(68, 19); curveVertex(21, 17);</p> <p>// Add the second control point. curveVertex(32, 91);</p> <p>// Uncomment the next line to draw the segment to the second control point. // curveVertex(32, 91);</p> <p>endShape(); </p>

The first two parameters, x and y, set the vertex’s location. For example, calling curveVertex(10, 10) adds a point to the curve at (10, 10).

Spline curves can also be drawn in 3D using WebGL mode. The 3D version of curveVertex() has three arguments because each point has x-, y-, and z-coordinates. By default, the vertex’s z-coordinate is set to 0.

Note: curveVertex() won’t work when an argument is passed to beginShape().

예제

구문

curveVertex(x, y)
curveVertex(x, y, [z])

매개변수

x
Number:

꼭짓점의 x좌표

y
Number:

꼭짓점의 y좌표

z
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!

관련 레퍼런스