Skip to content

Commit a0bc741

Browse files
author
SeanLin
committed
Merge pull request cocos2d#810 from wedteam/EGLView+designResolutionSize
Fixed the touch pointer location when reset the designResolutionSize
2 parents f67926f + 32e863b commit a0bc741

File tree

2 files changed

+118
-59
lines changed

2 files changed

+118
-59
lines changed

cocos2d/platform/CCEGLView.js

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
6868
initialize:function () {
6969
this._initialize = true;
7070
this._adjustSize();
71+
this._contentTranslateLeftTop = {left: 0, top: 0};
7172

7273
var adjustSize = this._adjustSize.bind(this);
7374
window.addEventListener('resize', adjustSize, false);
@@ -134,6 +135,28 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
134135
return true;
135136
},
136137

138+
/**
139+
* <p>
140+
* The resolution translate on EGLView
141+
* </p>
142+
* @param {Number} translateX
143+
* @param {Number} translateY
144+
*/
145+
setContentTranslateLeftTop: function(offsetLeft, offsetTop){
146+
this._contentTranslateLeftTop = {left : offsetLeft, top : offsetTop};
147+
},
148+
149+
/**
150+
* <p>
151+
* get the resolution translate on EGLView
152+
* </p>
153+
* @param {Number} translateX
154+
* @param {Number} translateY
155+
*/
156+
getContentTranslateLeftTop: function(){
157+
return this._contentTranslateLeftTop;
158+
},
159+
137160
/**
138161
* Get the frame size of EGL view.
139162
* In general, it returns the screen size since the EGL view is a fullscreen view.
@@ -173,7 +196,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
173196
return cc.p(0, 0);
174197
}
175198
},
176-
199+
canSetContentScaleFactor:function() {
200+
return true;
201+
},
177202
/**
178203
* Set the design resolution size.
179204
* @param {Number} width Design resolution width.
@@ -223,14 +248,10 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
223248
diretor._winSizeInPoints = this.getDesignResolutionSize();
224249

225250
if (cc.renderContextType == cc.CANVAS) {
226-
var width, height;
251+
var width = 0, height = 0;
227252
switch (this._resolutionPolicy) {
228253
case cc.RESOLUTION_POLICY.EXACTFIT:
229-
width = 0;
230-
height = 0;
231254
case cc.RESOLUTION_POLICY.NOBORDER:
232-
width = 0;
233-
height = 0;
234255
case cc.RESOLUTION_POLICY.SHOW_ALL:
235256
width = (this._screenSize.width - viewPortW) / 2;
236257
height = -(this._screenSize.height - viewPortH) / 2;
@@ -242,6 +263,9 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
242263
}
243264
cc.renderContext.translate(width, height);
244265
cc.renderContext.scale(this._scaleX, this._scaleY);
266+
267+
diretor.setContentScaleFactor(this._scaleX);
268+
this.setContentTranslateLeftTop(width, height);
245269
}
246270
//diretor.setGLDefaultValues();
247271
},
@@ -320,7 +344,18 @@ cc.EGLView = cc.Class.extend(/** @lends cc.EGLView# */{
320344
getScaleY:function () {
321345
return this._scaleY;
322346
},
347+
348+
/**
349+
* Get the real location in view
350+
*/
351+
convertToLocationInView: function(tx, ty, relatedPos){
352+
var pos = this.getContentTranslateLeftTop();
323353

354+
var x = (pos.left + tx - relatedPos.left) / cc.Director.getInstance().getContentScaleFactor();
355+
var y = (pos.top + relatedPos.height - (ty - relatedPos.top)) / cc.Director.getInstance().getContentScaleFactor();
356+
357+
return {x: x, y: y};
358+
},
324359

325360
/**
326361
* Touch events are handled by default; if you want to customize your handlers, please override these functions:

cocos2d/touch_dispatcher/CCTouchDispatcher.js

Lines changed: 77 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -629,19 +629,19 @@ cc.ProcessMouseupEvent = function (element, event) {
629629
ty = event.clientY;
630630
}
631631

632-
var mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
633-
var mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
632+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
634633

635-
var touch = new cc.Touch(mouseX, mouseY);
634+
var touch = new cc.Touch(location.x, location.y);
636635
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
637-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
638-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
636+
cc.TouchDispatcher.preTouchPoint.x = location.x;
637+
cc.TouchDispatcher.preTouchPoint.y = location.y;
639638

640639
var posArr = [];
641640
posArr.push(touch);
642641
//csx cc.Director.getInstance().getTouchDispatcher().touchesEnded(posArr, null);
643642
cc.EGLView.getInstance().touchesEnded(posArr, null);
644643
};
644+
645645
/**
646646
* @param {HTMLCanvasElement|HTMLDivElement} element
647647
*/
@@ -670,13 +670,11 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
670670
}
671671

