diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 2ba3776a..12b05a29 100644 --- a/src/components/Roof2.jsx +++ b/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 ( diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index 514d5dad..8637bd31 100644 --- a/src/components/fabric/QLine.js +++ b/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 diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 5edf64d4..5741b8bd 100644 --- a/src/components/fabric/QPolygon.js +++ b/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) diff --git a/src/components/fabric/QRect.js b/src/components/fabric/QRect.js index db824a5b..eb15d6bf 100644 --- a/src/components/fabric/QRect.js +++ b/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)