function5.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. function FingerComponent(obj_list,sync_obj){
  2. this.TRANSFORM_PREFIXED = this.getVendorPrefixed(["transform", "msTransform", "MozTransform", "webkitTransform", "OTransform"]);
  3. this.boxList = [];
  4. this.flag=false;
  5. var temp = this.assignBox(sync_obj);
  6. this.boxList.push(temp);
  7. for(var i = 0,objId;objId=obj_list[i];i++){
  8. temp = this.assignBox(objId);
  9. this.boxList.push(temp);
  10. this.listen(temp);
  11. }
  12. var _this=this;
  13. var loop=function(){
  14. for(var i=0; i<_this.boxList.length; i++) {
  15. _this.transform(_this.boxList[i]);
  16. }
  17. requestAnimationFrame(loop);
  18. };
  19. loop();
  20. }
  21. function nextPage(code,num){
  22. saveRecord(code);
  23. setTimeout(1500,location.replace(num+'.php'));
  24. }
  25. function dragPic(){
  26. dragTime = Math.floor(Date.now() / 1000);
  27. }
  28. FingerComponent.prototype.checkRes=function() {
  29. check.style.display = "inline";
  30. //check.style.top = 600;
  31. //check.style.left = 650;
  32. saveRecord(250);
  33. var arrow=this.boxList[0];
  34. var degx=Math.abs(arrow.degx);
  35. var degy=Math.abs(arrow.degy);
  36. var x=degx>=130 && degx<=230;
  37. var y=degy>=140 && degy<=220;
  38. //confirm(degx);
  39. //confirm(degy);
  40. saveRecordr(0,degx,0,0,0);
  41. saveRecordr(0,0,degy,0,0);
  42. return x && y;
  43. }
  44. FingerComponent.prototype.assignBox=function(picS) {
  45. var pic = document.getElementById(picS);
  46. //console.log(pic);
  47. return {
  48. element: pic,
  49. isUpdated: true,
  50. x: 0,
  51. y: 0,
  52. rad: 0,
  53. scale: 1,
  54. rafId: 0,
  55. zIndex: 0,
  56. degx: 0,
  57. degy: 0
  58. }
  59. }
  60. FingerComponent.prototype.listen=function(pBoxO) {
  61. var finger = new Fingers(pBoxO.element);
  62. var flag=false;
  63. var _this=this;
  64. /*finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {
  65. if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
  66. //pBoxO.x += pFingers[0].getDeltaX();
  67. //pBoxO.y += pFingers[0].getDeltaY();
  68. var x=pFingers[0].getDeltaX();
  69. var y=pFingers[0].getDeltaY();
  70. //console.log("X:"+x+" Y:"+y);
  71. var temp=pBoxO.rad+y/3;
  72. if(temp>=-73 && temp<=17)
  73. pBoxO.rad = temp;//(y/100);
  74. pBoxO.isUpdated = true;
  75. }
  76. else if(pEventType === Fingers.Gesture.EVENT_TYPE.start) {
  77. //topZIndex++;
  78. //pBoxO.zIndex = topZIndex;
  79. //pBoxO.isUpdated = true;
  80. }
  81. });*/
  82. /*finger.addGesture(Fingers.gesture.Hold, { nbFingers: 1}).addHandler(function(pEventType,pData){
  83. if(pEventType === Fingers.Gesture.EVENT_TYPE.instant)
  84. flag = true ;
  85. });*/
  86. finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {
  87. if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
  88. for(var i=0,obj; obj=_this.boxList[i]; i++) {
  89. obj.degx += pFingers[0].getDeltaY() ;
  90. if(obj.degx>=360)
  91. obj.degx-=360;
  92. else if(obj.degx<=-360)
  93. obj.degx+=360;
  94. obj.degy += pFingers[0].getDeltaX() ;
  95. if(obj.degy>=360)
  96. obj.degy-=360;
  97. else if(obj.degy<=-360)
  98. obj.degy+=360;
  99. //pBoxO.isUpdated = true;
  100. //obj.zIndex = -1;
  101. //obj.rad += pData.deltaRotation;
  102. //obj.scale += pData.deltaScale;
  103. obj.isUpdated = true;
  104. }
  105. }
  106. });
  107. finger.addGesture(Fingers.gesture.Transform, null).addHandler(function(pEventType, pData, pFingers) {
  108. if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
  109. for(var i=0,obj; obj=_this.boxList[i]; i++) {
  110. obj.rad += pData.deltaRotation;
  111. //obj.scale += pData.deltaScale;
  112. obj.scale = Math.max(0.5, Math.min(2, obj.scale * pData.deltaScale));
  113. obj.isUpdated = true;
  114. if (obj.scale>1)
  115. {
  116. saveRecordr(301,0,0,0,obj.scale);
  117. }
  118. if(obj.scale < 1)
  119. {
  120. saveRecordr(302,0,0,0,obj.scale);
  121. }
  122. }
  123. }
  124. });
  125. pBoxO.fingers = finger ;
  126. }
  127. FingerComponent.prototype.transform=function(pBoxO) {
  128. if(pBoxO.isUpdated) {
  129. pBoxO.element.style[this.TRANSFORM_PREFIXED] = "translateZ(0) " +
  130. "translate(" + pBoxO.x + "px, " + pBoxO.y + "px) " +
  131. "scale(" + pBoxO.scale + ") " +//+ "rotate3d(0,0,0," + pBoxO.rad + "rad) ";
  132. "rotate(" + pBoxO.rad + "rad) "+
  133. "rotateY("+pBoxO.degy+"deg)" +
  134. "rotateX("+pBoxO.degx+"deg)";
  135. pBoxO.element.style.zIndex = pBoxO.zIndex;
  136. pBoxO.isUpdated = false;
  137. }
  138. }
  139. FingerComponent.prototype.loop=function(){
  140. var x=this.loop();
  141. for(var i=0; i<this.boxList.length; i++) {
  142. this.transform(this.boxList[i]);
  143. }
  144. requestAnimationFrame(x);
  145. }
  146. FingerComponent.prototype.getVendorPrefixed=function(pArrayOfPrefixes) {
  147. var result = null;
  148. for (var i=0; i<pArrayOfPrefixes.length; i++) {
  149. if (document.body.style[pArrayOfPrefixes[i]] !== undefined) {
  150. result = pArrayOfPrefixes[i];
  151. break;
  152. }
  153. }
  154. return result;
  155. }
  156. function saveRecord(code){
  157. xmlhttp = new XMLHttpRequest();
  158. xmlhttp.onreadystatechange = function() {
  159. if (xmlhttp.readyState==4) {
  160. if(xmlhttp.status==200) {
  161. xmlhttp.abort();
  162. }
  163. }
  164. };
  165. xmlhttp.open("POST","saveRecord.php",true);
  166. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  167. xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000));
  168. }
  169. function saveRecords(code,time){
  170. xmlhttp = new XMLHttpRequest();
  171. xmlhttp.onreadystatechange = function() {
  172. if (xmlhttp.readyState==4) {
  173. if(xmlhttp.status==200) {
  174. xmlhttp.abort();
  175. }
  176. }
  177. };
  178. xmlhttp.open("POST","saveRecord.php",true);
  179. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  180. xmlhttp.send("codenum=" + code + "&dragtime=" + time);
  181. }
  182. function saveRecordr(code,rotX,rotY,rotZ,rotS){
  183. xmlhttp = new XMLHttpRequest();
  184. xmlhttp.onreadystatechange = function() {
  185. if (xmlhttp.readyState==4) {
  186. if(xmlhttp.status==200) {
  187. xmlhttp.abort();
  188. }
  189. }
  190. };
  191. xmlhttp.open("POST","saveRecord.php",true);
  192. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  193. xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);
  194. }