면형상 화살표 그림 작업중

src/components/fabric/QPolygon.js

@@ -2,7 +2,15 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawHippedRoof, inPolygon, splitPolygonWithLines, toGeoJSON } from '@/util/qpolygon-utils'
+import {
+  calculateAngle,
+  drawDirectionArrow,
+  drawHippedRoof,
+  drawPolygonArrow,
+  inPolygon,
+  splitPolygonWithLines,
+  toGeoJSON,
+} from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -20,6 +28,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   children: [],
   initOptions: null,
   direction: null,
+  arrow: null,
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {
@@ -121,6 +130,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     })
 
     this.on('selected', () => {
+      drawDirectionArrow(this)
       Object.keys(this.controls).forEach((controlKey) => {
         if (controlKey !== 'ml' && controlKey !== 'mr') {
           this.setControlVisible(controlKey, false)

src/hooks/useMode.js

@@ -933,7 +933,7 @@ export function useMode() {
         width: pointer.x - origX,
         height: pointer.y - origY,
         angle: 0,
-        fill: 'transparent',
+        fill: 'white',
         stroke: 'black',
         transparentCorners: false,
       })

src/util/qpolygon-utils.js

@@ -2704,3 +2704,84 @@ export const inPolygon = (polygonPoints, rectPoints) => {
 
   return allPointsInsidePolygon && noPolygonPointsInsideRect
 }
+
+/**
+ * poolygon의 방향에 따라 화살표를 추가한다.
+ * @param polygon
+ */
+export const drawDirectionArrow = (polygon) => {
+  const direction = polygon.direction
+  if (!direction) {
+    return
+  }
+  let arrow = null
+  let points = []
+
+  let centerPoint = polygon.getCenterPoint()
+
+  const polygonMaxX = Math.max(...polygon.points.map((point) => point.x))
+  const polygonMinX = Math.min(...polygon.points.map((point) => point.x))
+  const polygonMaxY = Math.max(...polygon.points.map((point) => point.y))
+  const polygonMinY = Math.min(...polygon.points.map((point) => point.y))
+
+  switch (direction) {
+    case 'north':
+      points = [
+        { x: centerPoint.x, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 20 },
+        { x: centerPoint.x + 20, y: polygonMinY - 50 },
+        { x: centerPoint.x + 50, y: polygonMinY - 50 },
+        { x: centerPoint.x, y: polygonMinY - 80 },
+        { x: centerPoint.x - 50, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 50 },
+        { x: centerPoint.x - 20, y: polygonMinY - 20 },
+      ]
+      break
+    case 'south':
+      points = [
+        { x: centerPoint.x, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 20 },
+        { x: centerPoint.x + 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x + 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x, y: polygonMaxY + 80 },
+        { x: centerPoint.x - 50, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 50 },
+        { x: centerPoint.x - 20, y: polygonMaxY + 20 },
+      ]
+      break
+    case 'west':
+      points = [
+        { x: polygonMinX - 20, y: centerPoint.y },
+        { x: polygonMinX - 20, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 20 },
+        { x: polygonMinX - 50, y: centerPoint.y + 50 },
+        { x: polygonMinX - 80, y: centerPoint.y },
+        { x: polygonMinX - 50, y: centerPoint.y - 50 },
+        { x: polygonMinX - 50, y: centerPoint.y - 20 },
+        { x: polygonMinX - 20, y: centerPoint.y - 20 },
+      ]
+      break
+    case 'east':
+      points = [
+        { x: polygonMaxX + 20, y: centerPoint.y },
+        { x: polygonMaxX + 20, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 20 },
+        { x: polygonMaxX + 50, y: centerPoint.y + 50 },
+        { x: polygonMaxX + 80, y: centerPoint.y },
+        { x: polygonMaxX + 50, y: centerPoint.y - 50 },
+        { x: polygonMaxX + 50, y: centerPoint.y - 20 },
+        { x: polygonMaxX + 20, y: centerPoint.y - 20 },
+      ]
+      break
+  }
+
+  arrow = new fabric.Polygon(points, {
+    selectable: false,
+    fill: 'transparent',
+    stroke: 'black',
+  })
+
+  polygon.arrow = arrow
+  polygon.canvas.add(arrow)
+  polygon.canvas.renderAll()
+}