diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index a13164b2..9c06cff2 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -1,11 +1,22 @@
import { useCanvas } from '@/hooks/useCanvas'
import { useEffect } from 'react'
import { Mode, useMode } from '@/hooks/useMode'
+import QRect from '@/components/fabric/QRect'
+import QLine from '@/components/fabric/QLine'
+import QPolygon from '@/components/fabric/QPolygon'
export default function Roof2() {
const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
- const { mode, changeMode, setCanvas, handleClear } = useMode()
+ const {
+ mode,
+ changeMode,
+ handleClear,
+ fillCellInPolygon,
+ zoomIn,
+ zoomOut,
+ zoom,
+ } = useMode()
useEffect(() => {
if (!canvas) {
@@ -14,6 +25,62 @@ export default function Roof2() {
changeMode(canvas, mode)
}, [canvas, mode])
+ const makeRect = () => {
+ if (canvas) {
+ const rect = new QRect({
+ left: 100,
+ top: 100,
+ fill: 'transparent',
+ stroke: 'black',
+ width: 400,
+ height: 100,
+ isLengthText: true, // 이 속성이 true로 설정되면, 사각형의 각 선분의 길이를 표시하는 텍스트가 생성됩니다.
+ selectable: false,
+ })
+
+ canvas?.add(rect)
+ }
+ }
+
+ const makeLine = () => {
+ if (canvas) {
+ const line = new QLine([50, 50, 200, 200], {
+ stroke: 'black',
+ strokeWidth: 2,
+ isLengthText: true, // 이 속성이 true로 설정되면, 선분의 길이를 표시하는 텍스트가 생성됩니다.
+ selectable: false,
+ })
+
+ canvas?.add(line)
+ }
+ }
+
+ const makePolygon = () => {
+ if (canvas) {
+ const polygon = new QPolygon(
+ [
+ { x: 100, y: 100 },
+ { x: 200, y: 200 },
+ { x: 200, y: 300 },
+ { x: 100, y: 300 },
+ ],
+ {
+ fill: 'transparent',
+ stroke: 'black',
+ strokeWidth: 2,
+ isLengthText: true, // 이 속성이 true로 설정되면, 다각형의 각 변의 길이를 표시하는 텍스트가 생성됩니다.
+ selectable: false,
+ },
+ )
+
+ canvas?.add(polygon)
+
+ setTimeout(() => {
+ console.log(canvas?.getObjects())
+ }, 1000)
+ }
+ }
+
return (
<>
{canvas && (
@@ -66,6 +133,43 @@ export default function Roof2() {
>
clear
+
+
+
+ 현재 줌 : {zoom}%
+
+
+
)}
diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
new file mode 100644
index 00000000..4fa81751
--- /dev/null
+++ b/src/components/fabric/QLine.js
@@ -0,0 +1,36 @@
+export default class QLine extends fabric.Line {
+ length
+ constructor(points, option) {
+ super(points, option)
+
+ this.on('added', () => {
+ if (this.isLengthText) {
+ this.addLengthText()
+ }
+ })
+ }
+
+ addLengthText() {
+ const dx = this.x2 - this.x1
+ const dy = this.y2 - this.y1
+ const length = Math.sqrt(dx * dx + dy * dy)
+
+ this.length = length.toFixed(0)
+
+ const text = new fabric.Text(this.length, {
+ left: (this.x1 + this.x2) / 2,
+ top: (this.y1 + this.y2) / 2,
+ fontSize: 16,
+ selectable: false,
+ })
+
+ const group = new fabric.Group([this, text], {
+ selectable: false,
+ type: 'QLine',
+ })
+
+ this.canvas.add(group)
+ this.canvas.renderAll()
+ this.canvas.remove(this)
+ }
+}
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
new file mode 100644
index 00000000..c747e04b
--- /dev/null
+++ b/src/components/fabric/QPolygon.js
@@ -0,0 +1,42 @@
+export default class QPolygon extends fabric.Polygon {
+ constructor(points, option) {
+ super(points, option)
+
+ this.on('added', () => {
+ if (this.isLengthText) {
+ this.addLengthText()
+ }
+ })
+ }
+
+ addLengthText() {
+ const groupItems = [this]
+
+ for (let i = 0; i < this.points.length; i++) {
+ const start = this.points[i]
+ const end = this.points[(i + 1) % this.points.length]
+
+ const dx = end.x - start.x
+ const dy = end.y - start.y
+ const length = Math.sqrt(dx * dx + dy * dy)
+
+ const text = new fabric.Text(length.toFixed(0), {
+ left: (start.x + end.x) / 2,
+ top: (start.y + end.y) / 2,
+ fontSize: 16,
+ selectable: false,
+ })
+
+ groupItems.push(text)
+ }
+
+ const group = new fabric.Group(groupItems, {
+ selectable: false,
+ type: 'QPolygon',
+ })
+
+ this.canvas.add(group)
+ this.canvas.renderAll()
+ this.canvas.remove(this)
+ }
+}
diff --git a/src/components/fabric/QRect.js b/src/components/fabric/QRect.js
new file mode 100644
index 00000000..ceae98f5
--- /dev/null
+++ b/src/components/fabric/QRect.js
@@ -0,0 +1,58 @@
+export default class QRect extends fabric.Rect {
+ constructor(options) {
+ super(options)
+
+ this.on('added', () => {
+ if (this.isLengthText) {
+ this.addLengthText()
+ }
+ })
+ }
+
+ addLengthText() {
+ const lines = [
+ {
+ start: { x: this.left, y: this.top },
+ end: { x: this.left + this.width, y: this.top },
+ },
+ {
+ start: { x: this.left + this.width, y: this.top },
+ end: { x: this.left + this.width, y: this.top + this.height },
+ },
+ {
+ start: { x: this.left + this.width, y: this.top + this.height },
+ end: { x: this.left, y: this.top + this.height },
+ },
+ {
+ start: { x: this.left, y: this.top + this.height },
+ end: { x: this.left, y: this.top },
+ },
+ ]
+
+ const groupItems = [this]
+
+ lines.forEach((line) => {
+ const dx = line.end.x - line.start.x
+ const dy = line.end.y - line.start.y
+ const length = Math.sqrt(dx * dx + dy * dy)
+
+ const text = new fabric.Text(length.toFixed(0), {
+ left: (line.start.x + line.end.x) / 2,
+ top: (line.start.y + line.end.y) / 2,
+ fontSize: 16,
+ selectable: false,
+ })
+
+ groupItems.push(text)
+ })
+
+ const group = new fabric.Group(groupItems, {
+ selectable: false,
+ type: 'QRect',
+ })
+
+ this.canvas.add(group)
+ this.canvas.renderAll()
+ this.canvas.remove(this)
+ }
+}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 7f6d5ec9..b8421315 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1,4 +1,7 @@
import { useRef, useState } from 'react'
+import QLine from '@/components/fabric/QLine'
+import QRect from '@/components/fabric/QRect'
+import QPolygon from '@/components/fabric/QPolygon'
export const Mode = {
DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -14,6 +17,7 @@ export function useMode() {
const historyPoints = useRef([])
const historyLines = useRef([])
const [canvas, setCanvas] = useState(null)
+ const [zoom, setZoom] = useState(100)
const addEvent = (mode) => {
switch (mode) {
@@ -44,6 +48,38 @@ export function useMode() {
}
const editMode = () => {
+ let distanceText = null // 거리를 표시하는 텍스트 객체를 저장할 변수
+ canvas?.on('mouse:move', function (options) {
+ const pointer = canvas?.getPointer(options.e)
+
+ if (historyLines.current.length === 0) return
+ const direction = getDirection(historyLines.current[0], pointer)
+
+ // 각 선과 마우스 위치 사이의 거리를 계산합니다.
+ const dx = historyLines.current[0].x1 - pointer.x
+ const dy = 0
+
+ const minDistance = Math.sqrt(dx * dx + dy * dy)
+
+ // 거리를 표시하는 텍스트 객체를 생성하거나 업데이트합니다.
+ if (distanceText) {
+ distanceText.set({
+ left: pointer.x,
+ top: pointer.y,
+ text: `${minDistance.toFixed(2)}`,
+ })
+ } else {
+ distanceText = new fabric.Text(`${minDistance.toFixed(2)}`, {
+ left: pointer.x,
+ top: pointer.y,
+ fontSize: 16,
+ })
+ canvas?.add(distanceText)
+ }
+
+ // 캔버스를 다시 그립니다.
+ canvas?.renderAll()
+ })
canvas?.on('mouse:down', function (options) {
const pointer = canvas?.getPointer(options.e)
const circle = new fabric.Circle({
@@ -96,7 +132,7 @@ export function useMode() {
}
}
- const line = new fabric.Line(
+ const line = new QLine(
[
points.current[0].left,
points.current[0].top,
@@ -107,26 +143,12 @@ export function useMode() {
stroke: 'black',
strokeWidth: 2,
selectable: false,
+ isLengthText: true,
direction: getDirection(points.current[0], points.current[1]),
},
)
historyLines.current.push(line)
- const text = new fabric.Text(length.toString(), {
- left:
- (points.current[0].left +
- points.current[0].left +
- scaledVector.x) /
- 2,
- top:
- (points.current[0].top + points.current[0].top + scaledVector.y) /
- 2,
- fontSize: 15,
- originX: 'center',
- originY: 'center',
- selectable: false,
- })
-
// 라인의 끝에 점을 추가합니다.
const endPointCircle = new fabric.Circle({
radius: 1,
@@ -140,7 +162,6 @@ export function useMode() {
})
canvas?.add(line)
- canvas?.add(text)
canvas?.add(endPointCircle)
historyPoints.current.push(endPointCircle)
@@ -198,11 +219,12 @@ export function useMode() {
canvas?.on('mouse:down', function (options) {
const pointer = canvas?.getPointer(options.e)
- const line = new fabric.Line(
+ const line = new QLine(
[pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
{
stroke: 'black',
strokeWidth: 2,
+ isLengthText: true,
selectable: false,
},
)
@@ -219,7 +241,7 @@ export function useMode() {
const pointer = canvas.getPointer(o.e)
origX = pointer.x
origY = pointer.y
- rect = new fabric.Rect({
+ rect = new QRect({
left: origX,
top: origY,
originX: 'left',
@@ -228,6 +250,7 @@ export function useMode() {
height: pointer.y - origY,
angle: 0,
fill: 'transparent',
+ isLengthText: true,
stroke: 'black',
transparentCorners: false,
})
@@ -281,7 +304,7 @@ export function useMode() {
x: b.left - a.left,
y: b.top - a.top,
}
- const line = new fabric.Line([a.left, a.top, b.left, b.top], {
+ const line = new QLine([a.left, a.top, b.left, b.top], {
stroke: 'black',
strokeWidth: 2,
selectable: false,
@@ -289,20 +312,7 @@ export function useMode() {
})
historyLines.current.push(line)
- const text = new fabric.Text(
- Math.round(Math.sqrt(vector.x ** 2 + vector.y ** 2)).toString(),
- {
- left: (a.left + b.left) / 2,
- top: (a.top + b.top) / 2,
- fontSize: 15,
- originX: 'center',
- originY: 'center',
- selectable: false,
- },
- )
-
canvas?.add(line)
- canvas?.add(text)
canvas?.renderAll()
}
@@ -318,9 +328,10 @@ export function useMode() {
lines.forEach((line) => canvas.remove(line))
// 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
- const polygon = new fabric.Polygon(points, {
+ const polygon = new QPolygon(points, {
stroke: 'black',
fill: 'transparent',
+ isLengthText: true,
selectable: false,
})
@@ -341,5 +352,93 @@ export function useMode() {
historyLines.current = []
}
- return { mode, changeMode, setCanvas, handleClear }
+ const fillCellInPolygon = (
+ polygon = null,
+ cell = { width: 50, height: 100 },
+ padding = 20,
+ ) => {
+ if (!polygon) {
+ polygon = canvas?.getObjects().find((obj) => obj.type === 'polygon')
+ if (!polygon) {
+ alert('다각형을 먼저 그려주세요')
+ return
+ }
+ }
+ const polygonWidth = polygon.width - 2 * padding
+ const polygonHeight = polygon.height - 2 * padding
+
+ const numRectanglesWidth = Math.floor(polygonWidth / (cell.width + padding))
+ const numRectanglesHeight = Math.floor(
+ polygonHeight / (cell.height + padding),
+ )
+
+ const points = polygon.get('points') // 다각형의 각 꼭지점을 가져옵니다.
+ const lines = []
+
+ for (let i = 0; i < points.length; i++) {
+ const start = points[i]
+ const end = points[(i + 1) % points.length] // 다각형이 닫히도록 마지막 점과 첫번째 점을 연결합니다.
+
+ const line = new fabric.Line([start.x, start.y, end.x, end.y], {
+ stroke: 'black',
+ selectable: false,
+ })
+
+ lines.push(line)
+ }
+
+ for (let i = 0; i < numRectanglesWidth; i++) {
+ for (let j = 0; j < numRectanglesHeight; j++) {
+ const rect = new fabric.Rect({
+ left: i * (cell.width + padding) + polygon.left + padding,
+ top: j * (cell.height + padding) + polygon.top + padding,
+ width: cell.width,
+ height: cell.height,
+ fill: 'transparent',
+ stroke: 'red',
+ })
+
+ // 사각형의 각 꼭지점을 생성합니다.
+ const rectPoints = [
+ new fabric.Point(rect.left, rect.top),
+ new fabric.Point(rect.left + rect.width, rect.top),
+ new fabric.Point(rect.left, rect.top + rect.height),
+ new fabric.Point(rect.left + rect.width, rect.top + rect.height),
+ ]
+
+ // 모든 꼭지점이 다각형 내부에 있는지 확인합니다.
+ const isInside = rectPoints.every((rectPoint) =>
+ polygon.containsPoint(rectPoint),
+ )
+
+ // 모든 꼭지점이 다각형 내부에 있을 경우에만 사각형을 그립니다.
+ if (isInside) {
+ canvas.add(rect)
+ }
+ }
+ }
+ canvas.renderAll()
+ }
+
+ const zoomIn = () => {
+ canvas?.setZoom(canvas.getZoom() + 0.1)
+
+ setZoom(Math.round(zoom + 10))
+ }
+
+ const zoomOut = () => {
+ canvas?.setZoom(canvas.getZoom() - 0.1)
+ setZoom(Math.ceil(zoom - 10))
+ }
+
+ return {
+ mode,
+ changeMode,
+ setCanvas,
+ handleClear,
+ fillCellInPolygon,
+ zoomIn,
+ zoomOut,
+ zoom,
+ }
}