Pixi.js裁微信头像为圆形
最近在做一个小游戏,在结束页面不论挑战成功还是失败都会有使用者的头像挂上去(昨天因为跨越问题刚取消),刚开始因为圆形头像问题纠结了一下,不过查了下文档发觉很好解决。
var graphics = new PIXI.Graphics();
graphics.beginFill(0x333333);
var headWidth=170*proportion// proportion是百分比,170是设计图宽高
graphics.drawCircle(Math.floor(center-failhead.height*0.005),Math.floor(failhead.y+headWidth/2+failhead.height*0.02), headWidth/2);//x,y,r
graphics.endFill();
var head = new PIXI.Sprite(PIXI.loader.resources['asset/result/head.jpg'].texture);
head.width=headWidth;
head.height=headWidth;
head.x=Math.floor((width-head.width)/2-failhead.height*0.01);
head.y=Math.floor(failhead.y+failhead.height*0.02)
head.mask = graphics;
里面的一下位置是根据我当前游戏确定的,所以没必要在意,根据自己的需求填写数据就好,如果裁方图就drawRect()就可以

浙公网安备 33010602011771号