PixiJS v8.1.1绘制简单线条无显示问题求助

你的代码问题出在PixiJS v8对Graphics API的改动——定义完线条样式和路径后，需要显式调用绘制命令才能渲染出图形。

修改后的代码如下：

const { Application, Container, Assets, Sprite, Graphics } = PIXI;

window.onload = async () => {

  const app = new Application();

  await app.init({ background: '#1099bb', width: window.innerWidth, height: window.innerHeight, antialias: true });

  document.body.appendChild(app.canvas);

  const graphics = new Graphics();
  app.stage.addChild(graphics);

  graphics.position.set(0, 0);
  graphics.lineStyle(1, 0xFFFFFF, 1)
      .moveTo(0, 0)
      .lineTo(30, 30)
      .lineTo(303, 130)
      .stroke(); // 新增这一行，触发线条绘制
};

原因说明 #

PixiJS v8之前的版本会自动完成图形绘制，但v8开始采用了更灵活的命令式API：

• 调用lineStyle()设置线条样式
• 用moveTo()/lineTo()定义路径
• 必须调用stroke()来实际渲染线条（如果是填充图形则调用fill()）

内容的提问来源于stack exchange，提问作者phil-daniels