외곽선 그리기 테스트

src/hooks/useMode.js

@@ -206,7 +206,8 @@ export function useMode() {
       points.current = []
       historyPoints.current = []
 
-      handleOuterlines()
+      // handleOuterlines()
+      handleOuterlinesTest() //외곽선 그리기 테스트
 
       makePolygon()
     }
@@ -355,6 +356,7 @@ export function useMode() {
   const makePolygon = (otherLines) => {
     // 캔버스에서 모든 라인 객체를 찾습니다.
     const lines = otherLines || historyLines.current
+
     if (!otherLines) {
       //외각선 기준
       const sortedIndex = getStartIndex(lines)
@@ -373,21 +375,17 @@ export function useMode() {
         if (topIndex[1] === 5) {
           //1번
           setShape(1)
-          console.log('shape :: ', 1)
         }
       } else if (topIndex[0] === 1) {
         //4번
         if (topIndex[1] === 2) {
-          console.log('shape :: ', 4)
           setShape(4)
         }
       } else if (topIndex[0] === 0) {
         if (topIndex[1] === 1) {
           //2번
-          console.log('shape :: ', 2)
           setShape(2)
         } else if (topIndex[1] === 5) {
-          console.log('shape :: ', 3)
           setShape(3)
         }
       }
@@ -741,6 +739,66 @@ export function useMode() {
     makePolygon(newOuterlines)
   }
 
+  const handleOuterlinesTest = () => {
+    var offsetPoints = []
+    let offset = -35.5 // == 100 - 29
+
+    const points = historyLines.current.map((line) => ({
+      x: line.x1,
+      y: line.y1,
+    }))
+
+    for (var i = 0; i < points.length; i++) {
+      var prev = points[(i - 1 + points.length) % points.length]
+      var current = points[i]
+      var next = points[(i + 1) % points.length]
+
+      // 두 벡터 계산 (prev -> current, current -> next)
+      var vector1 = { x: current.x - prev.x, y: current.y - prev.y }
+      var vector2 = { x: next.x - current.x, y: next.y - current.y }
+
+      // 벡터의 길이 계산
+      var length1 = Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y)
+      var length2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
+
+      // 벡터를 단위 벡터로 정규화
+      var unitVector1 = { x: vector1.x / length1, y: vector1.y / length1 }
+      var unitVector2 = { x: vector2.x / length2, y: vector2.y / length2 }
+
+      // 법선 벡터 계산 (왼쪽 방향)
+      var normal1 = { x: -unitVector1.y, y: unitVector1.x }
+      var normal2 = { x: -unitVector2.y, y: unitVector2.x }
+
+      // 법선 벡터 평균 계산
+      var averageNormal = {
+        x: (normal1.x + normal2.x) / 2,
+        y: (normal1.y + normal2.y) / 2,
+      }
+
+      // 평균 법선 벡터를 단위 벡터로 정규화
+      var lengthNormal = Math.sqrt(
+        averageNormal.x * averageNormal.x + averageNormal.y * averageNormal.y,
+      )
+      var unitNormal = {
+        x: averageNormal.x / lengthNormal,
+        y: averageNormal.y / lengthNormal,
+      }
+
+      console.log('current', current)
+      console.log('unitNormal', unitNormal)
+
+      // 오프셋 적용
+      var offsetPoint = {
+        x1: current.x + unitNormal.x * offset,
+        y1: current.y + unitNormal.y * offset,
+      }
+
+      offsetPoints.push(offsetPoint)
+    }
+
+    makePolygon(offsetPoints)
+  }
+
   return {
     mode,
     changeMode,