重复填充

重复填充模式

在实现重复填充之前，必须针对特定情况设置正确的填充模式。这是通过使用 "textureWrapX" 和/或 "textureWrapY" 键以及以下环绕模式之一调用 display.setDefault() 来实现的。

• "clampToEdge" — 这是默认模式；它将纹理钳制到 x 或 y 方向。钳制填充将不会在钳制方向上重复。

• "repeat" — 填充将以平铺方式在填充对象的整个跨度上重复，就像相同的图块只是以相同的方位排列一样。并排.

• "mirroredRepeat" — 填充将以镜像图案重复，其中每个相邻的图块将镜像其旁边的图块。

例如，考虑一个基本的 160×128 矩形矢量对象，可以如下设置沿 x 轴的重复填充和沿 y 轴的镜像重复填充。

local rect = display.newRect( 0, 0, 160, 128 )
rect.x, rect.y = display.contentCenterX, display.contentCenterY

display.setDefault( "textureWrapX", "repeat" )
display.setDefault( "textureWrapY", "mirroredRepeat" )

应用填充

在矢量对象到位并且沿两个轴设置填充模式后，可以用此处看到的示例 64×64 图像填充它。

具体来说，这可以通过一个初始命令来完成，该命令将 rect 对象的 fill 属性设置为包含两个键值对

rect.fill = { type="image", filename="logo.png" }

的 Lua 表。

第一个（type）告诉 Corona 用图像填充对象，filename 键指示使用 logo.png 图像执行填充。

缩放填充

，例如 16、32、64、128、256、512 等。虽然不符合这些规格的图像将在 Corona 模拟器中正确填充，但实际设备将不会将其视为有效的填充图像。

rect.fill.scaleX = 0.5
rect.fill.scaleY = 0.5

显然，用一个拉伸的图像填充整个形状不会导致重复填充。要获得预期的视觉重复，必须对对象填充使用缩放方法。这只需要两行额外的代码。

这会缩放填充图像，但不幸的是它仍然被拉伸 — GPU 只是获取拉伸的填充纹理并将其在每个轴上缩放到 50%。

local scaleFactorX = 64 / rect.width
local scaleFactorY = 64 / rect.height

128 / rect.height

rect.fill.scaleX = scaleFactorX
rect.fill.scaleY = scaleFactorY

使用这些计算值，可以正确缩放重复填充，如下所示。

偏移填充

结果是填充重复的比例为 1:1 — 这意味着填充本身保持其原始大小 64×64 像素，在填充对象的边界内重复，并按预期溢出边缘之外。

前面示例中的一个共同因素是填充图案重复始终居中于填充对象内。无论比例如何，填充“图块”都将位于对象的中心，然后向所有方向向外重复，假设两个轴都没有被钳制 ("clampToEdge")。

rect.fill.x = 0.5
rect.fill.y = 0

对齐填充

另一个重要的区别是，设置正 x 值会将图案向左移动，而负 x 值会将对象向右移动。类似地，正 y 值将向上偏移图案，而负 y 值将向下偏移图案。

扩展填充偏移概念，有时需要将填充对齐到对象的边缘。

local scaleOffsetX = ( ( rect.width - 64 ) / 2 ) / 64
local scaleOffsetY = ( ( rect.height - 64 ) / 2 ) / 64

再次，在这些计算中使用 (64) 表示用于填充的图像的宽度和高度。为了实现正确的对齐，这些数字必须根据所使用的实际填充图像的宽度/高度进行调整。

• 使用这些计算值，可以正确对齐重复填充，如下所示。

rect.fill.x = offsetX

• 要将填充与 rect 对象的左边缘对齐：

rect.fill.x = offsetX * -1

• 要将填充与 rect 对象的右边缘对齐：

rect.fill.y = offsetY

• 要将填充与 rect 对象的上边缘对齐：

rect.fill.y = offsetY * -1

旋转填充

要将填充与 rect 对象的下边缘对齐：

rect.fill.rotation = 30

最终的潜在调整是独立于对象旋转填充。

过渡填充

填充旋转只是以熟悉的度数从 0 到 360 执行。请注意，旋转是围绕填充对象的中心应用的，不能设置为锚点（填充不考虑 anchorX 或 anchorY 属性）。

重复填充的最后一个强大功能是能够通过基本的 Corona 过渡 对其进行过渡。这允许您在填充对象内移动、旋转或缩放填充图案，并且独立于填充对象本身上可能发生的任何过渡/移动。

transition.to( rect.fill, { time=4000, x=0.5 } )

transition.to( rect.fill, { time=4000, rotation=80 } )

transition.to( rect.fill, { time=4000, scaleX=0.5, scaleY=0.4 } )

transition.to( rect.fill, { time=4000, x=rect.fill.x-1, iterations=-1 } )