我如何在PixiJS中使用抗锯齿图形（圆形）？

Question

使用pixi js画圆时，我一直无法获得平滑的圆周。当我画大圆时，我已经可以看到几个角，而当我缩小尺寸时，情况变得更糟。（我需要一个小圆圈）。

这是代码：

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

非常感谢您的帮助，如果您需要更多有关我的代码的信息，请告诉我。非常感谢！

Answer 1

您不只是需要传递antialias:true给启动参数吗？查看文件

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
     antialias: true,  // ADDED!!!
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

不确定false, true在通话结束时您的论点是什么PIXI.autoDetectRenderer

您也可以传递更高的数字，resolution尽管您需要正确设置CSS

renderer = PIXI.autoDetectRenderer(
  document.getElementById("animations-canvas").width,
  document.getElementById("animations-canvas").height,
  {
     view:document.getElementById("animations-canvas"),
     antialias: true,  // ADDED!!!
     resolution: 2,    // ADDED!!!
  },
  false, true
); 

var stage = new PIXI.Container();


circle = new PIXI.Graphics();
circle.beginFill(0xFFFFFF); 
circle.drawCircle(60, 60, 50); 
circle.endFill();
stage.addChild(circle);

renderer.render(stage);

/* -- ADDED -- */
#animations-canvas {
  width: 300px;
  height: 150px;
}

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
<canvas id="animations-canvas"></canvas> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.4/pixi.min.js"></script>

Answer 2

适用于 v5.1.5：

const app = new PIXI.Application({
  ...
  antialias: true,
  autoDensity: true, // !!!
  resolution: 2,
  ...
});