参考 curveVertex()

curveVertex()

向自定义形状添加样条曲线片段。

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>

前两个参数 xy 设置顶点的位置。 例如,调用 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!

相关参考