引擎中鼠标事件失效的问题

yorhomwang

群里有一位朋友使用引擎做一个浏览图片效果，嵌入到html中，也就是说html中除了<div id="mylegend">的元素（及初始化canvas的元素），还有其他的元素，有的在这个div的上面，有的在下面。效果图是这样的：

酒盒那一栏是lufylegend做的，也就是放了个<div id="mylegend">，在手机上使用时发现鼠标事件只位于canvas上面一部分位置生效，其余部分不生效，据跟踪是LSprite的ismouseonShapes判断失效造成的，也就是可能e参数中offsetX和offsetY出错了。这位朋友把改元素的position改为absolute后，通过绝对定位解决了此问题。
感觉是lufylegend中事件部分考虑不周导致的。希望lufy改进改进

lufy

这个是我一直强调的问题了，引擎设计的时候是以canvas来考虑的，所以我才会推荐用iframe来做这种嵌入效果
这个也并不能算是主流问题，能用iframe或者absolute解决的话就先这样吧，以后有时间了会试着调整一下的

yorhomwang

lufy 发表于 2015-8-5 23:47
这个是我一直强调的问题了，引擎设计的时候是以canvas来考虑的，所以我才会推荐用iframe来做这种嵌入效果
...

可是iframe和主界面交互存在不方便之处。感觉以后可以加一个LGlobal.appMode属性，用这个属性来标识是否纯canvas模式或者有别的东西。赋予不同的值就对应相应的方案

lufy

yorhomwang 发表于 2015-8-6 00:36
可是iframe和主界面交互存在不方便之处。感觉以后可以加一个LGlobal.appMode属性，用这个属性来标识是否 ...

多谢建议
也不是说不准备解决
只是会优先考虑其他功能

yorhomwang

lufy 发表于 2015-8-6 12:20
多谢建议
也不是说不准备解决
只是会优先考虑其他功能

还有就是一个非常小的问题，源代码中LStageAlign.RIGHT = "Re";这里的Re中的e是不是多写了的？我看LStageAlign.LEFT = "L";都是一个字母。
（我实在是有点强迫症，格式不统一看上去真的很不舒服，还望lufy包含）

就这种静态属性而言，我觉得用字母来代替会不会容易发生重复？建议以后改为十六进制（或者其他进制）的数字，我看box2dweb就是这么做的

lufy

yorhomwang 发表于 2015-8-7 14:42
还有就是一个非常小的问题，源代码中LStageAlign.RIGHT = "Re";这里的Re中的e是不是多写了的？我看LStage ...

Re可能是写的时候不小心多了个e，不过这个倒没什么影响，因为实际用的时候，不需要关心它的值是什么，
这个任何开发规则都是一样的，类似于列举一样，不需要非得弄的十六进制或者弄个很长的字符串
常量的定义用什么类型都可以，数字也可以，整个项目中，可能多个地方使用到它，但是用的时候调用的是变量，而不是直接写它的值，所以只要定义不重复即可

yorhomwang

lufy 发表于 2015-8-7 20:05
Re可能是写的时候不小心多了个e，不过这个倒没什么影响，因为实际用的时候，不需要关心它的值是什么，
这 ...

我看了下前辈的LTimer代码，感觉写得太复杂了，我自己也写了个代码稍微短点的版本（遵照Adobe提供的as 3.0语法），放到这里，还望lufy考虑改进一下

1. LGlobal.timerList = new Array();
   
2. 
   
3. LGlobal.onShow = function () {
   
4.         if (LGlobal.canvas == null) {
   
5.                 return;
   
6.         }
   
7.         if(LGlobal._outStageCheckCount <= 0){
   
8.                 LGlobal._outStageCheckCount--;
   
9.                 if(LGlobal._outStageCheckCount < -2){
   
10.                         LGlobal.stage.dispatchEvent(new LEvent(LFocusEvent.FOCUS_OUT));
    
11.                         LGlobal._outStageCheckCount = 1;
    
12.                 }
    
13.         }
    
14.         if (LGlobal.fpsStatus) {
    
15.                 LGlobal.fpsStatus.reset();
    
16.         }
    
17.         if (LGlobal.timerList) {
    
18.                 LGlobal.updateTimers();
    
19.         }
    
20.         if (LGlobal.stage.onresizeEvent) {
    
21.                 LGlobal.stage.onresizeListener(LGlobal.stage.onresizeEvent);
    
22.                 delete LGlobal.stage.onresizeEvent;
    
23.         }
    
24.         if (LGlobal.forceRefresh) {
    
25.                 LGlobal.canvasObj.width = LGlobal.canvasObj.width;
    
26.                 LGlobal.forceRefresh = false;
    
27.         }
    
28.         LGlobal.canvas.beginPath();
    
29.         if (LGlobal.box2d != null) {
    
30.                 LGlobal.box2d.ll_show();
    
31.                 if (!LGlobal.traceDebug && LGlobal.keepClear) {
    
32.                         LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);
    
33.                 }
    
34.         } else {
    
35.                 if (LGlobal.keepClear) {
    
36.                         LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);
    
37.                 }
    
