码迷,mamicode.com
首页 > 其他好文 > 详细

pixi学习总结

时间:2019-02-13 13:06:43      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:关系   png   放大   步骤   function   osi   text   reference   dom操作   

1.使用的是webgl,是一个超快的html5 2d渲染引擎。

2.写好的pixi demo尽量是以http://方式展示,而不是file://,意思就是,放到服务器下

3.创建一个pixi实例,并展示出来,需要经历几个步骤

(1)创建一个舞台 stage ---- 理解为背景,层级最低

(2)创建一个画布 render ----选择canvas或者webgl渲染一个区域

   pixi。autodetectrenderer

      材质 texture,承载图片,本身不能显示,必须通过精灵来显示

  var spirte = new pixi.sprite.fromimage(‘assets/image.png‘);

  var texture= pixt.terxtrue.fromimage(‘bunny.png‘);

  var sprite = new pixi.spite(texture);

   

(3)把画布插入dom

  (4)  创建一个精灵 sprite

(5)把精灵放入画布

(6)把画布加入舞台

(7)不断刷新舞台

 

事件交互

click,mousedown,mouseover,

注意事项:通常需要设置sprite.interactive = true , 对于作按钮用的精灵,需要设置sprite.buttonMode = true;

与DOM的事件不同的是,精灵中的事件,是进行了二次封装的,???

通常需要用var event = data.originalEvent来与普通dom中的event对象保持一至???

demo pixi显示一张图片

精灵放大2倍???跟我想象的不一样,我以为直接scale*倍数就好了

var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘);
 var sx = sprite.scale.x;
 var px = sprite.position.x;

 sprite.scale.x += 1;
 sprite.position.x -= px;
//Y方向同理
...
//刷新一下
requestAnimFrame(animate);

精灵层级问题
先加入画布的,出现在最下面,后加入的,出现在上面。
如果想调整精灵的层级关系,数组收集精灵,排序好之后在循环加入画布。但是,事先不确定层级关系的时候,给精灵加z-index属性,然后遍历这个属性进行排序,最后刷新舞台
  function pixiSort(arr){
             var ln = arr.length;
             var tmp;
             for(var i = 0;i<ln-1;i++){
                 for(var j=i+1;j<ln;j++){
                     tmp = arr[i];
                     if(arr[i].sortIndex > arr[j].sortIndex){
                         arr[i] = arr[j];
                         arr[j] = tmp;
                     }
                 }
             }
         }
受html dom操作的影响,有时候我们需要精灵按照指定的层级进行排列显示,比如给精灵指定index属性。要做到对zindex的控制,可以用到如下方法
function updateZindex(ob,stage){
            Object.defineProperty(ob,‘zIndex‘,{
                set : function(value){
                    if(this.sortIndex !== value){
                        this.sortIndex = value;
                        pixiSort(stage.children);
                    }
                },
                get : function(){
                    return this.sortIndex;
                }
            });
        }

  

 说白了,就是控制精灵的先后顺序来达到显示层级的效果。

最后是如何销毁:

//移除全部精灵
stage.removeChildren()
//移除整个舞台的引用
stage.removeStageReference()

 我也没想明白,为什么要销毁精灵

以上创建的是建静止的精灵,及在精灵上邦定事件。

文章转载,原文出处:https://www.cnblogs.com/afrog/p/4056378.html

 

pixi学习总结

标签:关系   png   放大   步骤   function   osi   text   reference   dom操作   

原文地址:https://www.cnblogs.com/zhangjingyun/p/10368939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!