diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 6da1694f..ab7a7171 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -40,6 +40,7 @@ export default class QPolygon extends fabric.Polygon {
})
this.on('modified', (e) => {
+ console.log(this)
this.#addLengthText()
})
@@ -61,7 +62,6 @@ export default class QPolygon extends fabric.Polygon {
}
#addLengthText() {
- return false
if (this.#text.length > 0) {
this.#text.forEach((text) => {
this.canvas.remove(text)
@@ -75,13 +75,13 @@ export default class QPolygon extends fabric.Polygon {
const scaleX = this.scaleX
const scaleY = this.scaleY
- const points = this.points
+ const points = this.getCurrentPoints()
for (let i = 0; i < points.length; i++) {
const start = points[i]
const end = points[(i + 1) % points.length]
- const dx = end.x - start.x
- const dy = end.y - start.y
+ const dx = (end.x - start.x) * scaleX
+ const dy = (end.y - start.y) * scaleY
const length = Math.sqrt(dx * dx + dy * dy)
const midPoint = new fabric.Point(
@@ -236,8 +236,4 @@ export default class QPolygon extends fabric.Polygon {
return intersects % 2 === 1
}
-
- getCurrentOptions = () => {
- return this.options
- }
}
diff --git a/src/components/fabric/QPolygon2.js b/src/components/fabric/QPolygon2.js
new file mode 100644
index 00000000..b59356c6
--- /dev/null
+++ b/src/components/fabric/QPolygon2.js
@@ -0,0 +1,79 @@
+import { fabric } from 'fabric'
+
+export default class QPolygon2 extends fabric.Group {
+ type = 'QPolygon2'
+ polygon
+ points
+ texts = []
+ canvas
+ constructor(points, options, canvas) {
+ const polygon = new fabric.Polygon(points, options)
+ super([polygon], {})
+ this.points = points
+ this.polygon = polygon
+ this.canvas = canvas
+
+ this.#init()
+ this.#addEvent()
+ }
+
+ #init() {
+ this.#addLengthText()
+ }
+
+ #addEvent() {
+ this.on('modified', () => {
+ // this.#addLengthText()
+ })
+ }
+
+ #addLengthText() {
+ const points = this.getCurrentPoints()
+
+ points.forEach((start, i) => {
+ const end = points[(i + 1) % points.length]
+ const dx = end.x - start.x
+ const dy = end.y - start.y
+ const length = Math.sqrt(dx * dx + dy * dy)
+
+ const midPoint = new fabric.Point(
+ (start.x + end.x) / 2,
+ (start.y + end.y) / 2,
+ )
+
+ if (this.texts[i]) {
+ // Update existing text
+ this.texts[i].set({
+ text: length.toFixed(0),
+ left: midPoint.x,
+ top: midPoint.y,
+ })
+ } else {
+ // Create new text object if it doesn't exist
+ const text = new fabric.Text(length.toFixed(0), {
+ left: midPoint.x,
+ top: midPoint.y,
+ fontSize: 16,
+ selectable: false,
+ })
+
+ this.texts.push(text)
+ this.addWithUpdate(text)
+ }
+ })
+
+ this.canvas.renderAll()
+ }
+
+ getCurrentPoints() {
+ const scaleX = this.scaleX
+ const scaleY = this.scaleY
+
+ return this.points.map((point) => {
+ return {
+ x: point.x * scaleX,
+ y: point.y * scaleY,
+ }
+ })
+ }
+}
### type4
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 4acc9712..496d6639 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -4,13 +4,19 @@ import { Mode, useMode } from '@/hooks/useMode'
import QRect from '@/components/fabric/QRect'
import QLine from '@/components/fabric/QLine'
import QPolygon from '@/components/fabric/QPolygon'
+import QPolygon2 from '@/components/fabric/QPolygon2'
import RangeSlider from './ui/RangeSlider'
import { useRecoilState } from 'recoil'
import { fontSizeState, canvasSizeState } from '@/store/canvasAtom'
export default function Roof2() {
- const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
- useCanvas('canvas')
+ const {
+ canvas,
+ handleRedo,
+ handleUndo,
+ setCanvasBackgroundWithDots,
+ saveImage,
+ } = useCanvas('canvas')
//canvas 기본 사이즈
const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState)
@@ -86,6 +92,9 @@ export default function Roof2() {
)
canvas?.add(polygon)
+ console.log(polygon)
+
+ // polygon.fillCell({ width: 50, height: 30, padding: 10 })
}
}
@@ -112,6 +121,70 @@ export default function Roof2() {
canvasSizeMode()
}, [verticalSize, horizontalSize])
+ const addPolygonType1 = () => {
+ if (canvas) {
+ const polygon = new QPolygon(
+ [
+ { x: 100, y: 100 },
+ { x: 800, y: 100 },
+ { x: 800, y: 800 },
+ { x: 500, y: 800 },
+ { x: 500, y: 400 },
+ { x: 100, y: 400 },
+ ],
+ {
+ fill: 'transparent',
+ stroke: 'black',
+ strokeWidth: 2,
+ selectable: true,
+ fontSize: fontSize,
+ },
+ )
+
+ canvas?.add(polygon)
+
+ polygon.fillCell({ width: 20, height: 20, padding: 10 })
+ }
+ }
+
+ const rotate = () => {
+ const rect = canvas?.getObjects().find((obj) => obj.type === 'QRect')
+ if (!rect) {
+ alert('사각형을 먼저 만들어주세요.')
+ return
+ }
+ const angle = prompt('각도를 입력해주세요.', '0')
+ if (rect) {
+ rect.angle = parseInt(angle)
+ canvas?.renderAll()
+ }
+ }
+
+ const makeQPolygon2 = () => {
+ if (canvas) {
+ const polygon2 = new QPolygon2(
+ [
+ { x: 100, y: 100 },
+ { x: 800, y: 100 },
+ { x: 800, y: 800 },
+ { x: 500, y: 800 },
+ { x: 500, y: 400 },
+ { x: 100, y: 400 },
+ ],
+ {
+ fill: 'transparent',
+ stroke: 'black',
+ strokeWidth: 2,
+ selectable: true,
+ fontSize: fontSize,
+ },
+ canvas,
+ )
+
+ canvas?.add(polygon2)
+ }
+ }
+
return (
<>
{canvas && (
@@ -230,6 +303,34 @@ export default function Roof2() {
>
점선 추가
+
+
+
+