添加门窗，修改样式

index.html

@@ -15,13 +15,7 @@
       width: 100%;
       height: 100%;
       overflow: hidden;
-    }
-    #myCanvas {
-      position: absolute;
-      left: 100px;
-      top: 100px;
-      width: 400px;
-      height: 400px;
+      background-color: rgba(0, 0, 0, 0.5)
     }
   </style>
 </head>
@@ -34,12 +28,8 @@
   <script src="model/data.js"></script>
   <script>
     var $canvas = document.getElementById("myCanvas")
-    // $canvas.setAttribute('width', window.innerWidth)
-    // $canvas.setAttribute('height', window.innerHeight)
-    // $canvas.style.width = window.innerWidth + 'px'
-    // $canvas.style.height = window.innerHeight + 'px'
-
-    var wall = grendCAD($canvas, wallData, wallCamera)
+    var cad = grendCAD($canvas, wallData, wallCamera)
+    cad.position({ x: -5.1421212121212125, y: -4.539151515151516 }, 5)
   </script>
 </body>
 </html>

model/data.js

@@ -1,345 +1,391 @@
 var wallData = [{
-  "id": "0_0",
-  "roomIndex": 0,
-  "points": [{
-    "x": 1.62,
-    "y": 0.501
-  }, {
-    "x": 1.62,
-    "y": -4.124
-  }],
-  "linkedLineID": ["0_6", "0_1"]
-}, {
-  "id": "0_1",
-  "roomIndex": 0,
-  "points": [{
-    "x": 1.62,
-    "y": -4.124
-  }, {
-    "x": 8.295,
-    "y": -5.874
-  }],
-  "linkedLineID": ["0_0", "0_2"]
-}, {
-  "id": "0_2",
-  "roomIndex": 0,
-  "points": [{
-    "x": 8.295,
-    "y": -5.874
-  }, {
-    "x": 10.67,
-    "y": -5.874
-  }],
-  "linkedLineID": ["0_1", "0_3"]
-}, {
-  "id": "0_3",
-  "roomIndex": 0,
-  "points": [{
-    "x": 10.67,
-    "y": -5.874
-  }, {
-    "x": 10.67,
-    "y": -10.924
-  }],
-  "linkedLineID": ["0_2", "0_4"]
-}, {
-  "id": "0_4",
-  "roomIndex": 0,
-  "points": [{
-    "x": 10.67,
-    "y": -10.924
-  }, {
-    "x": -14.63,
-    "y": -10.924
-  }],
-  "linkedLineID": ["0_3", "0_5"]
-}, {
-  "id": "0_5",
-  "roomIndex": 0,
-  "points": [{
-    "x": -14.63,
-    "y": -10.924
-  }, {
-    "x": -14.63,
-    "y": 0.501
-  }],
-  "linkedLineID": ["0_4", "0_6"]
-}, {
-  "id": "0_6",
-  "roomIndex": 0,
-  "points": [{
-    "x": -14.63,
-    "y": 0.501
-  }, {
-    "x": 1.62,
-    "y": 0.501
-  }],
-  "linkedLineID": ["0_5", "0_0"]
-}, {
-  "id": "1_0",
-  "roomIndex": 1,
-  "points": [{
-    "x": 1.17,
-    "y": 0.501
-  }, {
-    "x": -12.83,
-    "y": 0.501
-  }],
-  "linkedLineID": ["1_5", "1_1"]
-}, {
-  "id": "1_1",
-  "roomIndex": 1,
-  "points": [{
-    "x": -12.83,
-    "y": 0.501
-  }, {
-    "x": -12.83,
-    "y": 11.626
-  }],
-  "linkedLineID": ["1_0", "1_2"]
-}, {
-  "id": "1_2",
-  "roomIndex": 1,
-  "points": [{
-    "x": -12.83,
-    "y": 11.626
-  }, {
-    "x": 3.845,
-    "y": 11.626
-  }],
-  "linkedLineID": ["1_1", "1_3"]
-}, {
-  "id": "1_3",
-  "roomIndex": 1,
-  "points": [{
-    "x": 3.845,
-    "y": 11.626
-  }, {
-    "x": 3.845,
-    "y": 7.026
-  }],
-  "linkedLineID": ["1_2", "1_4"]
-}, {
-  "id": "1_4",
-  "roomIndex": 1,
-  "points": [{
-    "x": 3.845,
-    "y": 7.026
-  }, {
-    "x": 1.17,
-    "y": 7.026
-  }],
-  "linkedLineID": ["1_3", "1_5"]
-}, {
-  "id": "1_5",
-  "roomIndex": 1,
-  "points": [{
-    "x": 1.17,
-    "y": 7.026
-  }, {
-    "x": 1.17,
-    "y": 0.501
-  }],
-  "linkedLineID": ["1_4", "1_0"]
-}, {
-  "id": "2_0",
-  "roomIndex": 2,
-  "points": [{
-    "x": 3.845,
-    "y": 5.301
-  }, {
-    "x": 3.845,
-    "y": 13.476
-  }],
-  "linkedLineID": ["2_5", "2_1"]
-}, {
-  "id": "2_1",
-  "roomIndex": 2,
-  "points": [{
-    "x": 3.845,
-    "y": 13.476
-  }, {
-    "x": 11.97,
-    "y": 13.476
-  }],
-  "linkedLineID": ["2_0", "2_2"]
-}, {
-  "id": "2_2",
-  "roomIndex": 2,
-  "points": [{
-    "x": 11.97,
-    "y": 13.476
-  }, {
-    "x": 11.97,
-    "y": 7.576
-  }],
-  "linkedLineID": ["2_1", "2_3"]
-}, {
-  "id": "2_3",
-  "roomIndex": 2,
-  "points": [{
-    "x": 11.97,
-    "y": 7.576
-  }, {
-    "x": 13.02,
-    "y": 7.576
-  }],
-  "linkedLineID": ["2_2", "2_4"]
-}, {
-  "id": "2_4",
-  "roomIndex": 2,
-  "points": [{
-    "x": 13.02,
-    "y": 7.576
-  }, {
-    "x": 13.02,
-    "y": 5.301
-  }],
-  "linkedLineID": ["2_3", "2_5"]
-}, {
-  "id": "2_5",
-  "roomIndex": 2,
-  "points": [{
-    "x": 13.02,
-    "y": 5.301
-  }, {
-    "x": 3.845,
-    "y": 5.301
-  }],
-  "linkedLineID": ["2_4", "2_0"]
-}, {
-  "id": "3_0",
-  "roomIndex": 3,
-  "points": [{
-    "x": 7.92,
-    "y": 5.301
-  }, {
-    "x": 11.67,
-    "y": 5.301
-  }],
-  "linkedLineID": ["3_3", "3_1"]
-}, {
-  "id": "3_1",
-  "roomIndex": 3,
-  "points": [{
-    "x": 11.67,
-    "y": 5.301
-  }, {
-    "x": 11.67,
-    "y": 0.076
-  }],
-  "linkedLineID": ["3_0", "3_2"]
-}, {
-  "id": "3_2",
-  "roomIndex": 3,
-  "points": [{
-    "x": 11.67,
-    "y": 0.076
-  }, {
-    "x": 7.92,
-    "y": 0.076
-  }],
-  "linkedLineID": ["3_1", "3_3"]
-}, {
-  "id": "3_3",
-  "roomIndex": 3,
-  "points": [{
-    "x": 7.92,
-    "y": 0.076
-  }, {
-    "x": 7.92,
-    "y": 5.301
-  }],
-  "linkedLineID": ["3_2", "3_0"]
-}, {
-  "id": "4_0",
-  "roomIndex": 4,
-  "points": [{
-    "x": 11.67,
-    "y": 5.301
-  }, {
-    "x": 15.67,
-    "y": 5.301
-  }],
-  "linkedLineID": ["4_3", "4_1"]
-}, {
-  "id": "4_1",
-  "roomIndex": 4,
-  "points": [{
-    "x": 15.67,
-    "y": 5.301
-  }, {
-    "x": 15.67,
-    "y": 2.226
-  }],
-  "linkedLineID": ["4_0", "4_2"]
-}, {
-  "id": "4_2",
-  "roomIndex": 4,
-  "points": [{
-    "x": 15.67,
-    "y": 2.226
-  }, {
-    "x": 11.67,
-    "y": 2.226
-  }],
-  "linkedLineID": ["4_1", "4_3"]
-}, {
-  "id": "4_3",
-  "roomIndex": 4,
-  "points": [{
-    "x": 11.67,
-    "y": 2.226
-  }, {
-    "x": 11.67,
-    "y": 5.301
-  }],
-  "linkedLineID": ["4_2", "4_0"]
-}, {
-  "id": "5_0",
-  "roomIndex": 5,
-  "points": [{
-    "x": 8.295,
-    "y": 0.076
-  }, {
-    "x": 10.67,
-    "y": 0.076
-  }],
-  "linkedLineID": ["5_3", "5_1"]
-}, {
-  "id": "5_1",
-  "roomIndex": 5,
-  "points": [{
-    "x": 10.67,
-    "y": 0.076
-  }, {
-    "x": 10.67,
-    "y": -5.874
-  }],
-  "linkedLineID": ["5_0", "5_2"]
-}, {
-  "id": "5_2",
-  "roomIndex": 5,
-  "points": [{
-    "x": 10.67,
-    "y": -5.874
-  }, {
-    "x": 8.295,
-    "y": -5.874
-  }],
-  "linkedLineID": ["5_1", "5_3"]
-}, {
-  "id": "5_3",
-  "roomIndex": 5,
-  "points": [{
-    "x": 8.295,
-    "y": -5.874
-  }, {
-    "x": 8.295,
-    "y": 0.076
-  }],
-  "linkedLineID": ["5_2", "5_0"]
-}]
+    "id": "0_0",
+    "roomIndex": 0,
+    "points": [{
+      "x": 1.62,
+      "y": 0.501
+    }, {
+      "x": 1.62,
+      "y": -4.124
+    }],
+    "linkedLineID": ["0_6", "0_1"],
+    "casements": [{
+      "points": [{
+        "x": 1.62,
+        "y": 0.501
+      }, {
+        "x": 1.62,
+        "y": -1
+      }]
+    }]
+  },
+  {
+    "id": "0_1",
+    "roomIndex": 0,
+    "points": [{
+      "x": 1.62,
+      "y": -4.124
+    }, {
+      "x": 8.295,
+      "y": -5.874
+    }],
+    "linkedLineID": ["0_0", "0_2"],
+    "doors": [{
+      "points": [{
+        "x": 1.62,
+        "y": -4.124
+      }, {
+        x: 3.845,
+        y: -4.707333333333333
+      }]
+    }]
+  },
+  {
+    "id": "0_2",
+    "roomIndex": 0,
+    "points": [{
+      "x": 8.295,
+      "y": -5.874
+    }, {
+      "x": 10.67,
+      "y": -5.874
+    }],
+    "linkedLineID": ["0_1", "0_3"]
+  },
+  {
+    "id": "0_3",
+    "roomIndex": 0,
+    "points": [{
+      "x": 10.67,
+      "y": -5.874
+    }, {
+      "x": 10.67,
+      "y": -10.924
+    }],
+    "linkedLineID": ["0_2", "0_4"]
+  },
+  {
+    "id": "0_4",
+    "roomIndex": 0,
+    "points": [{
+      "x": 10.67,
+      "y": -10.924
+    }, {
+      "x": -14.63,
+      "y": -10.924
+    }],
+    "casements": [{
+      points: [{
+          "x": 5.67,
+          "y": -10.924
+        },
+        {
+          "x": 3.67,
+          "y": -10.924
+        }
+      ]
+    }],
+    "linkedLineID": ["0_3", "0_5"],
+    "doors": [{
+      points: [{
+          "x": 6.67,
+          "y": -10.924
+        },
+        {
+          "x": 9.67,
+          "y": -10.924
+        }
+      ]
+    }]
+  }, {
+    "id": "0_5",
+    "roomIndex": 0,
+    "points": [{
+      "x": -14.63,
+      "y": -10.924
+    }, {
+      "x": -14.63,
+      "y": 0.501
+    }],
+    "linkedLineID": ["0_4", "0_6"]
+  }, {
+    "id": "0_6",
+    "roomIndex": 0,
+    "points": [{
+      "x": -14.63,
+      "y": 0.501
+    }, {
+      "x": 1.62,
+      "y": 0.501
+    }],
+    "linkedLineID": ["0_5", "0_0"]
+  }, {
+    "id": "1_0",
+    "roomIndex": 1,
+    "points": [{
+      "x": 1.17,
+      "y": 0.501
+    }, {
+      "x": -12.83,
+      "y": 0.501
+    }],
+    "linkedLineID": ["1_5", "1_1"]
+  }, {
+    "id": "1_1",
+    "roomIndex": 1,
+    "points": [{
+      "x": -12.83,
+      "y": 0.501
+    }, {
+      "x": -12.83,
+      "y": 11.626
+    }],
+    "linkedLineID": ["1_0", "1_2"]
+  }, {
+    "id": "1_2",
+    'selected': true,
+    "roomIndex": 1,
+    "points": [{
+      "x": -12.83,
+      "y": 11.626
+    }, {
+      "x": 3.845,
+      "y": 11.626
+    }],
+    "linkedLineID": ["1_1", "1_3"]
+  }, {
+    "id": "1_3",
+    "roomIndex": 1,
+    "points": [{
+      "x": 3.845,
+      "y": 11.626
+    }, {
+      "x": 3.845,
+      "y": 7.026
+    }],
+    "linkedLineID": ["1_2", "1_4"]
+  }, {
+    "id": "1_4",
+    "roomIndex": 1,
+    "points": [{
+      "x": 3.845,
+      "y": 7.026
+    }, {
+      "x": 1.17,
+      "y": 7.026
+    }],
+    "linkedLineID": ["1_3", "1_5"]
+  }, {
+    "id": "1_5",
+    "roomIndex": 1,
+    "points": [{
+      "x": 1.17,
+      "y": 7.026
+    }, {
+      "x": 1.17,
+      "y": 0.501
+    }],
+    "linkedLineID": ["1_4", "1_0"]
+  }, {
+    "id": "2_0",
+    "roomIndex": 2,
+    "points": [{
+      "x": 3.845,
+      "y": 5.301
+    }, {
+      "x": 3.845,
+      "y": 13.476
+    }],
+    "linkedLineID": ["2_5", "2_1"]
+  }, {
+    "id": "2_1",
+    "roomIndex": 2,
+    "points": [{
+      "x": 3.845,
+      "y": 13.476
+    }, {
+      "x": 11.97,
+      "y": 13.476
+    }],
+    "linkedLineID": ["2_0", "2_2"]
+  }, {
+    "id": "2_2",
+    "roomIndex": 2,
+    "points": [{
+      "x": 11.97,
+      "y": 13.476
+    }, {
+      "x": 11.97,
+      "y": 7.576
+    }],
+    "linkedLineID": ["2_1", "2_3"]
+  }, {
+    "id": "2_3",
+    "roomIndex": 2,
+    "points": [{
+      "x": 11.97,
+      "y": 7.576
+    }, {
+      "x": 13.02,
+      "y": 7.576
+    }],
+    "linkedLineID": ["2_2", "2_4"]
+  }, {
+    "id": "2_4",
+    "roomIndex": 2,
+    "points": [{
+      "x": 13.02,
+      "y": 7.576
+    }, {
+      "x": 13.02,
+      "y": 5.301
+    }],
+    "linkedLineID": ["2_3", "2_5"]
+  }, {
+    "id": "2_5",
+    "roomIndex": 2,
+    "points": [{
+      "x": 13.02,
+      "y": 5.301
+    }, {
+      "x": 3.845,
+      "y": 5.301
+    }],
+    "linkedLineID": ["2_4", "2_0"]
+  }, {
+    "id": "3_0",
+    "roomIndex": 3,
+    "points": [{
+      "x": 7.92,
+      "y": 5.301
+    }, {
+      "x": 11.67,
+      "y": 5.301
+    }],
+    "linkedLineID": ["3_3", "3_1"]
+  }, {
+    "id": "3_1",
+    "roomIndex": 3,
+    "points": [{
+      "x": 11.67,
+      "y": 5.301
+    }, {
+      "x": 11.67,
+      "y": 0.076
+    }],
+    "linkedLineID": ["3_0", "3_2"]
+  }, {
+    "id": "3_2",
+    "roomIndex": 3,
+    "points": [{
+      "x": 11.67,
+      "y": 0.076
+    }, {
+      "x": 7.92,
+      "y": 0.076
+    }],
+    "linkedLineID": ["3_1", "3_3"]
+  }, {
+    "id": "3_3",
+    "roomIndex": 3,
+    "points": [{
+      "x": 7.92,
+      "y": 0.076
+    }, {
+      "x": 7.92,
+      "y": 5.301
+    }],
+    "linkedLineID": ["3_2", "3_0"]
+  }, {
+    "id": "4_0",
+    "roomIndex": 4,
+    "points": [{
+      "x": 11.67,
+      "y": 5.301
+    }, {
+      "x": 15.67,
+      "y": 5.301
+    }],
+    "linkedLineID": ["4_3", "4_1"]
+  }, {
+    "id": "4_1",
+    "roomIndex": 4,
+    "points": [{
+      "x": 15.67,
+      "y": 5.301
+    }, {
+      "x": 15.67,
+      "y": 2.226
+    }],
+    "linkedLineID": ["4_0", "4_2"]
+  }, {
+    "id": "4_2",
+    "roomIndex": 4,
+    "points": [{
+      "x": 15.67,
+      "y": 2.226
+    }, {
+      "x": 11.67,
+      "y": 2.226
+    }],
+    "linkedLineID": ["4_1", "4_3"]
+  }, {
+    "id": "4_3",
+    "roomIndex": 4,
+    "points": [{
+      "x": 11.67,
+      "y": 2.226
+    }, {
+      "x": 11.67,
+      "y": 5.301
+    }],
+    "linkedLineID": ["4_2", "4_0"]
+  }, {
+    "id": "5_0",
+    "roomIndex": 5,
+    "points": [{
+      "x": 8.295,
+      "y": 0.076
+    }, {
+      "x": 10.67,
+      "y": 0.076
+    }],
+    "linkedLineID": ["5_3", "5_1"]
+  }, {
+    "id": "5_1",
+    "roomIndex": 5,
+    "points": [{
+      "x": 10.67,
+      "y": 0.076
+    }, {
+      "x": 10.67,
+      "y": -5.874
+    }],
+    "linkedLineID": ["5_0", "5_2"]
+  }, {
+    "id": "5_2",
+    "roomIndex": 5,
+    "points": [{
+      "x": 10.67,
+      "y": -5.874
+    }, {
+      "x": 8.295,
+      "y": -5.874
+    }],
+    "linkedLineID": ["5_1", "5_3"]
+  }, {
+    "id": "5_3",
+    "roomIndex": 5,
+    "points": [{
+      "x": 8.295,
+      "y": -5.874
+    }, {
+      "x": 8.295,
+      "y": 0.076
+    }],
+    "linkedLineID": ["5_2", "5_0"]
+  }
+]
 
 
 var wallCamera = {
@@ -371,25 +417,66 @@ var wallCamera = {
 
 
 var floorJson = {
-  "vertex": [
-    { "x": -1.198, "y": 4.705 }
-    , { "x": 8.877, "y": 6.05 }
-    , { "x": 9.877, "y": -5.295 }
-    , { "x": -1.198, "y": -5.295 }
-    , { "x": -1.198, "y": -4.745 }
-    , { "x": -9.973, "y": -4.745 }
-    , { "x": -9.973, "y": 5.305 }
-    , { "x": -1.198, "y": 5.305 }
-  ], "wall": [
-    { "p1": 0, "p2": 1, "room": 1 }
-    , { "p1": 1, "p2": 2, "room": 1 }
-    , { "p1": 2, "p2": 3, "room": 1 }
-    , { "p1": 4, "p2": 5, "room": 2 }
-    , { "p1": 5, "p2": 6, "room": 2 }
-    , { "p1": 6, "p2": 7, "room": 2 }
+  "vertex": [{
+    "x": -1.198,
+    "y": 4.705
+  }, {
+    "x": 8.877,
+    "y": 6.05
+  }, {
+    "x": 9.877,
+    "y": -5.295
+  }, {
+    "x": -1.198,
+    "y": -5.295
+  }, {
+    "x": -1.198,
+    "y": -4.745
+  }, {
+    "x": -9.973,
+    "y": -4.745
+  }, {
+    "x": -9.973,
+    "y": 5.305
+  }, {
+    "x": -1.198,
+    "y": 5.305
+  }],
+  "wall": [{
+      "p1": 0,
+      "p2": 1,
+      "room": 1
+    }, {
+      "p1": 1,
+      "p2": 2,
+      "room": 1
+    }, {
+      "p1": 2,
+      "p2": 3,
+      "room": 1
+    }, {
+      "p1": 4,
+      "p2": 5,
+      "room": 2
+    }, {
+      "p1": 5,
+      "p2": 6,
+      "room": 2
+    }, {
+      "p1": 6,
+      "p2": 7,
+      "room": 2
+    }
     //,	{"p1":3,"p2":7}
-    , { "p1": 3, "p2": 0, "room": 1 }
-    , { "p1": 7, "p2": 4, "room": 2 }
+    , {
+      "p1": 3,
+      "p2": 0,
+      "room": 1
+    }, {
+      "p1": 7,
+      "p2": 4,
+      "room": 2
+    }
   ]
 }
 
@@ -413,4 +500,4 @@ test.forEach(item => {
 })
 
 // wallData = test
-// wallCamera = {}
+// wallCamera = {}