[英]How Do I Antialias Graphics (Circle) in PixiJS?
i've been having trouble getting a smooth circumference when i draw a circle using pixi js.当我使用 pixi js 画圆时,我一直无法获得平滑的圆周。 I can already see a few corners when i draw big circles, and it gets so much worse when i size it down.当我画大圆圈时,我已经可以看到几个角落,而当我缩小它的大小时,情况会变得更糟。 (A small circle is what I need). (我需要一个小圆圈)。
Here's the code:这是代码:
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>
Any help is greatly appreciated, let me know if you need some more info about my code.非常感谢任何帮助,如果您需要有关我的代码的更多信息,请告诉我。 Thanks a lot!非常感谢!
Don't you just need to pass antialias:true
to the startup params?你不是只需要将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>
Not sure what you're false, true
arguments are at the end of your call to PIXI.autoDetectRenderer
不确定你是false, true
参数在你对PIXI.autoDetectRenderer
的调用PIXI.autoDetectRenderer
You could also pass a higher number for resolution
though you'll need to correctly set your CSS您也可以传递更高的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>
In case you can't / won't use antialias on a renderer level, here's a little trick to antialias a specific graphic.如果您不能/不会在渲染器级别使用抗锯齿,这里有一个对特定图形进行抗锯齿的小技巧。
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);
If you need to update your graphic, just set cacheAsBitmap = false, do the updates, and then set cacheAsBitmap = true again.如果您需要更新图形,只需设置 cacheAsBitmap = false,进行更新,然后再次设置 cacheAsBitmap = true。
Do keep in mind a texture is rendered for each update, which is far less efficient than just redrawing the graphic itself.请记住,每次更新都会渲染纹理,这比重绘图形本身效率要低得多。
Works with v5.1.5:适用于 v5.1.5:
const app = new PIXI.Application({
...
antialias: true,
autoDensity: true, // !!!
resolution: 2,
...
});
Also understand that graphics, when drawn by WebGL, uses the stencil buffer, which doesn't actually allow anti-aliasing.还要理解图形,当由 WebGL 绘制时,使用模板缓冲区,它实际上不允许抗锯齿。 So if you want the drawn circle to be so, then covert what you have drawn into a texture and use that within a sprite instead.因此,如果您希望绘制的圆圈如此,请将您绘制的内容转换为纹理并在精灵中使用它。
http://pixijs.download/v4.3.4/docs/PIXI.Graphics.html#generateCanvasTexture http://pixijs.download/v4.3.4/docs/PIXI.Graphics.html#generateCanvasTexture
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.