如何在PixiJS中使用Antialias图形（圆形）？

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到启动PARAMS？ 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

也明白，当由WebGL绘制图形时，使用模板缓冲区，它实际上不允许消除锯齿。所以，如果你想绘制的圆是这样的，那么就把你绘制成的纹理转换成纹理，然后用在精灵中。

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

Answer 3

如果你不能/不会在渲染级别使用反锯齿，这里有一个小窍门抗锯齿特定的图形。

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设置=假，做了更新，然后再次将cacheAsBitmap设置=真。

千万记住纹理渲染对于每个更新，这远远不只是重新绘制图形本身效率较低。