main.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. // 3d点坐标
  2. var r2x = [
  3. // 俯视面
  4. [-1.92, 0.034, 1.5],
  5. [-1.92, 0.284, 1.5],
  6. [-6.02, 0.284, 1.5],
  7. [-6.02, 3.934, 1.5],
  8. [2.53, 3.934, 1.5],
  9. [2.53, 1.684, 1.5],
  10. [3.13, 1.684, 1.5],
  11. [3.13, 0.584, 1.5],
  12. [2.23, 0.584, 1.5],
  13. [2.23, 0.034, 1.5],
  14. // 仰视面
  15. [-1.92, 0.034, -1.5],
  16. [-1.92, 0.284, -1.5],
  17. [-6.02, 0.284, -1.5],
  18. [-6.02, 3.934, -1.5],
  19. [2.53, 3.934, -1.5],
  20. [2.53, 1.684, -1.5],
  21. [3.13, 1.684, -1.5],
  22. [3.13, 0.584, -1.5],
  23. [2.23, 0.584, -1.5],
  24. [2.23, 0.034, -1.5]
  25. ];
  26. // 顶点索引
  27. var r10x = 10;
  28. var r3x = [
  29. [0, 1],
  30. [1, 2],
  31. [2, 3],
  32. [3, 4],
  33. [4, 5],
  34. [5, 6],
  35. [6, 7],
  36. [7, 8],
  37. [8, 9],
  38. [9, 0],
  39. [r10x + 0, r10x + 1],
  40. [r10x + 1, r10x + 2],
  41. [r10x + 2, r10x + 3],
  42. [r10x + 3, r10x + 4],
  43. [r10x + 4, r10x + 5],
  44. [r10x + 5, r10x + 6],
  45. [r10x + 6, r10x + 7],
  46. [r10x + 7, r10x + 8],
  47. [r10x + 8, r10x + 9],
  48. [r10x + 9, r10x + 0],
  49. [0, r10x + 0],
  50. [1, r10x + 1],
  51. [2, r10x + 2],
  52. [3, r10x + 3],
  53. [4, r10x + 4],
  54. [5, r10x + 5],
  55. [6, r10x + 6],
  56. [7, r10x + 7],
  57. [8, r10x + 8],
  58. [9, r10x + 9]
  59. ];
  60. // 线段
  61. var ret = [
  62. [],
  63. [],
  64. [],
  65. [],
  66. [],
  67. [],
  68. [],
  69. [],
  70. [],
  71. [],
  72. [],
  73. [],
  74. [],
  75. [],
  76. [],
  77. [],
  78. [],
  79. [],
  80. [],
  81. [],
  82. [],
  83. [],
  84. [],
  85. [],
  86. [],
  87. [],
  88. [],
  89. [],
  90. [],
  91. []
  92. ];
  93. var canvas = document.getElementById("myCanvas");
  94. var img = new Image();
  95. // var identity = numbers.matrix.identity(4);
  96. var accuracy = 0.02;
  97. // 缩放精度
  98. var scaleAccuracy = 0.05;
  99. var maxX = 0;
  100. var faceLineArr = [];
  101. var isScale = false;
  102. var scaleTime;
  103. var scaleTimeH;
  104. // 各个面的数组集合
  105. var faceArr = [
  106. [21, 11, 22, 1],
  107. [22, 12, 23, 2],
  108. [20, 10, 21, 0],
  109. [23, 13, 24, 3],
  110. // [24, 14, 15, 26, 5, 4],
  111. // [26, 16, 27, 6],
  112. // [27, 17, 28, 7],
  113. [28, 18, 29, 8],
  114. [29, 19, 20, 9],
  115. // [19, 18, 17, 16, 15, 25, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 14, 13, 12, 11, 10],
  116. // [25, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4],
  117. // [5, 6, 7, 8, 9, 0, 1, 2, 3, 4]
  118. ];
  119. var verticalLine=[]
  120. var selectArray;
  121. var selectArr;
  122. var selectArrIdx;
  123. var rx1 = _3dLine(r2x, r3x, ret);
  124. img.onload = function() {
  125. draw();
  126. };
  127. img.src = "./img/panorama_demo.input.jpg";
  128. function draw() {
  129. var w = img.width / 6;
  130. var h = img.height / 6;
  131. var deltaFactor = 1;
  132. var distance = 0;
  133. canvas.width = w;
  134. canvas.height = h;
  135. scaleTime = w;
  136. scaleTimeH = h;
  137. var context = canvas.getContext("2d");
  138. context.strokeStyle = "#ff0000";
  139. context.lineWidth = w / 250;
  140. // 生成3d格式数据
  141. fix3dLineArr(rx1,faceArr)
  142. var lineArr = _3dTo2d(
  143. make_matrix_from_quat([
  144. 0.008515,
  145. -0.014279,
  146. 0.016179,
  147. 0.999731,
  148. -5.438891,
  149. 2.167653,
  150. 0.165233
  151. ]),
  152. rx1,
  153. 0.1
  154. )['drawArr'];
  155. $("#myCanvas").click(function(e) {
  156. // 获取当前的坐标点
  157. var current = [e.offsetX, e.offsetY];
  158. // 计算当前坐标点到墙面中心店的距离
  159. // selectArr = selectWhichFace(lineArr,faceArr);
  160. selectArray = selectWhichFace(
  161. lineArr,
  162. faceArr,
  163. current,
  164. scaleTime,
  165. scaleTimeH
  166. );
  167. selectArr = selectArray["arr"];
  168. selectArrIdx = faceArr[selectArray["id"]];
  169. // selectArr = [lineArr[1],lineArr[22],lineArr[11],lineArr[21]]
  170. // 判断当前点在墙面之内时,选中改墙体区域
  171. if (isInFace(current, selectArr, scaleTime, scaleTimeH)) {
  172. // if (true) {
  173. isScale = true;
  174. // 选中的墙进行画线
  175. selectDragLine(context, w, h, scaleTime, scaleTimeH, lineArr, selectArr);
  176. } else {
  177. // 未选中墙体时还原线段
  178. context.strokeStyle = "#ff0000";
  179. drawSingleLine(context, w, h, scaleTime, scaleTimeH, lineArr, true);
  180. isScale = false;
  181. }
  182. });
  183. $("#myCanvas").mousewheel(function(e) {
  184. (function() {
  185. if (isScale) {
  186. distance = deltaFactor * e.deltaY * scaleAccuracy;
  187. lineArr = updateLineArr(distance, lineArr, r2x, selectArray["id"]);
  188. selectArrIdx = faceArr[selectArray["id"]];
  189. selectArr = updateSelectArr(lineArr, selectArrIdx);
  190. selectDragLine(
  191. context,
  192. w,
  193. h,
  194. scaleTime,
  195. scaleTimeH,
  196. lineArr,
  197. selectArr
  198. );
  199. }
  200. })();
  201. });
  202. // 监听键盘按下时间 (上键为放大,下键为缩小)
  203. $("body").keydown(function(e) {
  204. if (isScale) {
  205. if (e.keyCode == 38) {
  206. distance = deltaFactor * 1 * scaleAccuracy;
  207. lineArr = updateLineArr(distance, lineArr, r2x, selectArray["id"]);
  208. selectArrIdx = faceArr[selectArray["id"]];
  209. selectArr = updateSelectArr(lineArr, selectArrIdx);
  210. selectDragLine(
  211. context,
  212. w,
  213. h,
  214. scaleTime,
  215. scaleTimeH,
  216. lineArr,
  217. selectArr
  218. );
  219. } else if (e.keyCode == 40) {
  220. distance = deltaFactor * -1 * scaleAccuracy;
  221. lineArr = updateLineArr(distance, lineArr, r2x, selectArray["id"]);
  222. selectArrIdx = faceArr[selectArray["id"]];
  223. selectArr = updateSelectArr(lineArr, selectArrIdx);
  224. selectDragLine(
  225. context,
  226. w,
  227. h,
  228. scaleTime,
  229. scaleTimeH,
  230. lineArr,
  231. selectArr
  232. );
  233. }
  234. }
  235. });
  236. drawSingleLine(context, w, h, scaleTime, scaleTimeH, lineArr, true);
  237. }