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()就可以

posted @ 2019-08-21 11:36  越甲鸣吾君  阅读(838)  评论(2编辑  收藏  举报