38.                 if (LGlobal.backgroundColor !== null) {
    
39.                         LGlobal.canvas.fillStyle = LGlobal.backgroundColor;
    
40.                         LGlobal.canvas.fillRect(0, 0, LGlobal.width, LGlobal.height);
    
41.                 }
    
42.         }
    
43.         LGlobal.show(LGlobal.childList);
    
44. };
    
45. 
    
46. LGlobal.updateTimers = function () {
    
47.         var list = LGlobal.timerList, l = list.length;
    
48. 
    
49.         if (list.length == 0) {
    
50.                 return;
    
51.         }
    
52. 
    
53.         for (var i = 0; i < l; i++) {
    
54.                 var timer = list[i];
    
55.                 timer.ll_update();
    
56.         }
    
57. };
    
58. 
    
59. var LTimer = (function () {
    
60.         function LTimer (delay, repeatCount) {
    
61.                 var s = this;
    
62.                 LExtends(s, LEventDispatcher, []);
    
63. 
    
64.                 s.type = "LTimer";
    
65.                 s.delay = delay || 0;
    
66.                 s.repeatCount = repeatCount || 0;
    
67.                 s.currentCount = 0;
    
68.                 s.running = false;
    
69.                 s.ll_indexInList = null;
    
70.                 s.ll_previousTime = null;
    
71.         }
    
72. 
    
73.         var p = {
    
74.                 start : function () {
    
75.                         var s = this;
    
76. 
    
77.                         if (s.running) {
    
78.                                 return;
    
79.                         }
    
80. 
    
81.                         s.running = true;
    
82.                         s.ll_previousTime = (new Date()).getTime();
    
83.                         s.ll_indexInList = LGlobal.timerList.length;
    
84. 
    
85.                         LGlobal.timerList.push(s);
    
86.                 },
    
87. 
    
88.                 stop : function () {
    
89.                         var s = this;
    
90. 
    
91.                         if (!s.running) {
    
92.                                 return;
    
93.                         }
    
94. 
    
95.                         s.running = false;
    
96. 
    
97.                         LGlobal.timerList.splice(s.ll_indexInList, 1);
    
98. 
    
99.                         s.ll_indexInList = null;
    
100.                 },
     
101. 
     
102.                 reset : function () {
     
103.                         var s = this;
     
104. 
     
105.                         s.currentCount = 0;
     
106.                         s.ll_previousTime = null;
     
107. 
     
108.                         s.stop();
     
109.                 },
     
110. 
     
111.                 ll_update : function () {
     
112.                         var s = this, currentTime = (new Date()).getTime();
     
113. 
     
114.                         if (currentTime - s.ll_previousTime >= s.delay) {
     
115.                                 s.ll_previousTime = currentTime;
     
116.                                 s.currentCount++;
     
117. 
     
118.                                 s.dispatchEvent(LTimerEvent.TIMER);
     
119. 
     
120.                                 if (s.currentCount == s.repeatCount) {
     
121.                                         s.stop();
     
122.                                         s.dispatchEvent(LTimerEvent.TIMER_COMPLETE);
     
123.                                 }
     
124.                         }
     
125.                 }
     
126.         };
     
127. 
     
128.         for (var k in p) {
     
129.                 LTimer.prototype[k] = p[k];
     
130.         }
     
131. 
     
132.         return LTimer;
     
133. })();

复制代码

1. var LTimerEvent = function () {throw "LTimerEvent cannot be instantiated";};
   
2. LTimerEvent.TIMER = "timer";
   
3. LTimerEvent.TIMER_COMPLETE = "timerComplete";

复制代码

就是有个疑问，我看文档上写的repeatCount默认是0，而您写的代码是无穷大，不知道到底哪个才是对的。

lufy

yorhomwang 发表于 2015-8-7 20:58
我看了下前辈的LTimer代码，感觉写得太复杂了，我自己也写了个代码稍微短点的版本（遵照Adobe提供的as 3. ...

你可能不明白我为什么要把LTimer的控制加到LGlobal.childList里面，
在lufylegend中，核心时间轴和核心列表都只有一个，新功能扩展后依然要维持此原则，才能保证引擎扩展后，条例依然清晰，才能不断的扩展其他新功能
你可能这次加了一个LGlobal.updateTimers();，之后有其他的扩展，你可能会再加另一个方法，每次的逻辑可能又不一样，这样或许每一次看起来都很简单，但是综合起来内部逻辑就不统一了，就破坏了良好的可维护性，可能会得不偿失

lufy

repeatCount默认是0没错，但是0的时候计时器将持续不断运行的，相当于无限大

xiaopang125

我关心群号多少，菜鸟让进不？