diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
index 667fe213..c88430d2 100644
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@@ -11,6 +11,7 @@ export class QLine extends fabric.Group {
y2
direction
type = 'QLine'
+ parent
constructor(points, option) {
const [x1, y1, x2, y2] = points
@@ -28,6 +29,8 @@ export class QLine extends fabric.Group {
this.line = line
this.fontSize = option.fontSize
this.direction = option.direction
+ this.parent = option.parent
+
this.#init()
this.#addControl()
}
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index b20350b5..8c8c3b9e 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -1,15 +1,22 @@
import { fabric } from 'fabric'
-import { distanceBetweenPoints } from '@/util/canvas-util'
+import {
+ distanceBetweenPoints,
+ getDirection,
+ getDirectionByPoint,
+} from '@/util/canvas-util'
+import { QLine } from '@/components/fabric/QLine'
export default class QPolygon extends fabric.Group {
type = 'QPolygon'
polygon
points
texts = []
+ lines = []
canvas
fontSize
qCells = []
outerPolygon
+ name
constructor(points, options, canvas) {
if (!options.fontSize) {
throw new Error('Font size is required.')
@@ -19,15 +26,31 @@ export default class QPolygon extends fabric.Group {
}
const polygon = new fabric.Polygon(points, options)
+
super([polygon], {})
this.fontSize = options.fontSize
this.points = points
this.polygon = polygon
- // this.canvas = canvas
+ this.name = options.name
this.#init()
this.#addEvent()
+ this.#initLines()
+ }
+
+ #initLines() {
+ this.points.forEach((point, i) => {
+ const nextPoint = this.points[(i + 1) % this.points.length]
+ const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
+ stroke: 'black',
+ strokeWidth: 1,
+ fontSize: this.fontSize,
+ direction: getDirectionByPoint(point, nextPoint),
+ })
+
+ this.lines.push(line)
+ })
}
#init() {
@@ -241,19 +264,28 @@ export default class QPolygon extends fabric.Group {
const scaleX = this.scaleX
const scaleY = this.scaleY
+ const left = this.left
+ const top = this.top
+
+ // 시작점
+ const point = this.points[0]
+
+ const movingX = left - point.x * scaleX
+ const movingY = top - point.y * scaleY
+
return this.points.map((point) => {
return {
- x: point.x * scaleX,
- y: point.y * scaleY,
+ x: point.x * scaleX + movingX,
+ y: point.y * scaleY + movingY,
}
})
}
/**
- * 외곽선 그리기
+ * 지붕 그리기
* @param offset
*/
- drawOuterLine(offset = -10) {
+ drawRoof(offset = -10) {
const points = this.getCurrentPoints()
const offsetPoints = []
for (let i = 0; i < points.length; i++) {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 5e816a72..f92d67e8 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -5,6 +5,7 @@ import {
getStartIndex,
rearrangeArray,
findTopTwoIndexesByDistance,
+ getDirection,
} from '@/util/canvas-util'
import { useRecoilState } from 'recoil'
import { fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
@@ -313,33 +314,11 @@ export function useMode() {
})
}
- /**
- * 두 점 사이의 방향을 반환합니다.
- */
- const getDirection = (a, b) => {
- const vector = {
- x: b.left - a.left,
- y: b.top - a.top,
- }
-
- if (Math.abs(vector.x) > Math.abs(vector.y)) {
- // x축 방향으로 더 많이 이동
- return vector.x > 0 ? 'right' : 'left'
- } else {
- // y축 방향으로 더 많이 이동
- return vector.y > 0 ? 'bottom' : 'top'
- }
- }
-
/**
* 두 점을 연결하는 선과 길이를 그립니다.
* a : 시작점, b : 끝점
*/
const drawLineWithLength = (a, b) => {
- const vector = {
- x: b.left - a.left,
- y: b.top - a.top,
- }
const line = new QLine([a.left, a.top, b.left, b.top], {
stroke: 'black',
strokeWidth: 2,
@@ -800,7 +779,7 @@ export function useMode() {
offsetPoints.push(offsetPoint)
}
-
+
makePolygon(offsetPoints)
}
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index ad75f204..d0e7b051 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -225,3 +225,42 @@ export const getRoofHypotenuse = (base) => {
export const getDegreeByChon = (chon) => {
return chon * 5.45
}
+
+/**
+ * 두 점 사이의 방향을 반환합니다.
+ * @param a {fabric.Object}
+ * @param b {fabric.Object}
+ * @returns {string}
+ */
+export const getDirection = (a, b) => {
+ const vector = {
+ x: b.left - a.left,
+ y: b.top - a.top,
+ }
+
+ if (Math.abs(vector.x) > Math.abs(vector.y)) {
+ // x축 방향으로 더 많이 이동
+ return vector.x > 0 ? 'right' : 'left'
+ } else {
+ // y축 방향으로 더 많이 이동
+ return vector.y > 0 ? 'bottom' : 'top'
+ }
+}
+
+/**
+ * 두 점 사이의 방향을 반환합니다.
+ */
+export const getDirectionByPoint = (a, b) => {
+ const vector = {
+ x: b.x - a.x,
+ y: b.y - a.y,
+ }
+
+ if (Math.abs(vector.x) > Math.abs(vector.y)) {
+ // x축 방향으로 더 많이 이동
+ return vector.x > 0 ? 'right' : 'left'
+ } else {
+ // y축 방향으로 더 많이 이동
+ return vector.y > 0 ? 'bottom' : 'top'
+ }
+}