标签:关系 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
标签:关系 png 放大 步骤 function osi text reference dom操作
原文地址:https://www.cnblogs.com/zhangjingyun/p/10368939.html