图形填充

¥Graphics Fill

如果你是图形新手，请在此处查看 图形指南。本指南更深入地探讨了图形的特定方面：如何填充它们！PixiJS 中的 fill() 方法特别强大，使你能够用颜色、纹理或渐变填充形状。无论你是在设计游戏、UI 组件还是创意工具，掌握 fill() 方法对于创建具有视觉吸引力和动态的图形都至关重要。本指南探讨了使用 fill() 方法实现令人惊叹的视觉效果的不同方式。

¥If you are new to graphics, please check out the graphics guide here. This guide dives a bit deeper into a specific aspect of graphics: how to fill them! The fill() method in PixiJS is particularly powerful, enabling you to fill shapes with colors, textures, or gradients. Whether you're designing games, UI components, or creative tools, mastering the fill() method is essential for creating visually appealing and dynamic graphics. This guide explores the different ways to use the fill() method to achieve stunning visual effects.

注意

此处讨论的 fillStyles 也可以应用于 Text 对象！

¥The fillStyles discussed here can also be applied to Text objects!

基本颜色填充

¥Basic Color Fills

创建 Graphics 对象时，你可以使用 fill() 方法轻松地用颜色填充它。这是一个简单的例子：

¥When creating a Graphics object, you can easily fill it with a color using the fill() method. Here's a simple example:

const obj = new Graphics()
  .rect(0, 0, 200, 100) // Create a rectangle with dimensions 200x100
  .fill('red'); // Fill the rectangle with a red color

这将创建一个红色矩形。PixiJS 支持 fill() 方法的多种颜色格式。开发者可以根据自己的需求选择格式。例如，CSS 颜色字符串易于使用且易读，十六进制字符串紧凑且广泛用于设计工具，数字对于编程使用而言非常高效。数组和颜色对象提供精确的控制，使其成为高级图形的理想选择。

¥This creates a red rectangle. PixiJS supports multiple color formats for the fill() method. Developers can choose a format based on their needs. For example, CSS color strings are user-friendly and readable, hexadecimal strings are compact and widely used in design tools, and numbers are efficient for programmatic use. Arrays and Color objects offer precise control, making them ideal for advanced graphics.

• CSS 颜色字符串（例如 'red'、'blue'）

  ¥CSS color strings (e.g., 'red', 'blue')

• 十六进制字符串（例如 '#ff0000'）

  ¥Hexadecimal strings (e.g., '#ff0000')

• 数字（例如 0xff0000）

  ¥Numbers (e.g., 0xff0000)

• 数组（例如 [255, 0, 0]）

  ¥Arrays (e.g., [255, 0, 0])

• 用于精确颜色控制的颜色对象

  ¥Color objects for precise color control

示例：

¥Examples:

// Using a number
const obj1 = new Graphics().rect(0, 0, 100, 100).fill(0xff0000);

// Using a hex string
const obj2 = new Graphics().rect(0, 0, 100, 100).fill('#ff0000');

// Using an array
const obj3 = new Graphics().rect(0, 0, 100, 100).fill([255, 0, 0]);

// Using a Color object
const color = new Color();
const obj4 = new Graphics().rect(0, 0, 100, 100).fill(color);

使用样式对象填充

¥Fill with a Style Object

对于更高级的填充，你可以使用 FillStyle 对象。这允许进行额外的自定义，例如设置不透明度：

¥For more advanced fills, you can use a FillStyle object. This allows for additional customization, such as setting opacity:

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill({
    color: 'red',
    alpha: 0.5, // 50% opacity
  });

使用纹理填充

¥Fill with Textures

用纹理填充形状同样简单：

¥Filling shapes with textures is just as simple:

const texture = await Assets.load('assets/image.png');
const obj = new Graphics().rect(0, 0, 100, 100)
  .fill(texture);

局部与全局纹理空间

¥Local vs. Global Texture Space

纹理可以应用于两个坐标空间：

¥Textures can be applied in two coordinate spaces:

• 本地空间（默认）：纹理坐标相对于形状的尺寸和位置进行映射。纹理坐标使用标准化坐标系，其中 (0,0) 表示形状的左上角，(1,1) 表示形状的右下角，而不管其实际像素尺寸如何。例如，如果你有一个 300x200 像素的纹理填充 100x100 的形状，则纹理将缩放以精确适合这些 100x100 像素。纹理的左上角 (0,0) 将与形状的左上角对齐，纹理的右下角 (1,1) 将与形状的右下角对齐，根据需要拉伸或压缩纹理。

  ¥Local Space (Default): The texture coordinates are mapped relative to the shape's dimensions and position. The texture coordinates use a normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the shape, regardless of its actual pixel dimensions. For example, if you have a 300x200 pixel texture filling a 100x100 shape, the texture will be scaled to fit exactly within those 100x100 pixels. The texture's top-left corner (0,0) will align with the shape's top-left corner, and the texture's bottom-right corner (1,1) will align with the shape's bottom-right corner, stretching or compressing the texture as needed.

