如何在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設置=真。

千萬記住紋理渲染對於每個更新，這遠遠不只是重新繪製圖形本身效率較低。