转换坐标系统。
默认情况下,在 2D 模式和 WebGL 模式中心,原点 (0, 0)
位于画布的左上角。 translate()
函数将原点移动到不同的位置。在调用 translate()
后绘制的所有内容将会被移动。有两种方式可以调用 translate()
来设置原点的位置参数。
第一种调用 translate()
的方式是使用数字设置平移的量。前两个参数 x
和 y
设置沿正 x 轴和正 y 轴的平移量。例如,调用 translate(20, 30)
将原点沿 x 轴移动 20 个像素,沿 y 轴移动 30 个像素。第三个参数 z
是可选的。它设置沿正 z 轴的平移量。例如,调用 translate(20, 30, 40)
将原点沿 x 轴移动 20 个像素,沿 y 轴移动 30 个像素,沿 z 轴移动 40 个像素。
第二种调用 translate()
的方式是使用 p5.Vector 对象来设置平移的量。例如,调用 translate(myVector)
使用 myVector
的 x、y 和 z 分量来设置沿 x、y 和 z 轴的平移量。这样做与调用 translate(myVector.x, myVector.y, myVector.z)
是相同的。
默认情况下,变换会累积。例如,调用 translate(10, 0)
两次与调用 translate(20, 0)
一次具有相同的效果。可以使用 push() 和 pop() 函数来隔离不同绘制组内的变换。
注意:变换会在绘制循环的开头被重置。在 draw() 函数内调用 translate(10, 0)
不会导致形状持续移动。
示例
语法
translate(x, y, [z])
translate(vector)
参数
沿正 x 轴平移的量。
沿正 y 轴平移的量。
沿正 z 轴平移的量。
用于平移的向量。
相关参考
applyMatrix
将转换矩阵应用于坐标系。 translate()、rotate() 和 scale() 之类的转换在幕后使用矩阵-向量乘法。名为矩阵的数字表对每个转换进行编码。然后矩阵中的值会与画布上的每个点相乘,这些点由向量表示。 applyMatrix() 允许一次应用多个转换。查看 Wikipedia 和 MDN 以获取有关转换的更多详细信息。 applyMatrix() 可以在二维和三维两种场景中调用 。 在二维模式下,参数 a、b、c、d、e 和 f 对应于以下转换矩阵中的元素: 数字可以个别传递,如 applyMatrix(2, 0, 0, 0, 2, 0)。也可以作为数组传递,如 applyMatrix([2, 0, 0, 0, 2, 0])。 在三维模式下,参数 a、b、c、d、e、f、g、h、i、j、k、l、m、n、o 和 p 对应于以下转换矩阵中的元素: 数字可以个别传递,如 applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)。也可以作为数组传递,如 applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])。 默认情况下,转换会累积。可以使用push() 和 pop() 函数将转换隔离到不同的绘图组中。 注意:转换会在绘制循环的开始处重置。在 draw() 函数中调用 applyMatrix() 不会导致形状连续变换。 .
resetMatrix
清除应用于坐标系的所有转换。 .
rotate
旋转坐标系。 默认情况下,正 x 轴指向右侧,正 y 轴指向下方。rotate() 函数通过围绕原点旋转坐标系来改变这种方向。在调用 rotate() 之后绘制的所有内容都将呈现为旋转状态。 第一个参数 angle 是旋转的角度。例如,调用 rotate(1) 将坐标系顺时针旋转 1 弧度,约为 57 度。rotate() 根据当前的 angleMode() 解释角度值。 第二个参数 axis 是可选的。它用于定位 WebGL 模式中的 3D 旋转。如果传递了一个 p5.Vector,如 rotate(QUARTER_PI, myVector),那么坐标系将围绕 myVector 旋转 QUARTER_PI 弧度。如果传递了一个向量分量数组,如 rotate(QUARTER_PI, [1, 0, 0]),那么坐标系将围绕具有分量 [1, 0, 0] 的向量旋转 QUARTER_PI 弧度。 默认情况下,转换会累积。例如,连续调用两次 rotate(1) 与调用一次 rotate(2) 效果相同。可以使用 push() 和 pop() 函数将转换隔离到不同的绘图组中。 注意:转换会在绘制循环的开始处重置。在 draw() 函数中调用 rotate(1) 不会导致形状旋转。 .
rotateX
在 WebGL 模式下,围绕 x 轴旋转坐标系。 参数 angle 是旋转的角度。例如,调用 rotateX(1) 会使坐标系围绕 x 轴旋转 1 弧度。rotateX() 根据当前的 angleMode() 解释角度值。 默认情况下,转换会累积。例如,连续调用两次 rotateX(1) 与调用一次 rotateX(2) 效果相同。可以使用 push() 和 pop() 函数将转换隔离到不同的绘图组中。 注意:转换会在绘制循环的开始处重置。在 draw() 函数中调用 rotateX(1) 不会导致形状旋转。 .