当我使用 pixi js 画一个圆时,我一直无法获得平滑的圆周。当我画大圆圈时,我已经可以看到几个 Angular ,当我缩小它时,情况变得更糟。 (我需要一个小圆圈)。
这是代码:
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>
非常感谢任何帮助,如果您需要有关我的代码的更多信息,请告诉我。非常感谢!
最佳答案
难道你只需要通过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
传递更高的数字尽管您需要正确设置 CSSrenderer = 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>
关于javascript - 如何在 PixiJS 中抗锯齿图形(圆形)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41932258/