672672
if (!cc.rectContainsPoint(new cc.Rect(pos.left, pos.top, pos.width, pos.height), cc.p(tx, ty))) {
673-
var mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
674-
var mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
675-
676-
var touch = new cc.Touch(mouseX, mouseY);
673+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
674+
var touch = new cc.Touch(location.x, location.y);
677675
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
678-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
679-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
676+
cc.TouchDispatcher.preTouchPoint.x = location.x;
677+
cc.TouchDispatcher.preTouchPoint.y = location.y;
680678

681679
var posArr = [];
682680
posArr.push(touch);
@@ -700,13 +698,11 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
700698
ty = event.clientY;
701699
}
702700

703-
var mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
704-
var mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
705-
706-
var touch = new cc.Touch(mouseX, mouseY);
701+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
702+
var touch = new cc.Touch(location.x, location.y);
707703
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
708-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
709-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
704+
cc.TouchDispatcher.preTouchPoint.x = location.x;
705+
cc.TouchDispatcher.preTouchPoint.y = location.y;
710706

711707
var posArr = [];
712708
posArr.push(touch);
@@ -732,25 +728,57 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
732728
ty = event.clientY;
733729
}
734730

735-
var mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
736-
var mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
737-
738-
var touch = new cc.Touch(mouseX, mouseY);
739-
731+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
732+
var touch = new cc.Touch(location.x, location.y);
740733
//TODO this feature only chrome support
741734
//if((event.button == 0) && (event.which == 1))
742735
// touch._setPressed(true);
743736
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
744-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
745-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
737+
cc.TouchDispatcher.preTouchPoint.x = location.x;
738+
cc.TouchDispatcher.preTouchPoint.y = location.y;
746739

747740
var posArr = [];
748741
posArr.push(touch);
749742

