我在使用Pixi.js时遇到问题,其中lineTo方法似乎绘制了未指定的行。坏线的宽度不均匀(看起来朝向末端逐渐变细)并且比它们应该长得多。示例jsfiddle显示此处的问题:
http://jsfiddle.net/b1e48upd/1/
var stage, renderer;
function init() {
stage = new PIXI.Stage(0x001531, true);
renderer = new PIXI.WebGLRenderer(800, 600);
// renderer = new PIXI.CanvasRenderer(400, 300);
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
graphics = new PIXI.Graphics();
stage.addChild(graphics);
graphics.beginFill(0xFF0000);
graphics.lineStyle(3, 0xFF0000);
graphics.moveTo(200, 200);
graphics.lineTo(192, 192);
graphics.lineTo(198, 183);
graphics.lineTo(189, 197);
}
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
init();
使用画布渲染器可以得到正确的结果。
试图搜索此问题,我收集到WebGL渲染器可能存在非整数值的问题(在此处显示的问题:Pixi.js lines are rendered outside dedicated area),而且我也是看到将连续的lineTo命令发送到相同的坐标会导致问题,但我的例子中没有任何一个。