const shapes = new PIXI.Graphics()
    .rect(50,50,100, 100)
    .circle(250,100,50)
    .star(400,100,6,60,40)
    .roundRect(500,50,100,100,10)
    .fill({
        texture,
        textureSpace:'local' // default!
    });

• 全局空间：设置 textureSpace: 'global' 以使纹理相对于 Graphics 对象的坐标系定位和缩放。尽管名称如此，但这并不是真正的 "global" - 纹理相对于 Graphics 对象本身保持固定，即使对象移动或缩放，纹理仍保持其位置。查看下面图片如何跨越所有形状（在同一图形中）：

  ¥Global Space: Set textureSpace: 'global' to make the texture position and scale relative to the Graphics object's coordinate system. Despite the name, this isn't truly "global" - the texture remains fixed relative to the Graphics object itself, maintaining its position even when the object moves or scales. See how the image goes across all the shapes (in the same graphics) below:

const shapes = new PIXI.Graphics()
    .rect(50,50,100, 100)
    .circle(250,100,50)
    .star(400,100,6,60,40)
    .roundRect(500,50,100,100,10)
    .fill({
        texture,
        textureSpace:'global'
    });

使用矩阵和纹理

¥Using Matrices with Textures

要修改纹理坐标，你可以应用变换矩阵，这是一种用于缩放、旋转或平移纹理的数学工具。如果你不熟悉变换矩阵，它们可以精确控制纹理的渲染方式，你可以探索有关它们的更多信息 此处。

¥To modify texture coordinates, you can apply a transformation matrix, which is a mathematical tool used to scale, rotate, or translate the texture. If you're unfamiliar with transformation matrices, they allow for precise control over how textures are rendered, and you can explore more about them here.

const matrix = new Matrix().scale(0.5, 0.5);

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill({
    texture: texture,
    matrix: matrix, // scale the texture down by 2
  });

纹理陷阱

¥Texture Gotcha's

1. 精灵表：如果使用来自精灵表的纹理，则将使用整个源纹理。要使用特定框架，请创建新纹理：

   ¥Sprite Sheets: If using a texture from a sprite sheet, the entire source texture will be used. To use a specific frame, create a new texture:

const spriteSheetTexture = Texture.from('assets/my-sprite-sheet.png');
const newTexture = renderer.generateTexture(Sprite.from(spriteSheetTexture));

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill(newTexture);

2. 两个纹理的力量：纹理应为 2 的幂维数，以便在 WebGL1 中正确平铺（WebGL2 和 WebGPU 都可以）。

   ¥Power of Two Textures: Textures should be power-of-two dimensions for proper tiling in WebGL1 (WebGL2 and WebGPU are fine).

使用渐变填充

¥Fill with Gradients

PixiJS 支持线性和径向渐变，可以使用 FillGradient 类创建。渐变对于为形状和文本添加视觉深度和动态样式特别有用。

¥PixiJS supports both linear and radial gradients, which can be created using the FillGradient class. Gradients are particularly useful for adding visual depth and dynamic styling to shapes and text.

线性渐变

¥Linear Gradients

线性渐变沿直线创建平滑的颜色过渡。这是一个简单的线性渐变的示例：

¥Linear gradients create a smooth color transition along a straight line. Here is an example of a simple linear gradient:

const gradient = new FillGradient({
  type: 'linear',
  colorStops: [
    { offset: 0, color: 'yellow' },
    { offset: 1, color: 'green' },
  ],
});

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill(gradient);

你可以使用以下属性控制渐变方向：

¥You can control the gradient direction with the following properties:

• start {x, y}：这些定义了渐变的起点。例如，在线性渐变中，这是第一个颜色停止点的位置。这些值通常以相对坐标 (0 到 1) 表示，其中 0 表示形状的左/上边缘，1 表示形状的右/下边缘。

  ¥start {x, y}: These define the starting point of the gradient. For example, in a linear gradient, this is where the first color stop is positioned. These values are typically expressed in relative coordinates (0 to 1), where 0 represents the left/top edge and 1 represents the right/bottom edge of the shape.

• end {x, y}：这些定义了渐变的结束点。与 start {x, y} 类似，这些值指定最后一个颜色停止点在形状的局部坐标系中的位置。

  ¥end {x, y}: These define the ending point of the gradient. Similar to start {x, y}, these values specify where the last color stop is positioned in the shape's local coordinate system.

使用这些属性，你可以创建各种渐变效果，例如水平、垂直或对角线过渡。例如，将 start 设置为 {x: 0, y: 0} 并将 end 设置为 {x: 1, y: 1} 将导致从形状的左上角到右下角的对角渐变。

¥Using these properties, you can create various gradient effects, such as horizontal, vertical, or diagonal transitions. For example, setting start to {x: 0, y: 0} and end to {x: 1, y: 1} would result in a diagonal gradient from the top-left to the bottom-right of the shape.

