React-Pixi 入口/react-pixi 中的屏蔽

Question

我用于精灵的图像比所需的大得多（910 像素）。我需要动态更改容器的高度，遮盖图像。

有人知道该怎么做吗？

<Container
      x={x}
      y={y}
      width={width}
      height={height}>
   <Sprite
        image={image}
        anchor={[0, 0]}
        x={0}
        y={0}
        width={width}
        height={910}
        rotation={0} />
 </Container>

 @inlet/react-pixi: "^1.1.9"
 pixi.js: "^5.2.0"
 react: "^16.12.0"
 react-dom: "^16.12.0"

不幸的是，这也不起作用，因为纹理保持静态，而矩形四处移动

 <Graphics
      draw={(g) => {
        g.clear()
        const texture = new PIXI.Texture.from(image)
        g.beginTextureFill(texture)
        g.drawRect(x, y, width, height)
        g.endFill()
      }} /> 

Answer 1

试试这个：

const maskRef = useRef()

<Container mask={maskRef?.current} x={x} y={y} width={width} height={height}>
  <Graphics
    name="mask"
    draw={React.useCallback(
      (g) => {
        g.beginFill(0x000000)
        g.drawRect(0, 0, size.width + 3, size.height + 3)
        g.endFill()
      },
      [width, height]
    )}
    ref={maskRef}
  />
  <Sprite
    image={image}
    anchor={[0, 0]}
    x={0}
    y={0}
    width={width}
    height={910}
    rotation={0}
  />
</Container>

官方文档位于此处，解释其工作原理和局限性