Question

当我使用pixi js绘制一个圆圈时，我一直无法获得平滑的圆周。当我绘制大圆圈时，我已经可以看到一些角落，当我缩小尺寸时，它会变得更糟。（我需要一个小圈子。）

以下是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

非常感谢任何帮助，如果您需要有关我的代码的更多信息，请与我们联系。非常感谢！

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>

Answer 2

如果您不能/不会在渲染器级别使用抗锯齿，这是一个解决特定图形的小技巧。

var radius = 20; 

// Create "intermediary" container for graphics
var gContainer = new PIXI.Container();
stage.addChild(gContainer);

var myCircle = new PIXI.Graphics();
gContainer.addChild(myCircle);

// Draw graphic x2 size
myCircle.beginFill(0xFF0000);
myCircle.drawCircle(0, 0, radius * 2);

// Use cacheAsBitmap to render bitmap 
gContainer.cacheAsBitmap = true;

// Scale down (the bitmap) to get smooth edges
gContainer.scale.set(0.5);

如果需要更新图形，只需设置cacheAsBitmap = false，进行更新，然后再次设置cacheAsBitmap = true。

请记住，每次更新都会呈现纹理，这比仅重新绘制图形效率要低得多。

Answer 3

还要了解，当由WebGL绘制时，图形使用模板缓冲区，它实际上不允许消除锯齿。因此，如果您希望绘制的圆圈是这样，那么将您绘制的内容转换为纹理并在精灵中使用它。

http://pixijs.download/v4.3.4/docs/PIXI.Graphics.html#generateCanvasTexture

Answer 4

适用于v5.1.5：

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

我如何在PixiJS中使用Antialias Graphics（Circle）？

4 个答案: