javascript - 如何在 PixiJS 中抗锯齿图形(圆形)？

Question

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

这是代码:

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到启动参数？ See the docs

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>