qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

캔버스 세팅 수정, arrow usePolygon으로 변경

Browse Source
This commit is contained in:
hyojun.choi 2024-10-21 16:53:00 +09:00
parent 4f47eae1a4
commit cc70bf1db5
7 changed files with 356 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/fabric/QPolygon.js
View File

@ -2,7 +2,7 @@ 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, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import { calculateAngle, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
import * as turf from '@turf/turf'
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@ -121,13 +121,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.on('modified', (e) => {
this.addLengthText()
// if (this.arrow) {
// drawDirectionArrow(this)
// }
})
this.on('selected', () => {
// drawDirectionArrow(this)
Object.keys(this.controls).forEach((controlKey) => {
if (controlKey !== 'ml' && controlKey !== 'mr') {
this.setControlVisible(controlKey, false)

61
src/components/floor-plan/modal/setting01/GridOption.jsx
View File

@ -1,5 +1,5 @@
import React, { useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { useRecoilState, useResetRecoilState } from 'recoil'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
@ -18,47 +18,42 @@ export default function GridOption(props) {
const [color, setColor] = useColor(gridColor)
useEffect(() => {
console.log('GridOption useEffect 실행')
setGridColor(color.hex)
}, [color])
const onClickOption = (option) => {
const { id, name, selected } = option
const newGridOptions = [...gridOptions]
newGridOptions.map((item) => {
if (item.id === option.id) {
// 초기화
setShowColorPickerModal(false)
setShowDotLineGridModal(false)
setTempGridMode(false)
setAdsorptionPointAddMode(false)
//
newGridOptions.forEach((item) => {
if (item.id === id) {
item.selected = !item.selected
} else {
item.selected = false
}
})
if (option.id === 1) {
// 점 그리드
setAdsorptionPointAddMode(false)
setTempGridMode(option.selected)
newGridOptions[2].selected = false
}
if (option.id === 2) {
// 점.선 그리드
if (option.selected) {
setShowDotLineGridModal(true)
} else {
setShowDotLineGridModal(false)
}
}
if (option.name === 'modal.canvas.setting.grid.absorption.add') {
setAdsorptionPointAddMode(!adsorptionPointAddMode)
setTempGridMode(false)
newGridOptions[0].selected = false
}
if (option.id === 4) {
// 그리드 색 설정
if (option.selected) {
setShowColorPickerModal(true)
} else {
setShowColorPickerModal(false)
}
const selectedOption = newGridOptions.find((item) => item.id === option.id)
if (selectedOption.id === 1) {
// 임의 그리드 모드
setTempGridMode(selectedOption.selected)
} else if (selectedOption.id === 2) {
// 점 선 그리드 설정 모달
setShowDotLineGridModal(selectedOption.selected)
} else if (selectedOption.id === 3) {
// 흡착점 모드
setAdsorptionPointAddMode(selectedOption.selected)
} else if (selectedOption.id === 4) {
// 그리드 색 설정 모달
setShowColorPickerModal(selectedOption.selected)
}
setGridOptions(newGridOptions)

11
src/hooks/object/useObjectBatch.js
View File

@ -1,14 +1,13 @@
'use client'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import * as turf from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
import { drawDirectionArrow } from '@/util/qpolygon-utils'
import { usePolygon } from '@/hooks/usePolygon'
export function useObjectBatch() {
const { getMessage } = useMessage()
@ -16,6 +15,8 @@ export function useObjectBatch() {
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false

4
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -2,12 +2,14 @@ import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { drawDirectionArrow, splitPolygonWithLines } from '@/util/qpolygon-utils'
import { splitPolygonWithLines } from '@/util/qpolygon-utils'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
// 지붕면 할당
export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
const { swalFire } = useSwal()

4
src/hooks/surface/usePlacementShapeDrawing.js
View File

@ -14,7 +14,7 @@ import { useTempGrid } from '@/hooks/useTempGrid'
import { useEffect, useRef } from 'react'
import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { calculateAngle, drawDirectionArrow } from '@/util/qpolygon-utils'
import { calculateAngle } from '@/util/qpolygon-utils'
import {
placementShapeDrawingAngle1State,
placementShapeDrawingAngle2State,
@ -37,7 +37,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
useEvent()
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { addPolygonByLines } = usePolygon()
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
const { tempGridMode } = useTempGrid()
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)

316
src/hooks/usePolygon.js
View File

@ -4,9 +4,11 @@ import { fabric } from 'fabric'
import { getDirectionByPoint } from '@/util/canvas-util'
import { QPolygon } from '@/components/fabric/QPolygon'
import { isSamePoint } from '@/util/qpolygon-utils'
import { flowDisplaySelector } from '@/store/settingAtom'
export const usePolygon = () => {
const canvas = useRecoilValue(canvasState)
const isFlowDisplay = useRecoilValue(flowDisplaySelector)
const fontSize = useRecoilValue(fontSizeState)
const fontFamily = useRecoilValue(fontFamilyState)
@ -100,9 +102,323 @@ export const usePolygon = () => {
canvas.renderAll()
}
/**
* poolygon의 방향에 따라 화살표를 추가한다.
* @param polygon
*/
const drawDirectionArrow = (polygon) => {
const direction = polygon.direction
if (!direction) {
return
}
polygon.canvas
.getObjects()
.filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
.forEach((obj) => polygon.canvas.remove(obj))
let arrow = null
let points = []
if (polygon.arrow) {
polygon.canvas.remove(polygon.arrow)
}
let centerPoint = { x: polygon.left, y: polygon.top }
let stickeyPoint
const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
switch (direction) {
case 'north':
points = [
{ x: centerPoint.x, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 80 },
{ x: centerPoint.x + 50, y: polygonMinY - 80 },
{ x: centerPoint.x, y: polygonMinY - 110 },
{ x: centerPoint.x - 50, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 50 },
]
stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
break
case 'south':
points = [
{ x: centerPoint.x, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 80 },
{ x: centerPoint.x + 50, y: polygonMaxY + 80 },
{ x: centerPoint.x, y: polygonMaxY + 110 },
{ x: centerPoint.x - 50, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 50 },
]
stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
break
case 'west':
points = [
{ x: polygonMinX - 50, y: centerPoint.y },
{ x: polygonMinX - 50, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 50 },
{ x: polygonMinX - 110, y: centerPoint.y },
{ x: polygonMinX - 80, y: centerPoint.y - 50 },
{ x: polygonMinX - 80, y: centerPoint.y - 20 },
{ x: polygonMinX - 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
break
case 'east':
points = [
{ x: polygonMaxX + 50, y: centerPoint.y },
{ x: polygonMaxX + 50, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 50 },
{ x: polygonMaxX + 110, y: centerPoint.y },
{ x: polygonMaxX + 80, y: centerPoint.y - 50 },
{ x: polygonMaxX + 80, y: centerPoint.y - 20 },
{ x: polygonMaxX + 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
break
}
arrow = new fabric.Polygon(points, {
selectable: false,
name: 'arrow',
fill: 'transparent',
stroke: 'black',
direction: direction,
parent: polygon,
stickeyPoint: stickeyPoint,
visible: isFlowDisplay,
})
polygon.arrow = arrow
polygon.canvas.add(arrow)
polygon.canvas.renderAll()
drawDirectionStringToArrow(polygon.canvas, 0)
}
/**
* 방향을 나타낸 화살표에 각도에 따라 글씨 추가
* @param canvas
* @param compass
*/
const drawDirectionStringToArrow = (canvas, compass = 0) => {
const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
if (arrows.length === 0) {
return
}
const eastArrows = arrows.filter((arrow) => arrow.direction === 'east')
const westArrows = arrows.filter((arrow) => arrow.direction === 'west')
const northArrows = arrows.filter((arrow) => arrow.direction === 'north')
const southArrows = arrows.filter((arrow) => arrow.direction === 'south')
let southText = '南'
let eastText = '東'
let westText = '西'
let northText = '北'
if (compass === 0 || compass === 360) {
// 남,동,서 가능
// 그대로
} else if (compass < 45) {
//남(남남동),동(동북동),서(서남서) 가능
//북(북북서)
southText = '南南東'
eastText = '東北東'
westText = '西南西'
northText = '北北西'
} else if (compass === 45) {
// 남, 서 가능
// 남(남동)
// 서(남서)
// 북(북서)
// 동(북동)
southText = '南東'
westText = '南西'
northText = '北西'
eastText = '北東'
} else if (compass < 90) {
// 북(서북서)
// 동 (북북동)
// 남(동남동)
// 서(남남서)
northText = '北西北'
eastText = '北北東'
southText = '東南東'
westText = '南南西'
} else if (compass === 90) {
// 동(북)
// 서(남)
// 남(동)
// 북(서)
eastText = '北'
westText = '南'
southText = '東'
northText = '西'
} else if (compass < 135) {
// 남,서,북 가능
// 동(북북서)
// 서(남남동)
// 남(동북동)
// 북(서남서)
eastText = '北北西'
westText = '南南東'
southText = '東北東'
northText = '西南西'
} else if (compass === 135) {
// 서,북 가능
// 서(남동)
// 북(남서)
// 남(북동)
// 동(북서)
westText = '南東'
northText = '南西'
southText = '北東'
eastText = '北西'
} else if (compass < 180) {
// 북,동,서 가능
// 북(남남서)
// 동(서북서)
// 남(북북동)
// 서(동남동)
northText = '南南西'
eastText = '西北西'
southText = '北北東'
westText = '東南東'
} else if (compass === 180) {
// 북,동,서 가능
// 북(남)
// 동(서)
// 남(북)
// 서(동)
northText = '南'
eastText = '西'
southText = '北'
westText = '東'
} else if (compass < 225) {
// 서,북,동 가능
// 북(남남동)
// 동(서남서)
// 남(북북서)
// 서(동남동)
northText = '南南東'
eastText = '西南西'
southText = '北北西'
westText = '東南東'
} else if (compass === 225) {
// 북,동 가능
// 북(남동)
// 동(남서)
// 남(북서)
// 서(북동)
northText = '南東'
eastText = '南西'
southText = '北西'
westText = '北東'
} else if (compass < 270) {
// 북동남 가능
// 북(동남동)
// 동(남남서)
// 남(서북서)
// 서(북북동)
northText = '東南東'
eastText = '南南西'
southText = '西北西'
westText = '北北東'
} else if (compass === 270) {
// 북동남 가능
// 북(동)
// 동(남)
// 남(서)
// 서(북)
northText = '東'
eastText = '南'
southText = '西'
westText = '北'
} else if (compass < 315) {
// 북,동,남 가능
// 북(동북동)
// 동(남남동)
// 남(서남서)
// 서(북북서)
northText = '東北東'
eastText = '南南東'
southText = '西南西'
westText = '北北西'
} else if (compass === 315) {
// 동,남 가능
// 북(북동)
// 동(남동)
// 남(남서)
// 서(북서)
northText = '北東'
eastText = '南東'
southText = '南西'
westText = '北西'
} else if (compass < 360) {
// 남,동,서 가능
// 북(북북동)
// 동(동남동)
// 남(남남서)
// 서(서북서)
northText = '北北東'
eastText = '東南東'
southText = '南南西'
westText = '西北西'
}
clearDirectionText(canvas)
addTextByArrows(eastArrows, eastText, canvas)
addTextByArrows(westArrows, westText, canvas)
addTextByArrows(northArrows, northText, canvas)
addTextByArrows(southArrows, southText, canvas)
}
const clearDirectionText = (canvas) => {
const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
texts.forEach((text) => {
canvas.remove(text)
})
}
const addTextByArrows = (arrows, txt, canvas) => {
arrows.forEach((arrow, index) => {
const text = new fabric.Text(`${txt}${index + 1}`, {
fontSize: arrow.parent.fontSize,
fill: 'black',
originX: 'center',
originY: 'center',
name: 'directionText',
selectable: false,
left: arrow.stickeyPoint.x,
top: arrow.stickeyPoint.y,
parent: arrow,
visible: isFlowDisplay,
})
canvas.add(text)
})
}
return {
addPolygon,
addPolygonByLines,
removePolygon,
drawDirectionArrow,
}
}

311
src/util/qpolygon-utils.js
View File

@ -3038,314 +3038,3 @@ export const inPolygon = (polygonPoints, rectPoints) => {
return allPointsInsidePolygon && noPolygonPointsInsideRect
}
/**
* poolygon의 방향에 따라 화살표를 추가한다.
* @param polygon
*/
export const drawDirectionArrow = (polygon) => {
const direction = polygon.direction
if (!direction) {
return
}
polygon.canvas
.getObjects()
.filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
.forEach((obj) => polygon.canvas.remove(obj))
let arrow = null
let points = []
if (polygon.arrow) {
polygon.canvas.remove(polygon.arrow)
}
let centerPoint = { x: polygon.left, y: polygon.top }
let stickeyPoint
const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))
const polygonMinX = Math.min(...polygon.getCurrentPoints().map((point) => point.x))
const polygonMaxY = Math.max(...polygon.getCurrentPoints().map((point) => point.y))
const polygonMinY = Math.min(...polygon.getCurrentPoints().map((point) => point.y))
switch (direction) {
case 'north':
points = [
{ x: centerPoint.x, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 50 },
{ x: centerPoint.x + 20, y: polygonMinY - 80 },
{ x: centerPoint.x + 50, y: polygonMinY - 80 },
{ x: centerPoint.x, y: polygonMinY - 110 },
{ x: centerPoint.x - 50, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 80 },
{ x: centerPoint.x - 20, y: polygonMinY - 50 },
]
stickeyPoint = { x: centerPoint.x, y: polygonMinY - 110 }
break
case 'south':
points = [
{ x: centerPoint.x, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 50 },
{ x: centerPoint.x + 20, y: polygonMaxY + 80 },
{ x: centerPoint.x + 50, y: polygonMaxY + 80 },
{ x: centerPoint.x, y: polygonMaxY + 110 },
{ x: centerPoint.x - 50, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 80 },
{ x: centerPoint.x - 20, y: polygonMaxY + 50 },
]
stickeyPoint = { x: centerPoint.x, y: polygonMaxY + 110 }
break
case 'west':
points = [
{ x: polygonMinX - 50, y: centerPoint.y },
{ x: polygonMinX - 50, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 20 },
{ x: polygonMinX - 80, y: centerPoint.y + 50 },
{ x: polygonMinX - 110, y: centerPoint.y },
{ x: polygonMinX - 80, y: centerPoint.y - 50 },
{ x: polygonMinX - 80, y: centerPoint.y - 20 },
{ x: polygonMinX - 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMinX - 110, y: centerPoint.y }
break
case 'east':
points = [
{ x: polygonMaxX + 50, y: centerPoint.y },
{ x: polygonMaxX + 50, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 20 },
{ x: polygonMaxX + 80, y: centerPoint.y + 50 },
{ x: polygonMaxX + 110, y: centerPoint.y },
{ x: polygonMaxX + 80, y: centerPoint.y - 50 },
{ x: polygonMaxX + 80, y: centerPoint.y - 20 },
{ x: polygonMaxX + 50, y: centerPoint.y - 20 },
]
stickeyPoint = { x: polygonMaxX + 110, y: centerPoint.y }
break
}
arrow = new fabric.Polygon(points, {
selectable: false,
name: 'arrow',
fill: 'transparent',
stroke: 'black',
direction: direction,
parent: polygon,
stickeyPoint: stickeyPoint,
})
polygon.arrow = arrow
polygon.canvas.add(arrow)
polygon.canvas.renderAll()
drawDirectionStringToArrow(polygon.canvas, 0)
}
/**
* 방향을 나타낸 화살표에 각도에 따라 글씨 추가
* @param canvas
* @param compass
*/
export const drawDirectionStringToArrow = (canvas, compass = 0) => {
const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow')
if (arrows.length === 0) {
return
}
const eastArrows = arrows.filter((arrow) => arrow.direction === 'east')
const westArrows = arrows.filter((arrow) => arrow.direction === 'west')
const northArrows = arrows.filter((arrow) => arrow.direction === 'north')
const southArrows = arrows.filter((arrow) => arrow.direction === 'south')
let southText = '南'
let eastText = '東'
let westText = '西'
let northText = '北'
if (compass === 0 || compass === 360) {
// 남,동,서 가능
// 그대로
} else if (compass < 45) {
//남(남남동),동(동북동),서(서남서) 가능
//북(북북서)
southText = '南南東'
eastText = '東北東'
westText = '西南西'
northText = '北北西'
} else if (compass === 45) {
// 남, 서 가능
// 남(남동)
// 서(남서)
// 북(북서)
// 동(북동)
southText = '南東'
westText = '南西'
northText = '北西'
eastText = '北東'
} else if (compass < 90) {
// 북(서북서)
// 동 (북북동)
// 남(동남동)
// 서(남남서)
northText = '北西北'
eastText = '北北東'
southText = '東南東'
westText = '南南西'
} else if (compass === 90) {
// 동(북)
// 서(남)
// 남(동)
// 북(서)
eastText = '北'
westText = '南'
southText = '東'
northText = '西'
} else if (compass < 135) {
// 남,서,북 가능
// 동(북북서)
// 서(남남동)
// 남(동북동)
// 북(서남서)
eastText = '北北西'
westText = '南南東'
southText = '東北東'
northText = '西南西'
} else if (compass === 135) {
// 서,북 가능
// 서(남동)
// 북(남서)
// 남(북동)
// 동(북서)
westText = '南東'
northText = '南西'
southText = '北東'
eastText = '北西'
} else if (compass < 180) {
// 북,동,서 가능
// 북(남남서)
// 동(서북서)
// 남(북북동)
// 서(동남동)
northText = '南南西'
eastText = '西北西'
southText = '北北東'
westText = '東南東'
} else if (compass === 180) {
// 북,동,서 가능
// 북(남)
// 동(서)
// 남(북)
// 서(동)
northText = '南'
eastText = '西'
southText = '北'
westText = '東'
} else if (compass < 225) {
// 서,북,동 가능
// 북(남남동)
// 동(서남서)
// 남(북북서)
// 서(동남동)
northText = '南南東'
eastText = '西南西'
southText = '北北西'
westText = '東南東'
} else if (compass === 225) {
// 북,동 가능
// 북(남동)
// 동(남서)
// 남(북서)
// 서(북동)
northText = '南東'
eastText = '南西'
southText = '北西'
westText = '北東'
} else if (compass < 270) {
// 북동남 가능
// 북(동남동)
// 동(남남서)
// 남(서북서)
// 서(북북동)
northText = '東南東'
eastText = '南南西'
southText = '西北西'
westText = '北北東'
} else if (compass === 270) {
// 북동남 가능
// 북(동)
// 동(남)
// 남(서)
// 서(북)
northText = '東'
eastText = '南'
southText = '西'
westText = '北'
} else if (compass < 315) {
// 북,동,남 가능
// 북(동북동)
// 동(남남동)
// 남(서남서)
// 서(북북서)
northText = '東北東'
eastText = '南南東'
southText = '西南西'
westText = '北北西'
} else if (compass === 315) {
// 동,남 가능
// 북(북동)
// 동(남동)
// 남(남서)
// 서(북서)
northText = '北東'
eastText = '南東'
southText = '南西'
westText = '北西'
} else if (compass < 360) {
// 남,동,서 가능
// 북(북북동)
// 동(동남동)
// 남(남남서)
// 서(서북서)
northText = '北北東'
eastText = '東南東'
southText = '南南西'
westText = '西北西'
}
clearDirectionText(canvas)
addTextByArrows(eastArrows, eastText, canvas)
addTextByArrows(westArrows, westText, canvas)
addTextByArrows(northArrows, northText, canvas)
addTextByArrows(southArrows, southText, canvas)
}
const clearDirectionText = (canvas) => {
const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
texts.forEach((text) => {
canvas.remove(text)
})
}
const addTextByArrows = (arrows, txt, canvas) => {
arrows.forEach((arrow, index) => {
const text = new fabric.Text(`${txt}${index + 1}`, {
fontSize: arrow.parent.fontSize,
fill: 'black',
originX: 'center',
originY: 'center',
name: 'directionText',
selectable: false,
left: arrow.stickeyPoint.x,
top: arrow.stickeyPoint.y,
parent: arrow,
})
canvas.add(text)
})
}