750743
//csx cc.Director.getInstance().getTouchDispatcher().touchesMoved(posArr, null);
751744
cc.EGLView.getInstance().touchesMoved(posArr, null);
752745
});
753-
} else {
746+
}
747+
else if(window.navigator.msPointerEnabled){
748+
var _pointerEventsMap = {
749+
"MSPointerDown" : "touchesBegan",
750+
"MSPointerMove" : "touchesMoved",
751+
"MSPointerUp" : "touchesEnded",
752+
"MSPointerCancel" : "touchesCancelled"
753+
};
754+
755+
for(var i in _pointerEventsMap){
756+
(function(_pointerEvent, _touchEvent){
757+
element.addEventListener(_pointerEvent, function (event){
758+
var pos = cc.getHTMLElementPosition(element);
759+
760+
pos.left -= document.body.scrollLeft;
761+
pos.top -= document.body.scrollTop;
762+
763+
var tx, ty, touch, preLocation;
764+
tx = event.clientX;
765+
ty = event.clientY;
766+
767+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
768+
var touch = new cc.Touch(location.x, location.y);
769+
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
770+
cc.TouchDispatcher.preTouchPoint.x = location.x;
771+
cc.TouchDispatcher.preTouchPoint.y = location.y;
772+
773+
cc.Director.getInstance().getTouchDispatcher()[_touchEvent]([touch], null);
774+
event.stopPropagation();
775+
event.preventDefault();
776+
}, false);
777+
})(i, _pointerEventsMap[i]);
778+
}
779+
}
780+
else {
781+
754782
//register canvas touch event
755783
element.addEventListener("touchstart", function (event) {
756784
if (!event.changedTouches) return;
@@ -761,7 +789,7 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
761789
pos.left -= document.body.scrollLeft;
762790
pos.top -= document.body.scrollTop;
763791

764-
var touch_event, tx, ty, mouseX, mouseY, touch, preLocation;
792+
var touch_event, tx, ty, touch, preLocation;
765793
var length = event.changedTouches.length;
766794
for (var i = 0; i < length; i++) {
767795
touch_event = event.changedTouches[i];
@@ -771,21 +799,20 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
771799
tx = touch_event.clientX;
772800
ty = touch_event.clientY;
773801

774-
mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
775-
mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
802+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
776803
touch = null;
777804
if (touch_event.hasOwnProperty("identifier")) {
778-
touch = new cc.Touch(mouseX, mouseY, touch_event.identifier);
805+
touch = new cc.Touch(location.x, location.y, touch_event.identifier);
779806
//use Touch Pool
780807
preLocation = cc.TouchDispatcher._getPreTouch(touch).getLocation();
781808
touch._setPrevPoint(preLocation.x, preLocation.y);
782809
cc.TouchDispatcher._setPreTouch(touch);
783810
} else {
784-
touch = new cc.Touch(mouseX, mouseY);
811+
touch = new cc.Touch(location.x, location.y);
785812
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
786813
}
787-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
788-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
814+
cc.TouchDispatcher.preTouchPoint.x = location.x;
815+
cc.TouchDispatcher.preTouchPoint.y = location.y;
789816

790817
posArr.push(touch);
791818
}
@@ -805,7 +832,7 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
805832
pos.left -= document.body.scrollLeft;
806833
pos.top -= document.body.scrollTop;
807834

808-
var touch_event, tx, ty, mouseX, mouseY, touch, preLocation;
835+
var touch_event, tx, ty, touch, preLocation;
809836
var length = event.changedTouches.length;
810837
for (var i = 0; i < length; i++) {
811838
touch_event = event.changedTouches[i];
@@ -815,22 +842,21 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
815842
tx = touch_event.clientX;
816843
ty = touch_event.clientY;
817844

818-
mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
819-
mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
845+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
820846

821847
touch = null;
822848
if (touch_event.hasOwnProperty("identifier")) {
823-
touch = new cc.Touch(mouseX, mouseY, touch_event.identifier);
849+
touch = new cc.Touch(location.x, location.y, touch_event.identifier);
824850
//use Touch Pool
825851
preLocation = cc.TouchDispatcher._getPreTouch(touch).getLocation();
826852
touch._setPrevPoint(preLocation.x, preLocation.y);
827853
cc.TouchDispatcher._setPreTouch(touch);
828854
} else {
829-
touch = new cc.Touch(mouseX, mouseY);
855+
touch = new cc.Touch(location.x, location.y);
830856
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
831857
}
832-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
833-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
858+
cc.TouchDispatcher.preTouchPoint.x = location.x;
859+
cc.TouchDispatcher.preTouchPoint.y = location.y;
834860

835861
posArr.push(touch);
836862
}
@@ -850,7 +876,7 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
850876
pos.left -= document.body.scrollLeft;
851877
pos.top -= document.body.scrollTop;
852878

853-
var touch_event, tx, ty, mouseX, mouseY, touch, preLocation;
879+
var touch_event, tx, ty, touch, preLocation;
854880
var length = event.changedTouches.length;
855881
for (var i = 0; i < length; i++) {
856882
touch_event = event.changedTouches[i];
@@ -860,22 +886,21 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
860886
tx = touch_event.clientX;
861887
ty = touch_event.clientY;
862888

863-
mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
864-
mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
889+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
865890

866891
touch = null;
867892
if (touch_event.hasOwnProperty("identifier")) {
868-
touch = new cc.Touch(mouseX, mouseY, touch_event.identifier);
893+
touch = new cc.Touch(location.x, location.y, touch_event.identifier);
869894
//use Touch Pool
870895
preLocation = cc.TouchDispatcher._getPreTouch(touch).getLocation();
871896
touch._setPrevPoint(preLocation.x, preLocation.y);
872897
cc.TouchDispatcher._deletePreTouchWithSameId(touch);
873898
} else {
874-
touch = new cc.Touch(mouseX, mouseY);
899+
touch = new cc.Touch(location.x, location.y);
875900
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
876901
}
877-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
878-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
902+
cc.TouchDispatcher.preTouchPoint.x = location.x;
903+
cc.TouchDispatcher.preTouchPoint.y = location.y;
879904

880905
posArr.push(touch);
881906
}
@@ -895,7 +920,7 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
895920
pos.left -= document.body.scrollLeft;
896921
pos.top -= document.body.scrollTop;
897922

898-
var touch_event, tx, ty, mouseX, mouseY, touch, preLocation;
923+
var touch_event, tx, ty, touch, preLocation;
899924
var length = event.changedTouches.length;
900925
for (var i = 0; i < length; i++) {
901926
touch_event = event.changedTouches[i];
@@ -905,22 +930,21 @@ cc.TouchDispatcher.registerHtmlElementEvent = function (element) {
905930
tx = touch_event.clientX;
906931
ty = touch_event.clientY;
907932

908-
mouseX = (tx - pos.left) / cc.Director.getInstance().getContentScaleFactor();
909-
mouseY = (pos.height - (ty - pos.top)) / cc.Director.getInstance().getContentScaleFactor();
933+
var location = cc.EGLView.getInstance().convertToLocationInView(tx, ty, pos);
910934

911935
touch = null;
912936
if (touch_event.hasOwnProperty("identifier")) {
913-
touch = new cc.Touch(mouseX, mouseY, touch_event.identifier);
937+
touch = new cc.Touch(location.x, location.y, touch_event.identifier);
914938
//use Touch Pool
915939
preLocation = cc.TouchDispatcher._getPreTouch(touch).getLocation();
916940
touch._setPrevPoint(preLocation.x, preLocation.y);
917941
cc.TouchDispatcher._deletePreTouchWithSameId(touch);
918942
} else {
919-
touch = new cc.Touch(mouseX, mouseY);
943+
touch = new cc.Touch(location.x, location.y);
920944
touch._setPrevPoint(cc.TouchDispatcher.preTouchPoint.x, cc.TouchDispatcher.preTouchPoint.y);
921945
}
922-
cc.TouchDispatcher.preTouchPoint.x = mouseX;
923-
cc.TouchDispatcher.preTouchPoint.y = mouseY;
946+
cc.TouchDispatcher.preTouchPoint.x = location.x;
947+
cc.TouchDispatcher.preTouchPoint.y = location.y;
924948

925949
posArr.push(touch);
926950
}

0 commit comments

Comments
 (0)