向自定义形状添加样条曲线片段。
curveVertex()
向自定义形状添加曲线片段。它创建的样条曲线与 curve() 函数创建的相似。 curveVertex()
必须在 beginShape() 和 endShape() 函数之间调用。
样条曲线可以形成缓和的形状和曲线。它们就像连接到一组点的电缆。样条由两个 锚点和两个控制点定义。为了绘制曲线,必须至少在 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>
上面的代码片段仅在锚点之间绘制曲线,类似于 curve() 函数。 在控制点和锚点之间的片段可以通过使用控制点的坐标调用 curveVertex()
来绘制:
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>
前两个参数 x
和 y
设置顶点的位置。 例如,调用 curveVertex(10, 10)
在 (10, 10)
处向曲线添加一个点。
样条曲线也可以在WebGL模式下绘制3D。 curveVertex()
的3D版本有三个参数,因为每个点都有 x、y 和 z 坐标。 默认情况下,顶点的z坐标设置为0。
注意:当向 beginShape() 传递参数时,curveVertex()
不起作用。
示例
语法
curveVertex(x, y)
curveVertex(x, y, [z])
参数
x
Number:
x-coordinate of the vertex
y
Number:
y-coordinate of the vertex
z
Number:
z-coordinate of the vertex.
Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!