19,20번 추가

src/components/Roof2.jsx

@@ -1324,6 +1324,103 @@ export default function Roof2(props) {
       isDrawing = false
     })
   }
+  const createTemplate19 = () => {
+    const length1 = 500 //Number(prompt('1번'))
+    const length2 = 300 //Number(prompt('2번'))
+    const length3 = 400 //Number(prompt('3번'))
+    const length4 = 300 //Number(prompt('4번'))
+
+    // 좌측 빗변
+    const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+    const rightHypotenuse = (length4 / length3) * leftHypotenuse
+
+    const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
+
+    let isDrawing = true
+    canvas?.on('mouse:move', (e) => {
+      if (!isDrawing) {
+        return
+      }
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+      const pointer = canvas?.getPointer(e.e)
+      const triangle = new QPolygon(
+        [
+          { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
+          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle) },
+          {
+            x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
+            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
+
+      canvas?.add(triangle)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+    })
+  }
+  const createTemplate20 = () => {
+    const length1 = 500 //Number(prompt('1번'))
+    const length2 = 300 //Number(prompt('2번'))
+    const length3 = 400 //Number(prompt('3번'))
+    const length4 = 300 //Number(prompt('4번'))
+
+    // 좌측 빗변
+    const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+    const leftHypotenuse = (length4 / length3) * rightHypotenuse
+
+    const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
+
+    let isDrawing = true
+    canvas?.on('mouse:move', (e) => {
+      if (!isDrawing) {
+        return
+      }
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+      const pointer = canvas?.getPointer(e.e)
+      const triangle = new QPolygon(
+        [
+          {
+            x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(rightAngle),
+            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
+          },
+          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle) },
+          {
+            x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
+            y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
+
+      canvas?.add(triangle)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+    })
+  }
   /**
    * 19~22번은 못함
    */
@@ -1917,6 +2014,12 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={createTemplate18}>
               18번 추가
             </Button>
+            <Button className="m-1 p-2" onClick={createTemplate19}>
+              19번 추가
+            </Button>
+            <Button className="m-1 p-2" onClick={createTemplate20}>
+              20번 추가
+            </Button>
             <Button className="m-1 p-2" onClick={createTemplate23}>
               23번 추가
             </Button>