template 21,22 추가

src/components/Roof2.jsx

@@ -21,7 +21,7 @@ import {
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
-import { calculateIntersection, distanceBetweenPoints } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, getIntersectionPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import ThumbnailList from './ui/ThumbnailLIst'
 import QContextMenu from './common/context-menu/QContextMenu'
@@ -30,7 +30,7 @@ import { useAxios } from '@/hooks/useAxios'
 import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
 import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
 import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
-import { degreesToRadians, radiansToDegrees } from '@turf/turf'
+import { degreesToRadians, point, radiansToDegrees } from '@turf/turf'
 
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
@@ -1100,6 +1100,234 @@ export default function Roof2(props) {
       isDrawing = false
     })
   }
+
+  const createTemplate21 = () => {
+    const length1 = 500 //Number(prompt('1번'))
+    const length2 = 240 //Number(prompt('2번'))
+    const length3 = 300 //Number(prompt('3번'))
+    const length4 = 200 //Number(prompt('4번'))
+
+    if (length1 < length2) {
+      alert('1번보다 작게 입력해주세요.')
+      return
+    }
+
+    if (length3 < length4) {
+      alert('3번보다 작게 입력해주세요.')
+      return
+    }
+
+    const pointsArray = [
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+    ]
+
+    const tmpPolygon = new QPolygon(
+      [
+        { x: 0, y: length3 },
+        { x: length1 - length2, y: length3 },
+        { x: (length1 - length2) / 2, y: length3 - length3 },
+      ],
+      {
+        fill: 'transparent',
+        stroke: 'black', //black
+        strokeWidth: 2,
+        selectable: true,
+        fontSize: 0,
+      },
+    )
+
+    const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+    const scale = (length1 - length2) / coord.x
+
+    tmpPolygon.set({ scaleX: scale })
+
+    pointsArray[0].x = 0
+    pointsArray[0].y = length3 //바닥면부터 시작하게
+    pointsArray[1].x = pointsArray[0].x + length1
+    pointsArray[1].y = pointsArray[0].y
+    pointsArray[2].x = pointsArray[1].x
+    pointsArray[2].y = pointsArray[1].y - length4
+    pointsArray[3].x = pointsArray[2].x - length2
+    pointsArray[3].y = pointsArray[2].y
+    pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+    pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+    const tmp1Polygon = new QPolygon(pointsArray, {
+      fill: 'transparent',
+      stroke: 'black', //black
+      strokeWidth: 2,
+      selectable: true,
+      fontSize: 0,
+    })
+
+    // canvas?.add(tmp1Polygon)
+
+    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,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - (length2 - length1 / 2),
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + pointsArray[4].x,
+            y: pointer.y - length3 + length4 / 2,
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
+      canvas?.add(triangle)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+    })
+  }
+
+  const createTemplate22 = () => {
+    const length1 = 500 //Number(prompt('1번'))
+    const length2 = 240 //Number(prompt('2번'))
+    const length3 = 300 //Number(prompt('3번'))
+    const length4 = 200 //Number(prompt('4번'))
+
+    if (length1 < length2) {
+      alert('1번보다 작게 입력해주세요.')
+      return
+    }
+
+    if (length3 < length4) {
+      alert('3번보다 작게 입력해주세요.')
+      return
+    }
+
+    const pointsArray = [
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+    ]
+
+    const tmpPolygon = new QPolygon(
+      [
+        { x: 0, y: length3 },
+        { x: length1 - length2, y: length3 },
+        { x: (length1 - length2) / 2, y: length3 - length3 },
+      ],
+      {
+        fill: 'transparent',
+        stroke: 'black', //black
+        strokeWidth: 2,
+        selectable: true,
+        fontSize: 0,
+      },
+    )
+
+    const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+    const scale = (length1 - length2) / coord.x
+
+    tmpPolygon.set({ scaleX: scale })
+
+    pointsArray[0].x = 0
+    pointsArray[0].y = length3 //바닥면부터 시작하게
+    pointsArray[1].x = pointsArray[0].x + length1
+    pointsArray[1].y = pointsArray[0].y
+    pointsArray[2].x = pointsArray[1].x
+    pointsArray[2].y = pointsArray[1].y - length4
+    pointsArray[3].x = pointsArray[2].x - length2
+    pointsArray[3].y = pointsArray[2].y
+    pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+    pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+    const tmp1Polygon = new QPolygon(pointsArray, {
+      fill: 'transparent',
+      stroke: 'black', //black
+      strokeWidth: 2,
+      selectable: true,
+      fontSize: 0,
+    })
+
+    tmp1Polygon.set('flipX', true) //반전시킴
+    tmp1Polygon.setCoords()
+
+    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,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - (length2 - length1 / 2),
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + pointsArray[4].x,
+            y: pointer.y - length3 + length4 / 2,
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+          flipX: true,
+        },
+      )
+      triangle.setCoords()
+      canvas?.add(triangle)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+    })
+  }
+
   /**
    * 19~22번은 못함
    */
@@ -1501,14 +1729,6 @@ export default function Roof2(props) {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button
-              className="m-1 p-2"
-              onClick={() => {
-                svgLoad()
-              }}
-            >
-              svg로딩
-            </Button>
             <Button
               className="m-1 p-2"
               onClick={() => {
@@ -1708,6 +1928,12 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={createTemplate20}>
               20번 추가
             </Button>
+            <Button className="m-1 p-2" onClick={createTemplate21}>
+              21번 추가
+            </Button>
+            <Button className="m-1 p-2" onClick={createTemplate22}>
+              22번 추가
+            </Button>
             <Button className="m-1 p-2" onClick={createTemplate23}>
               23번 추가
             </Button>

src/util/canvas-util.js

@@ -705,3 +705,23 @@ export const getClosestVerticalLine = (pointer, verticalLineArray) => {
 
   return closestLine
 }
+
+/**
+ * 빗변과 높이를 가지고 빗변의 x값을 구함
+ * @param {} p1
+ * @param {*} p2
+ * @param {*} y
+ * @returns
+ */
+export const getIntersectionPoint = (p1, p2, y) => {
+  const { x: x1, y: y1 } = p1
+  const { x: x2, y: y2 } = p2
+
+  // 기울기와 y 절편을 이용해 선의 방정식을 구합니다.
+  const slope = (y2 - y1) / (x2 - x1)
+  const intercept = y1 - slope * x1
+
+  // y = 150일 때의 x 좌표를 구합니다.
+  const x = (y - intercept) / slope
+  return { x, y }
+}