如何在 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的調用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

適用於 v5.1.5：

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

Answer 4

還要理解圖形，當由 WebGL 繪制時，使用模板緩沖區，它實際上不允許抗鋸齒。 因此，如果您希望繪制的圓圈如此，請將您繪制的內容轉換為紋理並在精靈中使用它。

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