fontsize recoil

src/components/Roof2.jsx

@@ -48,6 +48,7 @@ export default function Roof2() {
         stroke: 'black',
         width: 400,
         height: 100,
+        fontSize: fontSize,
       })
 
       canvas?.add(rect)
@@ -59,6 +60,7 @@ export default function Roof2() {
       const line = new QLine([50, 50, 200, 50], {
         stroke: 'black',
         strokeWidth: 2,
+        fontSize: fontSize,
       })
 
       canvas?.add(line)
@@ -79,6 +81,7 @@ export default function Roof2() {
           stroke: 'black',
           strokeWidth: 2,
           selectable: true,
+          fontSize: fontSize,
         },
       )
 
@@ -110,7 +113,18 @@ export default function Roof2() {
   }, [verticalSize, horizontalSize])
 
   useEffect(() => {
-    console.log(`fontSize 바꼈다 ${fontSize}`)
+    canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.type === 'textbox' ||
+          obj.type === 'text' ||
+          obj.type === 'i-text',
+      )
+      .forEach((obj) => {
+        obj.set({ fontSize: fontSize })
+      })
+    canvas?.renderAll()
   }, [fontSize])
 
   return (

src/components/fabric/QLine.js

@@ -4,9 +4,10 @@ export default class QLine extends fabric.Line {
   #length
   #text
   #viewLengthText
-
+  #fontSize
   constructor(points, option) {
     super(points, option)
+    this.#fontSize = option.fontSize ?? 16
     this.#init(option)
     this.#addControl()
   }
@@ -65,7 +66,7 @@ export default class QLine extends fabric.Line {
       const text = new fabric.Text(this.#length, {
         left: (this.x1 + this.x2) / 2,
         top: (this.y1 + this.y2) / 2,
-        fontSize: 16,
+        fontSize: this.#fontSize,
         selectable: false,
       })
       this.#text = text

src/components/fabric/QPolygon.js

@@ -3,9 +3,11 @@ import { distanceBetweenPoints } from '@/app/util/canvas-util'
 export default class QPolygon extends fabric.Polygon {
   #viewLengthText
   #text = []
+  #fontSize
 
   constructor(points, option) {
     super(points, option)
+    this.#fontSize = option.fontSize ?? 16
     this.#init(points)
     this.#addControl()
   }
@@ -77,7 +79,7 @@ export default class QPolygon extends fabric.Polygon {
       const text = new fabric.Text(length.toFixed(0), {
         left: midPoint.x,
         top: midPoint.y,
-        fontSize: 16,
+        fontSize: this.#fontSize,
         selectable: false,
       })
       this.#text.push(text)

src/components/fabric/QRect.js

@@ -2,8 +2,10 @@ import { fabric } from 'fabric'
 export default class QRect extends fabric.Rect {
   #text = []
   #viewLengthText
+  #fontSize
   constructor(points, option) {
     super(points, option)
+    this.#fontSize = points.fontSize ?? 16
     this.#init(points)
     this.#addControl()
   }
@@ -77,7 +79,7 @@ export default class QRect extends fabric.Rect {
       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,
+        fontSize: this.#fontSize,
         selectable: false,
       })
       this.#text.push(text)