const diagonalGradient = new FillGradient({
  type: 'linear',
  start: { x: 0, y: 0 },
  end: { x: 1, y: 1 },
  colorStops: [
    { offset: 0, color: 'yellow' },
    { offset: 1, color: 'green' },
  ],
});

径向渐变

¥Radial Gradients

径向渐变以圆形图案创建平滑的颜色过渡。与线性渐变不同，它们将颜色从一个圆圈混合到另一个圆圈。这是一个简单的径向渐变的示例：

¥Radial gradients create a smooth color transition in a circular pattern. Unlike linear gradients, they blend colors from one circle to another. Here is an example of a simple radial gradient:

const gradient = new FillGradient({
  type: 'radial',
  colorStops: [
    { offset: 0, color: 'yellow' },
    { offset: 1, color: 'green' },
  ],
});

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill(gradient);

你可以使用以下属性控制渐变的形状和大小：

¥You can control the gradient's shape and size using the following properties:

• center {x, y}：这些定义了渐变开始的内圆的中心。通常，这些值以相对坐标（0 到 1）表示，其中 0.5 代表形状的中心。

  ¥center {x, y}: These define the center of the inner circle where the gradient starts. Typically, these values are expressed in relative coordinates (0 to 1), where 0.5 represents the center of the shape.

• innerRadius：内圆的半径。这决定了渐变的起点的大小。

  ¥innerRadius: The radius of the inner circle. This determines the size of the gradient's starting point.

• outerCenter {x, y}：这些定义了渐变结束的外圆的中心。与 center {x, y} 一样，这些值也是相对坐标。

  ¥outerCenter {x, y}: These define the center of the outer circle where the gradient ends. Like center {x, y}, these values are also relative coordinates.

• outerRadius：外圆的半径。这决定了渐变的结束点的大小。

  ¥outerRadius: The radius of the outer circle. This determines the size of the gradient's ending point.

通过调整这些属性，你可以创建各种效果，例如小而集中的渐变或大而膨胀的效果。例如，设置较小的 r0 和较大的 r1 将创建一个渐变，该渐变直到达到内圆半径才开始过渡。

¥By adjusting these properties, you can create a variety of effects, such as small, concentrated gradients or large, expansive ones. For example, setting a small r0 and a larger r1 will create a gradient that starts does not start to transition until the inner circle radius is reached.

const radialGradient = new FillGradient({
  type: 'radial',
  center: { x: 0.5, y: 0.5 },
  innerRadius: 0.25,
  outerCenter: { x: 0.5, y: 0.5 },
  outerRadius: 0.5,
  colorStops: [
    { offset: 0, color: 'blue' },
    { offset: 1, color: 'red' },
  ],
});

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill(gradient);

渐变陷阱

¥Gradient Gotcha's

1. 内存管理：当不再需要渐变时，使用 fillGradient.destroy() 释放资源。

   ¥Memory Management: Use fillGradient.destroy() to free up resources when gradients are no longer needed.

2. 动画：更新现有渐变而不是创建新渐变以获得更好的性能。

   ¥Animation: Update existing gradients instead of creating new ones for better performance.

3. 自定义着色器：对于复杂的动画，自定义着色器可能更有效率。

   ¥Custom Shaders: For complex animations, custom shaders may be more efficient.

4. 纹理和矩阵限制：在底层，渐变填充在内部设置纹理和矩阵属性。这意味着你不能同时使用纹理填充或矩阵变换作为渐变填充。

   ¥Texture and Matrix Limitations: Under the hood, gradient fills set both the texture and matrix properties internally. This means you cannot use a texture fill or matrix transformation at the same time as a gradient fill.

结合纹理和颜色

¥Combining Textures and Colors

你可以将纹理或渐变与色调和 alpha 相结合，以实现更复杂且更具视觉吸引力的效果。这允许你在纹理或渐变的顶部叠加颜色，并使用 alpha 值调整其透明度。

¥You can combine a texture or gradients with a color tint and alpha to achieve more complex and visually appealing effects. This allows you to overlay a color on top of the texture or gradient, adjusting its transparency with the alpha value.

const gradient = new FillGradient({
    colorStops: [
        { offset: 0, color: 'blue' },
        { offset: 1, color: 'red' },
    ]
});

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill({
    fill: gradient,
    color: 'yellow',
    alpha: 0.5,
  });

const obj = new Graphics().rect(0, 0, 100, 100)
  .fill({
    texture: texture,
    color: 'yellow',
    alpha: 0.5,
  });

---

希望本指南向你展示了使用图形（和文本！）时填充是多么简单和强大。通过掌握 fill() 方法，你可以解锁在 PixiJS 中创建视觉动态和引人入胜的图形的无限可能性。玩得开心！

¥Hopefully, this guide has shown you how easy and powerful fills can be when working with graphics (and text!). By mastering the fill() method, you can unlock endless possibilities for creating visually dynamic and engaging graphics in PixiJS. Have fun!