首页 > 代码库 > 【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 & LGlobal静态类
【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 & LGlobal静态类
一，前言
最近开始学习lufylegend.js，它是一款基于MIT协议的开源HTML5游戏引擎，目前使用Canvas渲染，2.0后会增添WebGL渲染。与其他的引擎相比，最大的特点就是模仿了ActionScript 3.0的语法，当然这只是一个特点，不会ActionScript对于学习lufylegend.js也没有什么坏的影响，我就是一个很好的例子(*_^)，只不过如果你接触过ActionScript，那使用lufylegend.js的时候可能会顺手一些。以下是关于lufylegend.js的一些相关资源。
lufylegend.js官方网站：http://lufylegend.com/lufylegend
中文文档地址：http://lufylegend.com/api/zh_CN/out/
论坛地址：http://lufylegend.com/forum/forum.php
官方博客：http://blog.csdn.net/lufy_legend
lufylegend.js的最新版本是1.9.0，该版本的changelog可以到官方网站上进行查阅。
二，全局函数
这里只主要介绍几个常见的函数，还有一两个没有介绍，大家可以到文档->全局函数中进行查找。
Ⅰ LInit函数
这是一个初始化游戏的函数，注意该函数在1.9.0之前叫init，不过在1.9.0中使用init函数也可以初始化游戏，换句话说，LInit = init。这个函数有六个参数，通常情况下最后一个可以不用传。相关用法请看：
http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LInit
内部的代码如下：
1 function init (s, c, w, h, f, t) { 2 LGlobal.speed = s; 3 var _f = function () { 4 if (LGlobal.canTouch && LGlobal.aspectRatio == LANDSCAPE && window.innerWidth < window.innerHeight) { 5 LGlobal.horizontalError(); 6 } else if (LGlobal.canTouch && LGlobal.aspectRatio == PORTRAIT && window.innerWidth > window.innerHeight) { 7 LGlobal.verticalError(); 8 } else { 9 setTimeout(f, 100);10 }11 LGlobal.startTimer = (new Date()).getTime();12 };13 if (t != null && t == LEvent.INIT) {14 LGlobal.frameRate = setInterval(function () {15 LGlobal.onShow();16 }, s);17 LGlobal.setCanvas(c, w, h);18 _f();19 }else{20 LEvent.addEventListener(window, "load", function () {21 LGlobal.frameRate = setInterval(function () {22 LGlobal.onShow();23 }, s);24 LGlobal.setCanvas(c, w, h);25 _f();26 });27 }28 }29 var LInit = init;
这个函数关联的地方比较多，我就一一列举出来吧。
LEvent类的代码：
1 function LEvent(type){ 2 this.eventType = type; 3 this._ll_preventDefault = false; 4 } 5 LEvent.prototype.preventDefault = function () { 6 this._ll_preventDefault = true; 7 }; 8 LEvent.INIT = "init"; 9 LEvent.COMPLETE = "complete";10 LEvent.ENTER_FRAME = "enter_frame";11 LEvent.WINDOW_RESIZE = "resize";12 LEvent.SOUND_COMPLETE = "sound_complete";13 LEvent.END_CONTACT = "endContact";14 LEvent.PRE_SOLVE = "preSolve";15 LEvent.POST_SOLVE = "postSolve";16 LEvent.BEGIN_CONTACT = "beginContact";17 LEvent.addEventListener = function (n, t, f, b) {18 if (b == null) {19 b = false;20 }21 if (n.addEventListener) {22 n.addEventListener(t, f, b);23 } else if (n.attachEvent) {24 n["e" + t + f] = f;25 n[t + f] = function () {26 n["e" + t + f]();27 };28 n.attachEvent("on" + t, n[t + f]);29 }30 };31 LEvent.removeEventListener = function (n, t, f, b) {32 if (b == null) {33 b = false;34 }35 if (n.removeEventListener) {36 n.removeEventListener(t, f, b);37 } else if (n.detachEvent) {38 n["e" + t + f] = f;39 n[t + f] = function () {40 n["e" + t + f]();41 };42 n.detachEvent("on" + t, n[t + f]);43 }44 };
LGlobal里的相关函数：
1 LGlobal.setCanvas = function (id, w, h) { 2 LGlobal.ll_createCanvas(id, w, h); 3 LGlobal.ll_createStage(); 4 if(LGlobal.displayState == LStage.FULL_SCREEN){ 5 LGlobal.resize(); 6 }else if(typeof LGlobal.displayState == "number"){ 7 LGlobal.resize(LGlobal.width * LGlobal.displayState, LGlobal.height * LGlobal.displayState); 8 } 9 if (LGlobal.canTouch) { 10 LGlobal.ll_clicks = 0; 11 LGlobal.ll_prev_clickTime = 0; 12 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.TOUCH_START, LGlobal.ll_touchStart); 13 LEvent.addEventListener(document,LMouseEvent.TOUCH_END, LGlobal.ll_touchEnd); 14 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.TOUCH_MOVE, LGlobal.ll_touchMove); 15 } else { 16 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.DOUBLE_CLICK, LGlobal.ll_mouseDbclick); 17 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN, LGlobal.ll_mouseDown); 18 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_MOVE, LGlobal.ll_mouseMove); 19 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_UP, LGlobal.ll_mouseUp); 20 LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_OUT, LGlobal.ll_mouseOut); 21 } 22 }; 23 LGlobal.ll_createCanvas = function (id, w, h) { 24 LGlobal.id = id; 25 LGlobal.object = document.getElementById(id); 26 LGlobal.object.innerHTML = ‘<div style="position:absolute;margin:0;padding:0;overflow:visible;-webkit-transform: translateZ(0);z-index:0;">‘ + 27 ‘<canvas id="‘ + LGlobal.id + ‘_canvas" style="margin:0;padding:0;width:‘ + w + ‘px;height:‘ + h + ‘px;">‘ + 28 ‘<div id="noCanvas">‘ + 29 "<p>Hey there, it looks like you‘re using Microsoft‘s Internet Explorer. Microsoft hates the Web and doesn‘t support HTML5 :(</p>" + 30 ‘</div>‘ + 31 ‘</canvas></div>‘ + 32 ‘<div id="‘ + LGlobal.id + ‘_InputText" style="position:absolute;margin:0;padding:0;z-index:10;display:none;">‘ + 33 ‘<textarea rows="1" id="‘ + LGlobal.id + ‘_InputTextareaBox" style="resize:none;background:transparent;border:0px;"></textarea>‘ + 34 ‘<input type="text" id="‘ + LGlobal.id + ‘_InputTextBox" style="background:transparent;border:0px;" />‘ + 35 ‘<input type="password" id="‘ + LGlobal.id + ‘_passwordBox" style="background:transparent;border:0px;" /></div>‘; 36 LGlobal.canvasObj = document.getElementById(LGlobal.id + "_canvas"); 37 LGlobal._canvas = document.createElement("canvas"); 38 LGlobal._context = LGlobal._canvas.getContext("2d"); 39 if (LGlobal._context) { 40 LGlobal.canvasObj.innerHTML=""; 41 } 42 LGlobal.inputBox = document.getElementById(LGlobal.id + ‘_InputText‘); 43 LGlobal.inputTextareaBoxObj = document.getElementById(LGlobal.id + ‘_InputTextareaBox‘); 44 LGlobal.inputTextBoxObj = document.getElementById(LGlobal.id + ‘_InputTextBox‘); 45 LGlobal.passwordBoxObj = document.getElementById(LGlobal.id + ‘_passwordBox‘); 46 LGlobal.inputTextField = null; 47 if (w) { 48 LGlobal.canvasObj.width = w; 49 } 50 if (h) { 51 LGlobal.canvasObj.height = h; 52 } 53 LGlobal.width = LGlobal.canvasObj.width; 54 LGlobal.height = LGlobal.canvasObj.height; 55 LGlobal.canvasStyleWidth = LGlobal.width; 56 LGlobal.canvasStyleHeight = LGlobal.height; 57 LGlobal.canvas = LGlobal.canvasObj.getContext("2d"); 58 LGlobal.offsetX = mouseX = 0; 59 LGlobal.offsetY = mouseY = 0; 60 }; 61 LGlobal.ll_createStage = function () { 62 LGlobal.stage = new LSprite(); 63 LGlobal.stage.parent = "root"; 64 LGlobal.childList.push(LGlobal.stage); 65 LGlobal.stage.baseAddEvent = LGlobal.stage.addEventListener; 66 LGlobal.stage.baseRemoveEvent = LGlobal.stage.removeEventListener; 67 LGlobal.stage.addEventListener = function (type, listener) { 68 if (type == LEvent.WINDOW_RESIZE) { 69 LGlobal.stage.onresizeListener = listener; 70 LGlobal.stage.onresize = function (e) { 71 LGlobal.stage.onresizeEvent = e; 72 }; 73 LEvent.addEventListener(LGlobal.window, type,LGlobal.stage.onresize); 74 } else if (type == LKeyboardEvent.KEY_DOWN || type == LKeyboardEvent.KEY_UP || type == LKeyboardEvent.KEY_PRESS) { 75 LEvent.addEventListener(LGlobal.window, type, listener); 76 } else { 77 LGlobal.stage.baseAddEvent(type, listener); 78 } 79 }; 80 LGlobal.stage.removeEventListener = function (type, listener) { 81 if (type == LEvent.WINDOW_RESIZE) { 82 LEvent.removeEventListener(LGlobal.window, LEvent.WINDOW_RESIZE, LGlobal.stage.onresize); 83 delete LGlobal.stage.onresize; 84 delete LGlobal.stage.onresizeListener; 85 } else if (type == LKeyboardEvent.KEY_DOWN || type == LKeyboardEvent.KEY_UP || type == LKeyboardEvent.KEY_PRESS) { 86 LEvent.removeEventListener(LGlobal.window, type, listener); 87 } else { 88 LGlobal.stage.baseRemoveEvent(type, listener); 89 } 90 }; 91 }; 92 LGlobal.ll_touchStart = function (event) { 93 if (LGlobal.inputBox.style.display != NONE) { 94 LGlobal.inputTextField._ll_getValue(); 95 } 96 var canvasX = parseInt(0 + LGlobal.object.style.left) + parseInt(LGlobal.canvasObj.style.marginLeft), 97 canvasY = parseInt(0 + LGlobal.object.style.top) + parseInt(LGlobal.canvasObj.style.marginTop), eve, k, i, eveIndex; 98 if (LMultitouch.inputMode == LMultitouchInputMode.NONE) { 99 eveIndex = 0;100 } else if (LMultitouch.inputMode == LMultitouchInputMode.TOUCH_POINT) {101 eveIndex = event.touches.length - 1;102 }103 eve = {offsetX : (event.touches[eveIndex].pageX - canvasX),104 offsetY : (event.touches[eveIndex].pageY - canvasY),105 touchPointID : event.touches[eveIndex].identifier};106 eve.offsetX = LGlobal.ll_scaleX(eve.offsetX);107 eve.offsetY = LGlobal.ll_scaleY(eve.offsetY);108 mouseX = LGlobal.offsetX = eve.offsetX;109 mouseY = LGlobal.offsetY = eve.offsetY;110 LMultitouch.touchs["touch" + eve.touchPointID] = eve;111 LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_DOWN);112 LGlobal.buttonStatusEvent = eve;113 var date = new Date();114 var clickTime = date.getTime();115 LGlobal.ll_clicks = (clickTime <= (LGlobal.ll_prev_clickTime + 500)) ? (LGlobal.ll_clicks + 1) : 1;116 LGlobal.ll_prev_clickTime = clickTime;117 if (LGlobal.ll_clicks === 2) {118 LGlobal.mouseEvent(eve, LMouseEvent.DOUBLE_CLICK);119 LGlobal.ll_clicks = 0;120 }121 LGlobal.IS_MOUSE_DOWN = true;122 if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_start) {123 LGlobal.mouseJoint_start(eve);124 }125 LGlobal.touchHandler(event);126 };127 LGlobal.ll_touchEnd = function (event) {128 var e, eve, k, i, l, h;129 if (LMultitouch.inputMode == LMultitouchInputMode.TOUCH_POINT) {130 for (k in LMultitouch.touchs) {131 e = LMultitouch.touchs[k];132 h = false;133 for (i = 0,l = event.touches.length; i < l; i++) {134 if (event.touches[i].identifier == e.touchPointID) {135 h = true;136 break;137 }138 }139 if (!h) {140 eve = e;141 delete LMultitouch.touchs[k];142 break;143 }144 }145 }146 if (!eve) {147 eve = {offsetX : LGlobal.offsetX, offsetY : LGlobal.offsetY};148 }149 LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_UP);150 LGlobal.touchHandler(event);151 LGlobal.IS_MOUSE_DOWN = false;152 LGlobal.buttonStatusEvent = null;153 if (LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {154 LGlobal.box2d.world.DestroyJoint(LGlobal.box2d.mouseJoint);155 LGlobal.box2d.mouseJoint = null;156 }157 };158 LGlobal.ll_touchMove = function (e) {159 var cX = parseInt(0 + LGlobal.object.style.left) + parseInt(LGlobal.canvasObj.style.marginLeft),160 cY = parseInt(0 + LGlobal.object.style.top) + parseInt(LGlobal.canvasObj.style.marginTop),161 eve, l, ll = e.touches.length;162 if (LMultitouch.inputMode == LMultitouchInputMode.NONE) {163 ll = 1;164 }165 for (i = 0, l = e.touches.length; i < l && i < ll; i++) {166 eve = {offsetX : (e.touches[i].pageX - cX), offsetY : (e.touches[i].pageY - cY), touchPointID : e.touches[i].identifier};167 eve.offsetX = LGlobal.ll_scaleX(eve.offsetX);168 eve.offsetY = LGlobal.ll_scaleY(eve.offsetY);169 mouseX = LGlobal.offsetX = eve.offsetX;170 mouseY = LGlobal.offsetY = eve.offsetY;171 if (LMultitouch.touchs["touch" + eve.touchPointID] && 172 LMultitouch.touchs["touch" + eve.touchPointID].offsetX == eve.offsetX && 173 LMultitouch.touchs["touch" + eve.touchPointID].offsetY == eve.offsetY){174 continue; 175 }176 LGlobal.buttonStatusEvent = eve;177 LMultitouch.touchs["touch" + eve.touchPointID] = eve;178 LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_MOVE);179 }180 LGlobal.touchHandler(e);181 if(LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_move){182 LGlobal.mouseJoint_move(eve);183 }184 };185 LGlobal.ll_mouseDbclick = function (e) {186 if (e.offsetX == null && e.layerX != null) {187 e.offsetX = e.layerX;188 e.offsetY = e.layerY;189 }190 var event = {button : e.button};191 event.offsetX = LGlobal.ll_scaleX(e.offsetX);192 event.offsetY = LGlobal.ll_scaleY(e.offsetY);193 LGlobal.mouseEvent(event, LMouseEvent.DOUBLE_CLICK);194 };195 LGlobal.ll_mouseDown = function (e) {196 if (e.offsetX == null && e.layerX != null) {197 e.offsetX = e.layerX;198 e.offsetY = e.layerY;199 }200 if (LGlobal.inputBox.style.display != NONE) {201 LGlobal.inputTextField._ll_getValue();202 }203 var event = {button : e.button};204 event.offsetX = LGlobal.ll_scaleX(e.offsetX);205 event.offsetY = LGlobal.ll_scaleY(e.offsetY);206 LGlobal.mouseEvent(event, LMouseEvent.MOUSE_DOWN);207 LGlobal.IS_MOUSE_DOWN = true;208 if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_start) {209 LGlobal.mouseJoint_start(e);210 }211 };212 LGlobal.ll_mouseMove = function (e) {213 if (e.offsetX == null && e.layerX != null) {214 e.offsetX = e.layerX;215 e.offsetY = e.layerY;216 }217 var event = {};218 event.offsetX = LGlobal.ll_scaleX(e.offsetX);219 event.offsetY = LGlobal.ll_scaleY(e.offsetY);220 LGlobal.buttonStatusEvent = event;221 mouseX = LGlobal.offsetX = event.offsetX;222 mouseY = LGlobal.offsetY = event.offsetY;223 LGlobal.mouseEvent(event, LMouseEvent.MOUSE_MOVE);224 if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {225 LGlobal.box2d.mouseJoint.SetTarget(new LGlobal.box2d.b2Vec2(e.offsetX / LGlobal.box2d.drawScale, e.offsetY / LGlobal.box2d.drawScale));226 }227 };228 LGlobal.ll_mouseUp = function (e) {229 if (e.offsetX == null && e.layerX != null) {230 e.offsetX = e.layerX;231 e.offsetY = e.layerY;232 }233 var event = {button : e.button};234 event.offsetX = LGlobal.ll_scaleX(e.offsetX);235 event.offsetY = LGlobal.ll_scaleY(e.offsetY);236 LGlobal.mouseEvent(event, LMouseEvent.MOUSE_UP);237 LGlobal.IS_MOUSE_DOWN = false;238 if (LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {239 LGlobal.box2d.world.DestroyJoint(LGlobal.box2d.mouseJoint);240 LGlobal.box2d.mouseJoint = null;241 }242 };243 LGlobal.ll_mouseOut = function (e) {244 if (e.offsetX == null && e.layerX != null) {245 e.offsetX = e.layerX;246 e.offsetY = e.layerY;247 }248 var event = {};249 event.offsetX = LGlobal.ll_scaleX(e.offsetX);250 event.offsetY = LGlobal.ll_scaleY(e.offsetY);251 LGlobal.mouseEvent(event, LMouseEvent.MOUSE_OUT);252 LGlobal.IS_MOUSE_DOWN = false;253 };254 LGlobal.touchHandler = function (e) {255 e.stopPropagation();256 if (LGlobal.preventDefault) {257 e.preventDefault();258 }259 if (e.stopImmediatePropagation) {260 e.stopImmediatePropagation();261 }262 return e;263 };264 LGlobal.mouseEvent = function (e, t) {265 if (t == LMouseEvent.MOUSE_MOVE) {266 LGlobal.dragHandler(e);267 }268 if (LMouseEventContainer.container[t]) {269 LMouseEventContainer.dispatchMouseEvent(e, t);270 return;271 }272 for (var k = LGlobal.childList.length - 1; k >= 0; k--) {273 if (LGlobal.childList[k].mouseEvent && LGlobal.childList[k].mouseEvent(e, t)) {274 break;275 }276 }277 };278 LGlobal.dragHandler = function (e) {279 var i, s, c, d = LGlobal.dragList;280 for(i = d.length - 1; i >= 0; i--) {281 s = d[i];282 if (LGlobal.canTouch && s.ll_touchPointID != e.touchPointID) {283 continue;284 }285 c = s.getAbsoluteScale();286 s.x = s.ll_dragStartX + (e.offsetX - s.ll_dragMX) * s.scaleX / c.scaleX;287 s.y = s.ll_dragStartY + (e.offsetY - s.ll_dragMY) * s.scaleY / c.scaleY;288 break;289 }290 };291 LGlobal.onShow = function () {292 if (LGlobal.canvas == null) {293 return;294 }295 if (LGlobal.stage.onresizeEvent) {296 LGlobal.stage.onresizeListener(LGlobal.stage.onresizeEvent);297 delete LGlobal.stage.onresizeEvent;298 }299 if (LGlobal.box2d != null) {300 LGlobal.box2d.ll_show();301 if (!LGlobal.traceDebug && LGlobal.keepClear) {302 LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);303 }304 } else {305 if (LGlobal.keepClear) {306 LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);307 }308 if (LGlobal.backgroundColor !== null) {309 LGlobal.canvas.fillStyle = LGlobal.backgroundColor;310 LGlobal.canvas.fillRect(0, 0, LGlobal.width, LGlobal.height);311 }312 }313 LGlobal.show(LGlobal.childList);314 };315 LGlobal.show = function (s) {316 for (var i = 0, l = s.length; i < l; i++) {317 if (s[i] && s[i].ll_show) {318 s[i].ll_show();319 }320 }321 };
代码就不一一解释了，大致说明一下吧，setCanvas以及在setCanvas中调用的函数主要用于创建并配置canvas对象，看了文档的朋友都知道，LInit第二个参数传入的是游戏界面所在div的id值而并非canvas的id值，所以这些函数就负责把canvas创建好，并配置好事件以及调度事件的接口。而onShow和show则是负责渲染的函数，因为游戏中可能会有层次化或别的不经过循环处理不能实现的效果，所以引擎在LInit中就用了setInterval来周期性调用onShow函数，进行驱动渲染。这些就是lufylegend.js的事件、渲染机制。
还有就是LEvent类，这个类保存了大量的引擎中的自带事件，并且有addEventListener和removeEventListener函数，这些函数都是对html元素进行事件操作的，也就是说如果你想为你自己写的一个html标签创建或删除一个事件，并且要兼容多个浏览器的话，就可以用LEvent.addEventListener和LEvent.removeEventListener。一般需要传入的参数有：[ 添加对象，事件名，调度的函数 ]。LEvent其他的用法可以看：http://lufylegend.com/api/zh_CN/out/classes/LEvent.html
Ⅱ addChild函数
调用这个函数相当于调用ActionScript里的stage.addChild，也就是说把显示对象加入到底层。显示对象有哪些呢？主要的有LSprite，LBitmap，LTextField等。相关用法请看：
http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_addChild
内部的代码如下：
1 function addChild (o) {2 LGlobal.stage.addChild(o);3 }
Ⅲ removeChild函数
调用这个函数相当于调用ActionScript里的stage.removeChild，也就是说把显示对象从底层删除。相关用法请看：
http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_removeChild
内部的代码如下：
1 function removeChild (o) {2 LGlobal.stage.removeChild(o);3 }
三，LGlobal静态类
LGlobal是lufylegend.js中的全局类，用于装载许多关于全局设置的函数和全局属性，比如说全屏处理，获取canvas信息等。LGlobal的文档地址如下：http://lufylegend.com/api/zh_CN/out/classes/LGlobal.html
注意LSystem = LStage = LGlobal。
在LGlobal中，拉伸界面的函数叫screen，这个函数很有意思，通常情况下用来实现全屏游戏，我们不妨来看看这个函数内部的实现方法：
1 LGlobal.screen = function (a) { 2 LGlobal.displayState = a; 3 if (LGlobal.stage) { 4 if (typeof LGlobal.displayState == "number") { 5 LGlobal.resize(LGlobal.width * LGlobal.displayState, LGlobal.height * LGlobal.displayState); 6 } else { 7 LGlobal.resize(); 8 } 9 }10 };
首先使用时我们需要往这里面传一个参数，也就是拉伸大小，如果传个数字就会把界面按拉伸模式拉伸到指定的倍数。如果你想弄成全屏，那就传入LGlobal.FULL_SCREEN，这个属性的值其实是一个字符串。介绍完参数，我们来看看代码，在LGlobal.screen里第一行代码就是保存一下拉伸大小，第二行的判断条件中有个LGlobal.stage，这个是一个LSprite对象，LSprite会在今后的文章中讲到，因为这是一个非常重要的类；第二行里的判断主要作用是在LInit调用后screen函数也有拉伸界面的效果，因为在调用LInit前，Html里的元素可能并没有加载完成，但拉伸界面的时候必须要找到canvas对象，所以在LInit调用时也会使用到这个判断中的代码来保证LInit前使用screen也能达到拉伸界面的效果。第三行和第五行就是在进行代码运行分岔，条件是拉伸大小是否为数字。虽然这里通过if...else...分了两条路出来，不过都同时调用了resize函数，接下来就该看看resize函数了：
1 LGlobal.resize = function (canvasW, canvasH) { 2 var w, h, t = 0, l = 0, ww = window.innerWidth, wh = window.innerHeight; 3 if (canvasW) { 4 w = canvasW; 5 } 6 if (canvasH) { 7 h = canvasH; 8 } 9 if (LGlobal.stageScale == "noScale") {10 w = canvasW || LGlobal.width;11 h = canvasH || LGlobal.height;12 }13 switch (LGlobal.stageScale) {14 case "exactFit":15 w = canvasW || ww;16 h = canvasH || wh;17 break;18 case "noBorder":19 w = canvasW || ww;20 h = canvasH || LGlobal.height*ww/LGlobal.width;21 switch (LGlobal.align) {22 case LStageAlign.BOTTOM:23 case LStageAlign.BOTTOM_LEFT:24 case LStageAlign.BOTTOM_RIGHT:25 case LStageAlign.BOTTOM_MIDDLE:26 t = wh - h;27 break;28 }29 break;30 case "showAll":31 if (ww / wh > LGlobal.width / LGlobal.height) {32 h = canvasH || wh;33 w = canvasW || LGlobal.width * wh / LGlobal.height;34 } else {35 w = canvasW || ww;36 h = canvasH || LGlobal.height * ww / LGlobal.width;37 }38 case "noScale":39 default:40 switch (LGlobal.align) {41 case LStageAlign.BOTTOM:42 case LStageAlign.BOTTOM_LEFT:43 t = wh - h;44 break;45 case LStageAlign.RIGHT:46 case LStageAlign.TOP_RIGHT:47 l = ww - w;48 break;49 case LStageAlign.TOP_MIDDLE:50 l = (ww - w) * 0.5;51 break;52 case LStageAlign.BOTTOM_RIGHT:53 t = wh - h;54 l = ww - w;55 break;56 case LStageAlign.BOTTOM_MIDDLE:57 t = wh - h;58 l = (ww - w) * 0.5;59 break;60 case LStageAlign.MIDDLE:61 t = (wh - h) * 0.5;62 l = (ww - w) * 0.5;63 break;64 case LStageAlign.TOP:65 case LStageAlign.LEFT:66 case LStageAlign.TOP_LEFT:67 default:68 }69 }70 LGlobal.canvasObj.style.marginTop = t + "px";71 LGlobal.canvasObj.style.marginLeft = l + "px";72 if (LGlobal.isFirefox) {73 LGlobal.left = parseInt(LGlobal.canvasObj.style.marginLeft);74 LGlobal.top = parseInt(LGlobal.canvasObj.style.marginTop);75 }76 LGlobal.ll_setStageSize(w, h);77 };
这里面主要是实现了界面对齐，和计算拉伸尺寸。
实现界面对齐是因为使用者可能有需求使界面处于屏幕的不同位置，当然通常情况下使用居中，大家可以看看文档上关于这方面的介绍：http://lufylegend.com/api/zh_CN/out/classes/LStageAlign.html
计算拉伸尺寸是为了下一步进行拉伸操作做准备，lufylegend.js中全屏拉伸模式有那么几种，在resize函数里会根据不同的模式进行不同的尺寸计算，详情请移步：http://lufylegend.com/api/zh_CN/out/classes/LStageScaleMode.html
界面拉伸的实现我们一直没看到，是吧？其实就离我们一步之遥了，拉伸方面的实现就在ll_setStageSize里，这个函数有两个参数，分别是拉伸的宽度和高度，这些都已经计算好了，所以直接传给了ll_setStageSize函数。
ll_setStageSize里的代码：
1 LGlobal.ll_setStageSize = function (w, h) {2 w = Math.ceil(w);3 h = Math.ceil(h);4 LGlobal.canvasObj.style.width = w + "px";5 LGlobal.canvasObj.style.height = h + "px";6 LGlobal.canvasStyleWidth = w;7 LGlobal.canvasStyleHeight = h;8 };
就短短的8行就解决了问题。那么总得来说，要实现拉伸canvas效果，直接改canvas元素的style.width和style.height就能实现。最后来看看效果图吧：
测试地址为：http://lufylegend.com/api/api/LGlobal/screen.html
Demo中用到的代码如下：
1 LInit(1000/60, "legend", 240, 240, main); 2 function main () { 3 LGlobal.stageScale = LStageScaleMode.SHOW_ALL; 4 LGlobal.screen(LStage.FULL_SCREEN); 5 //you can also use it like : LGlobal.screen(1.5); 6 var loader = new LLoader(); 7 loader.addEventListener(LEvent.COMPLETE, loadBitmapdata); 8 loader.load("http://lufylegend.com/api/api/LGlobal/face.jpg 9 ", "bitmapData");10 }11 function loadBitmapdata (event) {12 var bitmapdata = http://www.mamicode.com/new LBitmapData(event.target); 13 var bitmap = new LBitmap(bitmapdata);14 addChild(bitmap);15 }
Ok，今天就先到此为止，欢迎大家留言，下次我们就来看看所有显示对象的基类LDisplayObject，敬请期待~
欢迎大家继续关注我的博客http://www.cnblogs.com/yuehao
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。