index.html 54 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>四维时代</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  8. <link rel="stylesheet" href="css/wanaplan.min.css" />
  9. <style>
  10. .notFound {
  11. text-align:center;
  12. font-size:18px;
  13. width:100%;
  14. margin-top:100px;
  15. margin-left: 50px;
  16. }
  17. div.planItem {
  18. cursor : pointer;
  19. background:#fafafa;
  20. margin:10px;
  21. border:1px solid #CCC;
  22. position: relative;
  23. }
  24. div.planItem img {
  25. width:288px
  26. }
  27. div.planItem p {
  28. border-top:1px solid #CCC;
  29. padding: 5px;
  30. margin: 0px;
  31. color: #333;
  32. background: #FFF;
  33. }
  34. div.planItem div.toolbarPlan {
  35. display: none;
  36. background: #CCC;
  37. position: absolute;
  38. right: 0px;
  39. top: 0px;
  40. color: #222;
  41. opacity: 0.9;
  42. z-index: 9999;
  43. }
  44. div.planItem div.toolbarPlan .fa {
  45. padding: 5px;
  46. }
  47. div.planItem div.toolbarPlan .fa-times {
  48. padding-left: 15px;
  49. }
  50. div.planItem:hover div.toolbarPlan {
  51. display: block;
  52. }
  53. div.planItem div.overall{
  54. background: #222;
  55. opacity: 0.8;
  56. width:100%;
  57. height:100%;
  58. color:#FFF;
  59. top: 0px;
  60. position:absolute;
  61. text-align:center;
  62. vertical-align:middle;
  63. }
  64. div.planItem div.editForm{
  65. width:100%;
  66. height:100%;
  67. color:#FFF;
  68. top: 60px;
  69. position:absolute;
  70. text-align:center;
  71. vertical-align:middle;
  72. }
  73. div.planItem .editPlanInput{
  74. height:30px;
  75. width:90%;
  76. font-size: 15px;
  77. border: 1px solid #999;
  78. }
  79. div.planItem div.overall span{
  80. font-size:16px;
  81. }
  82. div.planItem .overall-cercle{
  83. opacity: 1;
  84. padding-left: 0;
  85. padding-right: 0;
  86. margin-left: auto;
  87. margin-right: auto;
  88. bottom: 25px;
  89. width:100%;
  90. position:absolute;
  91. }
  92. div.planItem div.editForm .window-action-bar{
  93. margin-top:10px;
  94. text-align: right;
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <img src='images/pattern.png' style='display:none' id='imgWall' />
  100. <img src='images/pattern_tmp.png' style='display:none' id='imgTempWall' />
  101. <img src='images/grid2.jpg' style='display:none' id='img' />
  102. <div id="subMenuContainer">
  103. <div id="subMenu">
  104. <ul id="subMenuList">
  105. <li class="menu-item hidden" id="lock-icon"><span class="menu-icon"><i class="fa fa-unlock"></i></span><span class="menu-title">锁/解锁</span></li>
  106. <!--
  107. <li class="menu-item" id="item25"><span class="menu-icon"><i class="fa fa-reply"></i></span><span class="menu-title">Undo</span></li>
  108. <li class="menu-item" id="item26"><span class="menu-icon"><i class="fa fa-share"></i></span><span class="menu-title">Redo</span></li>
  109. -->
  110. <li class="menu-item hidden" id="transparencyButton"><span class="menu-icon"><img src="images/icon-transparency.png" /></span><span
  111. class="menu-title">墙体透明</span></li>
  112. <li class="menu-item" id="toolbarScreenshot"><span class="menu-icon"><i class="fa fa-camera"></i></span><span class="menu-title">拍照</span></li>
  113. <li class="menu-item" id="fullscreen-btn"><span class="menu-icon"><i class="fa fa-arrows-alt"></i></span><span
  114. class="menu-title">全屏</span></li>
  115. </ul>
  116. </div>
  117. </div>
  118. <section id="main-ui" class="show">
  119. <div id="toolbar">
  120. <div id="toolbar-bar">
  121. <ul id="toolbarMenu">
  122. <li class="menu-item" id="toolbarNew"><span class="menu-icon"><i class="fa fa-file"></i></span><span class="menu-title">新建</span></li>
  123. <li class="menu-item" id="toolbarSave"><span class="menu-icon"><img src="images/save_icon.png" /></span><span
  124. class="menu-title">保存</span></li>
  125. <li class="menu-item menu-subitem" id="toolbarOption"><span class="menu-icon"><i class="fa fa-cog"></i></span><span
  126. class="menu-title">配置</span>
  127. <ul class="undefined">
  128. <li class="menu-item" id="item27"><span class="menu-title">Increase performances</span></li>
  129. <li class="menu-item" id="2D-options"><span class="menu-title">2D options</span></li>
  130. <li class="menu-item" id="toolbarChangeLanguage"><span class="menu-title">Change language</span></li>
  131. <li class="menu-item" id="item19"><span class="menu-title">
  132. <hr /></span></li>
  133. <li class="menu-item" id="toolbarAbout"><span class="menu-title">About Wanaplan</span></li>
  134. </ul>
  135. </li>
  136. <li class="menu-item menu-subitem" id="userOption"><span class="menu-icon"><i class="fa fa-user"></i></span><span
  137. class="menu-title">用户</span>
  138. <ul class="undefined">
  139. <li class="menu-item" id="user"><span class="menu-title">login</span></li>
  140. </ul>
  141. </li>
  142. </ul>
  143. </div>
  144. </div>
  145. <section id="mainMenu">
  146. <div id="mainMenuTabsContainer">
  147. <ul id="mainMenuTabs">
  148. <li class="menu-item label-2D selected" id="draw2D"><span class="menu-icon"><img src="images/dessiner.png" /></span><span
  149. class="menu-title">设计</span></li>
  150. <li class="menu-item label-3D" id="furnishing3D"><span class="menu-icon"><img src="images/meubler.png" /></span><span
  151. class="menu-title">家具</span></li>
  152. <li class="menu-item label-3D" id="decorate3D"><span class="menu-icon"><img src="images/decorer.png" /></span><span
  153. class="menu-title">装修</span></li>
  154. </ul>
  155. </div>
  156. <h3 id="mainMenuTitle">绘图</h3>
  157. <div id="mainMenuContent">
  158. <ul id="mainMenuContentList" class="mainList layout-list">
  159. </ul>
  160. </div>
  161. </section>
  162. </section>
  163. <!-- Splashscreen -->
  164. <div style="display: none;" id="splashscreen">
  165. <div id="custom-splash" style="display:none" class="splash-text">
  166. <img src="images/3D.png" style="width:50px;vertical-align:-20px;" /> Kazaplan
  167. <div class="splash-bar">
  168. <div style="animation-duration: 1s;" class="splash-bar-inner"></div>
  169. </div>
  170. <a style="color:black;display:block;text-decoration:none;margin:20px 0 0 0;text-align:right;font-size:14px" href="http://www.wanadev.com">
  171. by <span style="color:#07656D">Wana</span><span style="color:black">dev</span> </a>
  172. </div>
  173. <div id="stock-splash" style="display: block;" class="splash-text">
  174. <img src="images/wanaplan-logo.png" style="width:50px;vertical-align:-15px;" /> Wanaplan
  175. <div class="splash-bar">
  176. <div style="animation-duration: 1s;" class="splash-bar-inner"></div>
  177. </div>
  178. </div>
  179. </div>
  180. <!-- Screenshot Flash -->
  181. <div style="display: none;" id="screenshot-flash"></div>
  182. <!-- Help Bubble -->
  183. <div id="helpbubble" class="">
  184. <div id="helpbubble-close" class="close"></div>
  185. <div class="wrapper">
  186. <div class="image">
  187. <img src="" alt="" id="helpbubble-image" />
  188. </div>
  189. <div id="helpbubble-content" class="content"></div>
  190. </div>
  191. </div>
  192. <!-- Debug view -->
  193. <div id="debugArea"></div>
  194. <!-- Plan2D Area -->
  195. <div style="display:block;z-index: -10;" class="drawableSurface with-menu" id="container2d">
  196. <canvas height="413" width="1180" id="backgroundcanvas2d" style="position: absolute; z-index: 0"></canvas>
  197. <canvas height="413" width="1180" id="selectcanvas2d" style="position: absolute; z-index: 2"></canvas>
  198. <canvas height="413" width="1180" id="dynamiccanvas2d" style="position: absolute; z-index: 1 ; opacity: 1;"></canvas>
  199. </div>
  200. <!-- Plan3D Area -->
  201. <div style="display:none" class="drawableSurface with-menu" id="container3d">
  202. <canvas height="413" width="1180" id="canvas3d"></canvas>
  203. </div>
  204. <div id="waiter" class="hidden">
  205. Computing, please wait...
  206. </div>
  207. <section id="modalWidgets">
  208. <div class="window window-with-button" id="aboutWindow" style="display: none; position: absolute; top: 96.5px; left: 476.5px;">
  209. <header class="window-title">
  210. <span class="window-close">
  211. </span>
  212. <h1>关于四维时代</h1>
  213. </header>
  214. <div class="window-content">
  215. <div class="tabbed horizontal">
  216. <ul class="tabbed-tabs">
  217. <li rel="tab-0" class="active">
  218. <span class="tab-text">关于</span>
  219. </li>
  220. <li rel="tab-1" class="">
  221. <span class="tab-text">Credits</span>
  222. </li>
  223. </ul>
  224. <div class="tabbed-tabcontent">
  225. <section class="tab-content-0 active">
  226. <div style="width: 432px; text-align: center;">
  227. <img src="./images/wanaplan-logo.png" alt="Wanaplan">
  228. </div>
  229. <div style="text-align: center; font-size: 16pt; font-weight: bold; margin-top: 15px; color: #333;">四维时代家具展示</div>
  230. <div style="text-align: center; margin-top: 30px; color: #555;">版权归四维时代所有
  231. </div>
  232. <div style="text-align: center; margin-top: 10px;">
  233. <a href="http://www.4dage.com/" target="_blank">www.4dage.com</a>
  234. </div>
  235. </section>
  236. <section class="tab-content-1">
  237. <div class="scrollable-content" style="width: 410px; max-height: 300px; min-height: 100px; font-size: 9pt;">
  238. <ul>
  239. <li>
  240. <strong>"seamless" textures:</strong>
  241. <dl>
  242. <dt>Author:</dt>
  243. <dd>~hhh316 Giles</dd>
  244. <dt>License:</dt>
  245. <dd>cc-by 3.0</dd>
  246. <dt>Downloaded from:</dt>
  247. <dd><a href="http://seamless-pixels.blogspot.fr/"> http://seamless-pixels.blogspot.fr/</a></dd>
  248. </dl>
  249. </li>
  250. <li>
  251. <strong>Babylonjs engine:</strong>
  252. <dl>
  253. <dt>Authors:</dt>
  254. <dd>David Catuhe &amp; David Rousset</dd>
  255. <dt>Licence:</dt>
  256. <dd>Apache License 2.0</dd>
  257. <dt>Homepage:</dt>
  258. <dd><a href="http://www.babylonjs.com">http://www.babylonjs.com</a></dd>
  259. </dl>
  260. </li>
  261. </ul>
  262. </div>
  263. </section>
  264. </div>
  265. </div>
  266. </div>
  267. <div class="window-action-bar">
  268. <button rel="">关闭</button>
  269. </div>
  270. </div>
  271. <div style="position: absolute; top: 50px; left: 10px; height: 300px; width: 50px;">
  272. <div style="width: 50px; height: 210px; position: relative; background-image: url(&quot;images/remote-controller/bg.png&quot;);"
  273. id="remoteController">
  274. <div style="width:20px;height:150px;position:absolute;top:57px;left:15px;">
  275. <div style="width: 20px; height: 7px; background: none repeat scroll 0% 0% rgb(138, 184, 8); border-radius: 2px; cursor: pointer; border: 1px solid rgb(110, 145, 15); margin-top: 85px;"
  276. id="mark"></div>
  277. </div>
  278. <div style="width: 18px; height: 18px; position: absolute; background-size: cover; top: 16px; left: 16px; border-radius: 7px; display: none; background-image: url(&quot;images/remote-controller/green_man.png&quot;);"
  279. id="camera-swap-btn"></div>
  280. <div style="width:50px;height:50px;cursor:pointer;position:absolute;"></div>
  281. </div>
  282. </div>
  283. <div class="window" id="productList" style="width: 1062px; height: 652.666666666667px; display: none; position: absolute; top: 1.16666666666669px; left: 265.5px;">
  284. <header class="window-title" id="addModelTitle"><span class="window-close" id="closeproduct"></span>
  285. <h1><img class="window-title-icon" src="images/productIconTitle.png"><span class="window-title-text">产品列表 &gt; 卧室</span></h1>
  286. </header>
  287. <div class="window-content">
  288. <div class="tabbed vertical">
  289. <ul class="tabbed-tabs">
  290. <li rel="tab-0">
  291. <span class="tab-text"></span>
  292. </li>
  293. <li rel="tab-1" class="active">
  294. <span class="tab-text">所有</span>
  295. </li>
  296. </ul>
  297. <div class="tabbed-tabcontent">
  298. <section class="tab-content-1 active">
  299. <div id="productItems">
  300. </div>
  301. </section>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="window-action-bar">
  306. </div>
  307. </div>
  308. <div class="window window-with-button horizontal" id="editFloor" style="width: 420px; height: 205px; display: none; top: -206px; left: -3px; margin-top: 300px; margin-left: 200px;">
  309. <div class="window-title" id="addfloorTitle"><span class="window-close"></span>
  310. <h1>添加楼层</h1>
  311. </div>
  312. <div class="photonui-container photonui-window-content photonui-container-expand-child-horizontal" style="width: 350px; height: 130px; min-width: 0px; min-height: 0px; padding: 0px;">
  313. <div class="photonui-widget photonui-boxlayout photonui-layout-orientation-vertical" id="widget-e12b4e6c-cbc2-4592-8d89-511bf47fbf9c"
  314. style="padding: 5px;">
  315. <div class="photonui-container photonui-boxlayout-item photonui-layout-align-stretch" style="margin-bottom: 5px;">
  316. <label class="photonui-widget photonui-label photonui-widget-fixed-height" id="widget-645b3d66-1700-453f-ad37-b41d2031d8ad"
  317. style="text-align: left;">下面的元素将被复制</label>
  318. </div>
  319. <div class="photonui-container photonui-boxlayout-item photonui-layout-align-stretch">
  320. <div class="photonui-widget photonui-gridlayout" id="widget-24fe82d8-f9b2-4cf7-936e-ffb435753bcf">
  321. <table>
  322. <tbody>
  323. <tr>
  324. <td class="photonui-gridlayout-cell photonui-layout-verticalalign-center photonui-layout-horizontalalign-center"
  325. style="padding-right: 5px; padding-bottom: 5px;">
  326. <div class="photonui-container photonui-gridlayout-wrapper">
  327. <div class="photonui-widget photonui-checkbox photonui-widget-fixed-width photonui-widget-fixed-height" id="wnp-floor-controller_walls">
  328. <input type="checkbox" name="wnp-floor-controller_walls" id="wnp-floor-controller_walls-input">
  329. <span tabindex="0"></span>
  330. </div>
  331. </div>
  332. </td>
  333. <td class="photonui-gridlayout-cell photonui-gridlayout-lastcol photonui-layout-verticalalign-center photonui-layout-horizontalalign-stretch"
  334. style="padding-right: 5px; padding-bottom: 5px;">
  335. <div class="photonui-container photonui-gridlayout-wrapper">
  336. <label class="photonui-widget photonui-label photonui-widget-fixed-height" id="widget-130b3f6d-94e8-4cf0-b37f-57d87809af35"
  337. style="text-align: left;">Walls</label>
  338. </div>
  339. </td>
  340. </tr>
  341. <tr>
  342. <td class="photonui-gridlayout-cell photonui-layout-verticalalign-center photonui-layout-horizontalalign-center"
  343. style="padding-right: 5px; padding-bottom: 5px;">
  344. <div class="photonui-container photonui-gridlayout-wrapper">
  345. <div class="photonui-widget photonui-checkbox photonui-widget-fixed-width photonui-widget-fixed-height" id="wnp-floor-controller_overtures">
  346. <input type="checkbox" name="wnp-floor-controller_overtures" id="wnp-floor-controller_overtures-input">
  347. <span tabindex="0"></span>
  348. </div>
  349. </div>
  350. </td>
  351. <td class="photonui-gridlayout-cell photonui-gridlayout-lastcol photonui-layout-verticalalign-center photonui-layout-horizontalalign-stretch"
  352. style="padding-right: 5px; padding-bottom: 5px;">
  353. <div class="photonui-container photonui-gridlayout-wrapper">
  354. <label class="photonui-widget photonui-label photonui-widget-fixed-height" id="widget-1f2cc0c1-7cb3-4901-bcba-6fee502530f3"
  355. style="text-align: left;">Doors &amp; Windows</label>
  356. </div>
  357. </td>
  358. </tr>
  359. <tr>
  360. <td class="photonui-gridlayout-cell photonui-layout-verticalalign-center photonui-layout-horizontalalign-center"
  361. style="padding-right: 5px; padding-bottom: 5px;">
  362. <div class="photonui-container photonui-gridlayout-wrapper">
  363. <div class="photonui-widget photonui-checkbox photonui-widget-fixed-width photonui-widget-fixed-height" id="wnp-floor-controller_stairways">
  364. <input type="checkbox" name="wnp-floor-controller_stairways" id="wnp-floor-controller_stairways-input">
  365. <span tabindex="0"></span>
  366. </div>
  367. </div>
  368. </td>
  369. <td class="photonui-gridlayout-cell photonui-gridlayout-lastcol photonui-layout-verticalalign-center photonui-layout-horizontalalign-stretch"
  370. style="padding-right: 5px; padding-bottom: 5px;">
  371. <div class="photonui-container photonui-gridlayout-wrapper">
  372. <label class="photonui-widget photonui-label photonui-widget-fixed-height" id="widget-4a4985d1-8ed2-425f-8728-43cb578e3b4f"
  373. style="text-align: left;">Stairways</label>
  374. </div>
  375. </td>
  376. </tr>
  377. </tbody>
  378. </table>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. <div class="photonui-dialog-buttons">
  384. <button class="photonui-widget photonui-button">
  385. <span class="photonui-button-text" id="widget-cancelfloor">取消</span>
  386. </button>
  387. <button class="photonui-widget photonui-button photonui-button-color-green">
  388. <span class="photonui-button-text" id="widget-createfloor">创建</span>
  389. </button>
  390. </div>
  391. </div>
  392. <div class="window window-with-button horizontal" id="configuratorWindow" style="width: 420px; height: 425px; display: none; top: 70px; left: 1346px;margin-top: 300px;margin-left: 200px;">
  393. <div class="window-title" id="editproducttitle"><span class="window-close"></span>
  394. <h1>产品编辑界面</h1>
  395. </div>
  396. <div class="window-content">
  397. <div class="tabbed horizontal">
  398. <ul class="tabbed-tabs">
  399. <li rel="tab-0" class="active" id="editsize"><span class="tab-text">大小设置</span></li>
  400. <li rel="tab-1" class="" id="editptrot"><span class="tab-text">位置和角度</span></li>
  401. </ul>
  402. <div class="tabbed-tabcontent">
  403. <section class="tab-content-0 active" id="tabSize">
  404. <ul>
  405. <li class="separator" id="item-0"><label>桌子</label><span class="field">
  406. <hr></span></li>
  407. <li class="param-item" id="params-width"><label>宽度</label><span class="field"><input type="number" step="1"
  408. value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.propertyChanged&quot;,&quot;property&quot;:&quot;params.mattress.width&quot;}"
  409. rel="wnp.contextMenu.propertyChanged"><span class="unit">cm</span></span></li>
  410. <li class="param-item" id="params-length"><label>长度</label><span class="field"><input type="number" step="1"
  411. value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.propertyChanged&quot;,&quot;property&quot;:&quot;params.mattress.length&quot;}"
  412. rel="wnp.contextMenu.propertyChanged"><span class="unit">cm</span></span></li>
  413. <li class="param-item" id="params-height"><label>高度</label><span class="field"><input type="number" step="1"
  414. value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.propertyChanged&quot;,&quot;property&quot;:&quot;params.mattress.thickness&quot;}"
  415. rel="wnp.contextMenu.propertyChanged"><span class="unit">cm</span></span></li>
  416. </ul>
  417. </section>
  418. <section class="tab-content-1" id="tabPtRot">
  419. <ul>
  420. <li class="separator" id="item-1"><label>角度</label><span class="field">
  421. <hr></span></li>
  422. <li class="param-item" id="rotation-y"><label>绕Y轴</label><span class="field"><input id="rangeAngle" type="range"
  423. min="0" max="360" step="1" value="" class=" input-range unit"><input id="angleValue" type="number" class="unit"
  424. min="0" max="360" value="" step="1" readonly><span class="unit">°</span></span></li>
  425. <li class="separator" id="item-2"><label>位置</label><span class="field">
  426. <hr></span></li>
  427. <li class="param-item" id="position-x"><label>X:(左/右)</label><span class="field"><input type="number" min="-10000"
  428. max="10000" step="10" value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.transformChanged&quot;,&quot;property&quot;:&quot;position.x&quot;}"
  429. rel="wnp.contextMenu.transformChanged" class=" unit"></span></li>
  430. <li class="param-item" id="position-y"><label>Y:(上/下)</label><span class="field"><input type="number" min="-10000"
  431. max="10000" step="10" value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.transformChanged&quot;,&quot;property&quot;:&quot;position.y&quot;}"
  432. rel="wnp.contextMenu.transformChanged" class=" unit"></span></li>
  433. <li class="param-item" id="position-z"><label>Z:(前/后)</label><span class="field"><input type="number" min="-10000"
  434. max="10000" step="10" value="" event-params="{&quot;eventName&quot;:&quot;wnp.contextMenu.transformChanged&quot;,&quot;property&quot;:&quot;position.z&quot;}"
  435. rel="wnp.contextMenu.transformChanged" class=" unit"></span></li>
  436. </ul>
  437. </section>
  438. </div>
  439. </div>
  440. </div>
  441. <div class="window-action-bar">
  442. <button id="removeMesh" class="remove">移除</button>
  443. <button id="editMesh">提交</button>
  444. </div>
  445. </div>
  446. </section>
  447. <!-- Scripts -->
  448. <section id="scripts">
  449. <script>"use strict"</script>
  450. </section>
  451. <div style="width: 80px; opacity: 0.9; cursor: pointer; position: absolute; bottom: 28px; left: 0px; z-index: 99999; display: none;"
  452. id="stats">
  453. <div style="padding: 0px 0px 3px 3px; text-align: left; background-color: rgb(0, 0, 34);" id="fps">
  454. <div style="color: rgb(0, 255, 255); font-family: Helvetica,Arial,sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;"
  455. id="fpsText">
  456. FPS
  457. </div>
  458. <div style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 255);" id="fpsGraph">
  459. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  460. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  461. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  462. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  463. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  464. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  465. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  466. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  467. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  468. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  469. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  470. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  471. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  472. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  473. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  474. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  475. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  476. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  477. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  478. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  479. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  480. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  481. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  482. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  483. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  484. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  485. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  486. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  487. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  488. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  489. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  490. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  491. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  492. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  493. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  494. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  495. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  496. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  497. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  498. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  499. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  500. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  501. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  502. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  503. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  504. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  505. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  506. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  507. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  508. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  509. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  510. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  511. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  512. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  513. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  514. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  515. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  516. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  517. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  518. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  519. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  520. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  521. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  522. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  523. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  524. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  525. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  526. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  527. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  528. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  529. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  530. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  531. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  532. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span>
  533. </div>
  534. </div>
  535. <div style="padding: 0px 0px 3px 3px; text-align: left; background-color: rgb(0, 34, 0); display: none;" id="ms">
  536. <div style="color: rgb(0, 255, 0); font-family: Helvetica,Arial,sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;"
  537. id="msText">
  538. MS
  539. </div>
  540. <div style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 0);" id="msGraph">
  541. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  542. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  543. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  544. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  545. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  546. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  547. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  548. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  549. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  550. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  551. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  552. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  553. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  554. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  555. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  556. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  557. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  558. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  559. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  560. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  561. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  562. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  563. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  564. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  565. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  566. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  567. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  568. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  569. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  570. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  571. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  572. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  573. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  574. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  575. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  576. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  577. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  578. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  579. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  580. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  581. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  582. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  583. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  584. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  585. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  586. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  587. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  588. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  589. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  590. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  591. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  592. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  593. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  594. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  595. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  596. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  597. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  598. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  599. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  600. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  601. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  602. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  603. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  604. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  605. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  606. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  607. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  608. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  609. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  610. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  611. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  612. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  613. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  614. <span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span>
  615. </div>
  616. </div>
  617. </div>
  618. <div class="photonui-widget wnp-infocomponent2D-container" id="widget-d850d988-aeb6-4390-a68c-699898070cfd">
  619. <label class="photonui-widget photonui-label photonui-widget-fixed-height" id="subsubMenuContainer" style="text-align: left;">
  620. 79.73 m2
  621. </label>
  622. </div>
  623. <!--
  624. <div id="widget-2a02e7a5-c96f-40c1-ad45-b14f5db768c2" style="left: 72px; top: 20.65px; display: none; z-index: 2001;" class="photonui-widget photonui-basewindow photonui-window photonui-active window photonui-window-have-button">
  625. <div class="photonui-window-title">
  626. <button style="display: block;" title="Close" class="photonui-window-title-close-button"></button>
  627. <span class="photonui-window-title-text">Surfaces</span>
  628. </div>
  629. <div style="width: 1152px; height: 330.4px; padding: 0px; min-width: 0px; min-height: 0px;" class="photonui-container photonui-window-content photonui-container-expand-child">
  630. <div id="widget-43a4e730-6d4c-446d-99e8-6ff2cc4aa2d6" style="padding: 5px; overflow: auto;" class="photonui-widget photonui-viewport photonui-container"></div>
  631. </div>
  632. </div>
  633. -->
  634. <div id="loaddiv" style="display:none;opacity: 0.6; z-index: 10000; position: absolute; background-color: rgb(255, 255, 255);">
  635. <img src="images/load.png" style="position: absolute; z-index: 10000;" id="loadimg">
  636. </div>
  637. <div id="wnp-floor-controller-node" class="wnp-floor-controller" style="position: absolute; top: 10px; left: 10px; max-width: 1264px;z-index: 100;">
  638. <a rel="1" class="photonui-wnpfloorcontrollerbutton photonui-widget deletable" id="floorAdd">
  639. <span>+ 添加楼层</span>
  640. </a>
  641. </div>
  642. <!--设置二维部分的墙 -->
  643. <div class="window window-with-button horizontal" id="configuratorWindow2" style="z-index: 2001; left: 829px; top: 289px;display: none;">
  644. <div class="window-title" id="edit2DTitle">
  645. <span class="window-close"></span>
  646. <h1>设置</h1>
  647. </div>
  648. <div class="tabbed-tabcontent">
  649. <section>
  650. <ul id="edit2Dcontent">
  651. <li class="param-item">
  652. <label>厚度</label>
  653. <span class="field">
  654. <input id="edit2D1" type="range" min="3" max="100" step="1" value="" class=" input-range unit">
  655. <input id="edit2D11" type="number" min="3" max="100" value="" step="1">
  656. </span>
  657. </li>
  658. <li class="param-item">
  659. <label>高度</label>
  660. <span class="field">
  661. <input id="edit2D2" type="range" min="0" max="250" step="1" value="" class=" input-range unit">
  662. <input id="edit2D22" type="number" min="0" max="250" value="" step="1">
  663. </span>
  664. </li>
  665. </ul>
  666. </section>
  667. </div>
  668. <div class="photonui-dialog-buttons">
  669. <button class="photonui-widget photonui-button photonui-button-color-green remove" id="widget-28471e0d-6ee5-4129-924c-9d564cdaf4d5">
  670. <span class="photonui-button-text" id="deleteWall">删除</span>
  671. </button>
  672. <button class="photonui-widget photonui-button photonui-button-color-green" id="widget-3334b64a-8f43-4525-ac5f-34d5313a1d4a">
  673. <span class="photonui-button-text" id="changeWall">确定</span>
  674. </button>
  675. </div>
  676. </div>
  677. <!--<script src="js/wanaplan.min.js"></script>-->
  678. <script src="libs/CanvasSketch.js"></script>
  679. <script type="text/javascript">
  680. var TESTREFRESH = 0;
  681. //var circleStyle = {fillColor:"blue", fill:true, stroke:true, fillOpacity:1, strokeOpacity:1};
  682. var div = document.getElementById("container2d");
  683. var width = window.outerWidth - 260;
  684. var height = window.outerHeight;
  685. var stepx = 50;
  686. var stepy = 50;
  687. var backgroundSize = 50;
  688. var startx = -stepx * backgroundSize;
  689. //var starty=-parseInt(stepy*backgroundSize*height/width);
  690. var starty = -stepx * backgroundSize;
  691. var MixZoom = 20;
  692. var MixMark = -1;
  693. var MaxMark = 139;
  694. var startMarkX = -width / 2 + 150;
  695. var startMarkY = -height / 2 + 150;
  696. var wallleftX = -500;
  697. var wallleftY = 400;
  698. var wallrightX = 500;
  699. var wallrightY = -400;
  700. var wallThickness = 30;
  701. var partitionThickness = 15;
  702. var door = 80;
  703. var window = 50;
  704. var meter = width / 20;
  705. var meterpositionX = 100;
  706. var redrawCount = 0;
  707. var backgroundcanvasMax = 5000;
  708. var Sector_r = 70;
  709. var slid_r = 10;
  710. var point_r = 5;
  711. var sysmbolCircleR = 10;
  712. var symbolMinLen = 10;
  713. var show3D = false;
  714. var three3D;
  715. var center;
  716. var my3DEngine = null;
  717. var wallId = null;
  718. var Overlay;
  719. var vectors = [];
  720. var layer;
  721. var initMesh = 0;
  722. var one2d = false;
  723. var one3d = false;
  724. var TESTCOUNT = 0;
  725. function init() {
  726. layer = new Layer(width, height);
  727. layer.renderer.drawBackGround();
  728. wallThickness = layer.parameter.wallThickness;
  729. partitionThickness = layer.parameter.partitionThickness;
  730. door = 80;
  731. window = 50;
  732. addWall();
  733. //layer.addSymbol2D.wallIds.push(wallId);
  734. if (!one2d) {
  735. //initRoom();
  736. one2d = true;
  737. }
  738. initLoad();
  739. }
  740. init();
  741. window.requestAnimationFrame || (window.requestAnimationFrame = function () {
  742. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (a) {
  743. window.setTimeout(a, 1e3 / 60);
  744. };
  745. }());
  746. window.cancelRequestAnimationFrame || (window.cancelRequestAnimationFrame = function () {
  747. return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout
  748. }());
  749. //document.getElementById("closeproduct").addEventListener("click",layer.menu.closeProduct);
  750. window.onresize = function () {
  751. width = window.outerWidth - 260;
  752. height = window.outerHeight;
  753. startMarkX = -width / 2 + 50;
  754. startMarkY = -height / 2 + 50;
  755. layer.size = new CanvasSketch.Size(parseInt(width), parseInt(height));
  756. //layer.renderer.setSize(layer.size);
  757. layer.maxBounds = new CanvasSketch.Bounds(-layer.size.w / 2, -layer.size.h / 2, layer.size.w / 2, layer.size.h / 2);
  758. layer.bounds = new CanvasSketch.Bounds(-layer.size.w / 2, -layer.size.h / 2, layer.size.w / 2, layer.size.h / 2);
  759. //layer.renderer.redraw(0);
  760. //layer.renderer.drawBackGround();
  761. layer.control.refreshCanvas = true;
  762. layer.control.refreshBackgroundCanvas = true;
  763. layer.control.refreshSelectCanvas = true;
  764. layer.renderer.autoRedraw();
  765. };
  766. document.getElementById("aboutWindow").addEventListener("click", function (e) {
  767. //console.log("aboutWindow");
  768. if (document.getElementById("aboutWindow").style.display == "block") {
  769. if (e.target.className == "window-close" || e.target.innerText == "关闭") {
  770. document.getElementById("aboutWindow").style.display = "none";
  771. }
  772. }
  773. });
  774. document.getElementById("subMenuContainer").addEventListener("click", function (e) {
  775. if (e.target.parentElement.parentElement.id == "toolbarScreenshot") {
  776. var saveAsLocalImage = function (canvasid, type) {
  777. var canvas = document.getElementById(canvasid);
  778. // 图片导出为 png 格式
  779. var type = 'png';
  780. var imgData = canvas.toDataURL(type);
  781. // 加工image data,替换mime type
  782. imgData = imgData.replace(_fixType(type), 'image/octet-stream');
  783. // 下载后的图片名
  784. var filename = '4dage_' + (new Date()).getTime() + '.' + type;
  785. // download
  786. saveFile(imgData, filename);
  787. };
  788. /**
  789. * 获取mimeType
  790. * @param {String} type the old mime-type
  791. * @return the new mime-type
  792. */
  793. var _fixType = function (type) {
  794. type = type.toLowerCase().replace(/jpg/i, 'jpeg');
  795. var r = type.match(/png|jpeg|bmp|gif/)[0];
  796. return 'image/' + r;
  797. };
  798. /**
  799. * 在本地进行文件保存
  800. * @param {String} data 要保存到本地的图片数据
  801. * @param {String} filename 文件名
  802. */
  803. var saveFile = function (data, filename) {
  804. var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  805. save_link.href = data;
  806. save_link.download = filename;
  807. var event = document.createEvent('MouseEvents');
  808. event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  809. save_link.dispatchEvent(event);
  810. };
  811. if (show3D) {
  812. BABYLON.Tools.CreateScreenshot(my3DEngine.scene3D.engine, my3DEngine.scene3D.camera, { width: my3DEngine.scene3D.canvas.width, height: my3DEngine.scene3D.canvas.height });
  813. }
  814. else {
  815. saveAsLocalImage("dynamiccanvas2d", "png");
  816. }
  817. }
  818. else if (e.target.parentElement.parentElement.id == "fullscreen-btn") {
  819. var element = document.documentElement;
  820. var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
  821. if (requestMethod) {
  822. requestMethod.call(element);
  823. }
  824. else if (typeof window.ActiveXObject !== "undefined") {
  825. var wscript = new ActiveXObject("WScript.Shell");
  826. if (wscript !== null) {
  827. wscript.SendKeys("{F11}");
  828. }
  829. }
  830. }
  831. else if (e.target.parentElement.parentElement.id == "transparencyButton") {
  832. //alert("透明");
  833. if (e.target.src.indexOf("icon-transparency.png") > -1) {
  834. /*
  835. for(var i=0;i<my3DEngine.decorate3D.roomWallMeshes.length;++i)
  836. {
  837. if(my3DEngine.decorate3D.roomWallMeshes[i].name=="wall"||my3DEngine.decorate3D.roomWallMeshes[i].name=="walltop")
  838. {
  839. my3DEngine.decorate3D.roomWallMeshes[i].visibility=0.1;
  840. }
  841. }
  842. */
  843. my3DEngine.decorate3D.transparentWall(0.05);
  844. e.target.src = e.target.src.replace("icon-transparency.png", "icon-opacity.png");
  845. }
  846. else if (e.target.src.indexOf("icon-opacity.png") > -1) {
  847. /*
  848. for(var i=0;i<my3DEngine.decorate3D.roomWallMeshes.length;++i)
  849. {
  850. if(my3DEngine.decorate3D.roomWallMeshes[i].name=="wall"||my3DEngine.decorate3D.roomWallMeshes[i].name=="walltop")
  851. {
  852. my3DEngine.decorate3D.roomWallMeshes[i].visibility=1;
  853. }
  854. }
  855. */
  856. my3DEngine.decorate3D.transparentWall(1);
  857. e.target.src = e.target.src.replace("icon-opacity.png", "icon-transparency.png");
  858. }
  859. }
  860. else if (e.target.parentElement.parentElement.id == "lock-icon") {
  861. //alert("锁");
  862. if (e.target.className == "fa fa-unlock") {
  863. my3DEngine.action3D.lock = true;
  864. e.target.className = "fa fa-lock";
  865. }
  866. else if (e.target.className == "fa fa-lock") {
  867. my3DEngine.action3D.lock = false;
  868. e.target.className = "fa fa-unlock";
  869. }
  870. }
  871. });
  872. // Grid..........................................................
  873. function initLoad() {
  874. var div = document.getElementById("loaddiv");
  875. var img = document.getElementById("loadimg");
  876. var width = window.innerWidth;
  877. var height = window.innerHeight;
  878. var imgwidth = img.width;
  879. var imgheight = img.height;
  880. var ptwidth = (width - imgwidth) / 2 + "px";
  881. var ptheight = (height - imgheight) / 2 + "px";
  882. div.style.width = width + "px";
  883. div.style.height = height + "px";
  884. div.width = width;
  885. div.height = height;
  886. img.style.marginLeft = ptwidth;
  887. img.style.marginTop = ptheight;
  888. }
  889. function showPicture() {
  890. if (my3DEngine == null) {
  891. my3DEngine = layer.layer3D;
  892. my3DEngine.initialize();
  893. }
  894. var src = this.id.replace("product", "") + ".babylon";
  895. layer.menu.closeProduct();
  896. my3DEngine.modelLoader.showPicture(src);
  897. }
  898. function showPhoFrame() {
  899. if (my3DEngine == null) {
  900. my3DEngine = layer.layer3D;
  901. my3DEngine.initialize();
  902. }
  903. var src = this.id.replace("product", "") + ".obj";
  904. layer.menu.closeProduct();
  905. my3DEngine.modelLoader.showPhoFrame(src);
  906. }
  907. function showProduct3D() {
  908. if (my3DEngine == null) {
  909. my3DEngine = new Symbol3D();
  910. my3DEngine.initialize();
  911. }
  912. var src;
  913. var src = this.id.replace("product", "") + ".babylon";
  914. layer.menu.closeProduct();
  915. my3DEngine.modelLoader.showProduct(src);
  916. }
  917. function drawGrid(stepx, stepy) {
  918. layer.renderer.addGrid();
  919. }
  920. function addWall() {
  921. var vectors = [];
  922. var points = [];
  923. var point1 = new Point(wallleftX, wallleftY);
  924. points.push(point1);
  925. var point2 = new Point(wallrightX, wallleftY);
  926. points.push(point2);
  927. var point3 = new Point(wallrightX, wallrightY);
  928. points.push(point3);
  929. var point4 = new Point(wallleftX, wallrightY);
  930. points.push(point4);
  931. var wall = new Wall(points, document.getElementById("imgWall"));
  932. var vector = new Vector(wall, wallStyle);
  933. wallId = vector.id;
  934. layer.data2d.wallIds.push(wallId);
  935. vectors.push(vector);
  936. layer.addVectors(vectors);
  937. }
  938. function Show3DBase() {
  939. if (!show3D) {
  940. if (my3DEngine == null) {
  941. my3DEngine = layer.layer3D;
  942. my3DEngine.initialize();
  943. }
  944. //my3DEngine.clearSymbol();
  945. my3DEngine.decorate3D.deleteRoomMeshes();
  946. GetWallPoints(layer);
  947. if (!one3d) {
  948. //initRoom3D();
  949. one3d = true;
  950. }
  951. my3DEngine.scene3D.render();
  952. }
  953. show3D = true;
  954. }
  955. function GetWallPoints(layer) {
  956. var wallIds = layer.data2d.wallIds;
  957. var calculateLine = layer.calculateLine;
  958. for (var i = 0; i < wallIds.length; ++i) {
  959. var id = wallIds[i];
  960. var points = layer.vectors[id].geometry.points;
  961. var syms = [];
  962. for (var key in layer.vectors[id].symbol2Ds) {
  963. var symbol2d = layer.vectors[id].symbol2Ds[key];
  964. var line = calculateLine.createLine(symbol2d.geometry.point1, symbol2d.geometry.point2);
  965. var sym = {};
  966. if (line.a != 0) {
  967. sym.angle = Math.atan(line.a);
  968. }
  969. else if (line.hasOwnProperty('x')) {
  970. sym.angle = Math.PI / 2;
  971. }
  972. else if (line.hasOwnProperty('y')) {
  973. sym.angle = 0;
  974. }
  975. sym.point = { x: (symbol2d.geometry.point1.x + symbol2d.geometry.point2.x) / 2, y: (symbol2d.geometry.point1.y + symbol2d.geometry.point2.y) / 2 };
  976. //sym.type=symbol2d.geoType;
  977. sym.id = id;
  978. sym.type = symbol2d.geometry.geoType;
  979. sym.len = BABYLON.Vector2.Distance(symbol2d.geometry.point1, symbol2d.geometry.point2);
  980. sym.index = Math.min(symbol2d.attributes.wallstartindex, symbol2d.attributes.wallendindex);
  981. syms.push(sym);
  982. }
  983. if (i == 0) {
  984. //var inout=calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.border1,layer.vectors[id].geometry.border2);
  985. var inout = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
  986. var inline = inout.use;
  987. var outline = inout.build;
  988. var height = inout.height;
  989. //my3DEngine.decorate3D.drawFloor(layer.vectors[id].geometry.points,layer.vectors[id].geometry.floor);
  990. my3DEngine.decorate3D.drawFloor(id);
  991. my3DEngine.decorate3D.drawCloseWallSymbols(outline, inline, height, syms, layer.vectors[id].geometry.wallType, id, layer.vectors[id].geometry.floor);
  992. }
  993. else {
  994. if (layer.vectors[id].geometry.state == 0) {
  995. //var inout=calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.border1,layer.vectors[id].geometry.border2);
  996. var inout = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
  997. var inline = inout.use;
  998. var outline = inout.build;
  999. var height = inout.height;
  1000. //my3DEngine.decorate3D.drawFloor(layer.vectors[id].geometry.points,layer.vectors[id].geometry.floor);
  1001. my3DEngine.decorate3D.drawFloor(id);
  1002. if (calculateLine.isClockWise(outline) > 0) {
  1003. outline.reverse();
  1004. inline.reverse();
  1005. }
  1006. my3DEngine.decorate3D.drawCloseWallSymbols(outline, inline, height, syms, layer.vectors[id].geometry.wallType, id, layer.vectors[id].geometry.floor);
  1007. }
  1008. else {
  1009. var clockpoints = [];
  1010. //var floorpoints=calculateLine.outinwallside(points,layer.vectors[id].geometry.wallType);
  1011. //var floorpoints=calculateLine.outinwallside(layer.vectors[id].geometry);
  1012. var floorpoints = calculateLine.divisionBuildUseWall(layer.vectors[id].geometry.wallInfo);
  1013. var height = floorpoints.height;
  1014. if (floorpoints.use.length == 2) {
  1015. var temp1 = [];
  1016. var temp2 = [];
  1017. temp1[0] = floorpoints.use[0];
  1018. temp1[1] = floorpoints.build[0];
  1019. temp2[0] = floorpoints.use[1];
  1020. temp2[1] = floorpoints.build[1];
  1021. floorpoints.use = temp1;
  1022. floorpoints.build = temp2;
  1023. clockpoints.push(temp1[0]);
  1024. clockpoints.push(temp1[1]);
  1025. clockpoints.push(temp2[1]);
  1026. clockpoints.push(temp2[0]);
  1027. }
  1028. else {
  1029. //var line1= calculateLine.createLine(floorpoints.side1[0], floorpoints.side1[1]);
  1030. //var line2= calculateLine.createLine(floorpoints.side1[floorpoints.side1.length-2], floorpoints.side1[floorpoints.side1.length-1]);
  1031. for (var n = 0; n < floorpoints.use.length; ++n) {
  1032. clockpoints.push(floorpoints.use[n]);
  1033. }
  1034. for (var n = floorpoints.build.length - 1; n > -1; --n) {
  1035. clockpoints.push(floorpoints.build[n]);
  1036. }
  1037. }
  1038. if (calculateLine.isClockWise(clockpoints) > 0) {
  1039. floorpoints.use.reverse();
  1040. floorpoints.build.reverse();
  1041. height.reverse();
  1042. }
  1043. my3DEngine.decorate3D.drawOpenWallSymbols(floorpoints, height, syms, layer.vectors[id].geometry.wallType, id, layer.vectors[id].geometry.floor);
  1044. }
  1045. }
  1046. }
  1047. my3DEngine.decorate3D.hideFloors(parseInt(layer.selectFloor));
  1048. }
  1049. </script>
  1050. </body>
  1051. </html>