关于Pixi中裁微信头像为圆形

时间:2019-08-21
本文章向大家介绍关于Pixi中裁微信头像为圆形,主要包括关于Pixi中裁微信头像为圆形使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

最近在做一个小游戏,在结束页面不论挑战成功还是失败都会有使用者的头像挂上去(昨天因为跨越问题刚取消),刚开始因为圆形头像问题纠结了一下,不过查了下文档发觉很好解决。

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

原文地址:https://www.cnblogs.com/mistrainy/p/11387830.html