quadraticVertex

向自定义形状添加二次贝塞尔曲线段。

quadraticVertex() 向自定义形状添加曲线段。它创建的贝塞尔曲线段与 bezierVertex() 函数创建的类似。 quadraticVertex() 必须在 beginShape() 和 endShape() 函数之间调用。曲线段使用前一个顶点作为第一个锚点，因此必须至少在 quadraticVertex() 之前调用一次 vertex()。

前两个参数 cx 和 cy 设置曲线的控制点。曲线朝着控制点的方向被拉拽。

后两个参数 x3 和 y3 设置最后一个锚点。最后一个锚点是曲线结束的地方。

贝塞尔曲线也可以在 WebGL 模式下绘制 3D。bezierVertex() 的 3D 版本有八个参数，因为每个点都有 x、y 和 z 坐标。

注意：当向 beginShape() 传递参数时，quadraticVertex() 不起作用。

示例

语法

quadraticVertex(cx, cy, x3, y3)quadraticVertex(cx, cy, cz, x3, y3, z3)

参数

Number:

x-coordinate of the control point.

Number:

y-coordinate of the control point.

Number:

x-coordinate of the anchor point.

Number:

y-coordinate of the anchor point.

Number:

z-coordinate of the control point.

Number:

z-coordinate of the anchor point.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!

相关参考

beginContour

开始在一个平面形状中创建一个孔洞。 beginContour() 和 endContour() 函数可以用来在平面自定义形状内创建负空间。beginContour() 开始添加负空间的顶点，而 endContour() 则停止添加。 beginContour() 和 endContour() 必须在 beginShape() 和 endShape() 之间调用。在 beginContour() 和 endContour() 之间，一些变换图形的函数（如 translate()， rotate()，和 scale()）不起作用。也不能在 beginContour() 和 endContour() 之间使用其他形状，比如 ellipse() 或 rect()。注意：定义负空间的顶点必须与外部形状的顶点方向相反。首先，以顺时针顺序绘制外部形状的顶点。然后，以逆时针顺序绘制负空间的顶点。 .

beginShape

开始向自定义形状添加顶点。 beginShape() 和 endShape() 函数可以用来创建自定义的 2D 或者 3D 形状。beginShape() 开始添加顶点到自定义形状，而 endShape() 则停止添加。参数 kind 设置要创建的形状的种类。默认情况下，可以绘制任何不规则多边形。kind 可用的模式有： POINTS 绘制一系列点。 LINES 绘制一系列不相连的线段。 TRIANGLES 绘制一系列单独的三角形。 TRIANGLE_FAN 以扇形方式绘制一系列连接的三角形，共享第一个顶点。 TRIANGLE_STRIP 以条带方式绘制一系列连接的三角形。 QUADS 绘制一系列单独的四边形（四边形）。 QUAD_STRIP 使用相邻边绘制四边形条带形式。 TESS 通过显式细分创建填充曲线（仅限 WebGL）。调用 beginShape() 后，可以通过用 vertex()， bezierVertex()， quadraticVertex()，和/或 curveVertex() 来构建形状。调用 endShape() 将停止向形状添加顶点。每个形状都将用当前的描边颜色勾勒出轮廓，并填充当前的填充颜色。 translate()， rotate()，和 scale() 等变换图形的函数不适用于 beginShape() 和 endShape() 之间。也不能在 beginShape() 和 endShape() 之间使用其他形状，比如 ellipse() 或 rect()。 .

bezierVertex

向自定义形状添加贝塞尔曲线片段。 bezierVertex() 向自定义形状添加曲线片段。它创建的贝塞尔曲线与 bezier() 函数创建的相似。 bezierVertex() 必须在 beginShape() 和 endShape() 函数之间调用。曲线段使用前一个顶点作为第一个锚点，因此必须至少在 bezierVertex() 之前之前调用一次 vertex()。前四个参数 x2，y2， x3，和 y3 设置曲线的两个控制点，曲线朝着控制点的方向被拉拽。第五个和第六个参数 x4，和 y4 设置最后一个锚点。最后一个锚点是曲线结束的地方。贝塞尔曲线也可以在 WebGL 模式下绘制 3D。 bezierVertex() 的 3D 版本有八个参数，因为每个点都有 x、y 和 z 坐标。注意：当向 beginShape() 传递参数时， bezierVertex() 不起作用。 .

curveVertex

向自定义形状添加样条曲线片段。 curveVertex() 向自定义形状添加曲线片段。它创建的样条曲线与 curve() 函数创建的相似。 curveVertex() 必须在 beginShape() 和 endShape() 函数之间调用。样条曲线可以形成缓和的形状和曲线。它们就像连接到一组点的电缆。样条由两个锚点和两个控制点定义。为了绘制曲线，必须至少在 beginShape() 和 endShape() 之间调用四次 curveVertex()： beginShape(); // Add the first control point.