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

【问题标题】：Why don't these lines have the same thickness? PIXI.JS为什么这些线的粗细不一样？ PIXI.JS
【发布时间】：2020-11-01 22:36:35
【问题描述】：

让我问你一个关于 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);
}

【问题讨论】：

抗锯齿？尝试将 boxW 更改为整数，看看是否有任何改变。否则，请查看我们看不到的其余代码（例如可能导致缩放的任何内容）。始终赞赏该问题的在线工作示例。哦，如果 boxW 为 0.5，那么我认为 moveTo/LineTo 线也应该如此。
如果你在 jsfiddle、plnkr、codepen、woteva 给我一个工作示例，我会给你一个答案。

标签： pixi.js

【解决方案1】：

PAEz 是对的，很可能是抗锯齿。

当您创建应用程序时，默认情况下会关闭抗锯齿功能。

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

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 类及其选项的文档可在此处找到：

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

附带说明，PIXI 速度非常快，但随着您的应用程序扩展抗锯齿和分辨率可能会对性能产生影响。

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

【讨论】：