为什么这些线的粗细不同？ PIXI.JS

Question

让我问你一个关于 PIXI.js 的问题。在Chrome中，这些线看起来粗细不一样，但它是相同的图形API(lineTo, moveTo)。这是为什么？

let boxW = 46.5;

this.leftBox
  .lineStyle(1, 0x000,1)
  .beginFill(0xffffff)
  .moveTo(0, 0)
  .lineTo(465, 0)
  .lineTo(465, 465) 
  .lineTo(0, 465)
  .lineTo(0, 0)
  .endFill();

for (let i = 1; i <= 9; i++) {
  this.leftBox.moveTo(boxW * i, 0).lineTo(boxW * i, 465);
}

Answer 1

PAEz说的对，应该是抗锯齿吧

创建应用程序时 anti-aliasing 默认关闭。

试试下面的方法，看看是否有帮助：

const app = new PIXI.Application({
  'antialias': true,
  'resolution': 2 // This may help too
});

// Add the view to the DOM
document.body.appendChild(app.view);

// ... your line code

可在此处找到 Application class 及其选项的文档：

https://pixijs.download/dev/docs/PIXI.Application.html

附带说明一下，PIXI 非常快，但随着应用程序的扩展 anti-aliasing 和分辨率可能会对性能产生影响。

最后回答你关于 anti-aliasing 是什么的问题，简而言之，它是一种平滑 non-rectangular 形状上锯齿状边缘的方法，尽管你有一系列的线条，但它可以帮助你解决问题也。这里有一篇文章可以告诉你更多：https://www.gamingscan.com/what-is-anti-aliasing/

为什么这些线的粗细不同？ PIXI.JS

Why don't these lines have the same thickness? PIXI.JS

pixi.js