如何在pixi js中画一条简单的线

Question

我是 pixi js 的新手，正在使用 v8.1.1。我按照简单的教程绘制了一条线，但它没有显示在画布上。这只是一个空的蓝屏。

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);
};

Answer 1

您需要使用

moveTo

而不是手动更改

.position

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.moveTo(0, 0);
    graphics.lineTo(window.innerWidth, window.innerHeight);
  
    graphics.stroke({ width: 1, color: 0x00FF00 });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.1.2/pixi.min.js" integrity="sha512-64uu9rJpVQCmB5YRsiaetbtTm4bJsVZ2zu3fQE9i6BaEnM1y3NbvyJtnm45m+3v8oY8BzQzp5HJxFoRyl4wGpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>