From 63a965d118fa18436442eceee996f8727ff395c5 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 3 Jul 2024 12:32:48 +0900 Subject: [PATCH] =?UTF-8?q?font=20=EB=B3=80=EA=B2=BD=EC=8B=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 15 --------------- src/components/fabric/QLine.js | 5 +++++ src/components/fabric/QPolygon.js | 5 +++++ src/components/fabric/QRect.js | 7 ++++++- src/hooks/useCanvas.js | 30 +++++++++++++++++++++++++++++- src/hooks/useMode.js | 8 ++++++++ 6 files changed, 53 insertions(+), 17 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 5479df91..2981e5ca 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -112,21 +112,6 @@ export default function Roof2() { canvasSizeMode() }, [verticalSize, horizontalSize]) - useEffect(() => { - canvas - ?.getObjects() - .filter( - (obj) => - obj.type === 'textbox' || - obj.type === 'text' || - obj.type === 'i-text', - ) - .forEach((obj) => { - obj.set({ fontSize: fontSize }) - }) - canvas?.renderAll() - }, [fontSize]) - return ( <> {canvas && ( diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index 545ff76e..4bce6a55 100644 --- a/src/components/fabric/QLine.js +++ b/src/components/fabric/QLine.js @@ -61,6 +61,11 @@ export default class QLine extends fabric.Line { this.#addLengthText() } + setFontSize(fontSize) { + this.#fontSize = fontSize + this.#addLengthText() + } + #addLengthText() { if (this.#text) { this.canvas.remove(this.#text) diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 035c3d99..6a4e964e 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -99,6 +99,11 @@ export default class QPolygon extends fabric.Polygon { } } + setFontSize(fontSize) { + this.#fontSize = fontSize + this.#addLengthText() + } + getCurrentPoints() { const scaleX = this.scaleX const scaleY = this.scaleY diff --git a/src/components/fabric/QRect.js b/src/components/fabric/QRect.js index ff9e7850..ad6c8ae9 100644 --- a/src/components/fabric/QRect.js +++ b/src/components/fabric/QRect.js @@ -23,6 +23,11 @@ export default class QRect extends fabric.Rect { this.#addLengthText() } + setFontSize(fontSize) { + this.#fontSize = fontSize + this.#addLengthText() + } + #addControl() { this.on('removed', () => { if (this.#text.length > 0) { @@ -83,7 +88,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: this.fontSize, + fontSize: this.#fontSize, selectable: false, }) this.#text.push(text) diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js index 177c9694..0bf0c872 100644 --- a/src/hooks/useCanvas.js +++ b/src/hooks/useCanvas.js @@ -7,13 +7,14 @@ import { } from '@/util/canvas-util' import { useRecoilState } from 'recoil' -import { canvasSizeState } from '@/store/canvasAtom' +import { canvasSizeState, fontSizeState } from '@/store/canvasAtom' export function useCanvas(id) { const [canvas, setCanvas] = useState() const [isLocked, setIsLocked] = useState(false) const [history, setHistory] = useState([]) const [canvasSize] = useRecoilState(canvasSizeState) + const [fontSize] = useRecoilState(fontSizeState) const points = useRef([]) /** @@ -46,6 +47,33 @@ export function useCanvas(id) { addEventOnCanvas() }, [canvasSize]) + useEffect(() => { + canvas + ?.getObjects() + .filter( + (obj) => + obj.type === 'textbox' || + obj.type === 'text' || + obj.type === 'i-text', + ) + .forEach((obj) => { + obj.set({ fontSize: fontSize }) + }) + + canvas + ?.getObjects() + .filter( + (obj) => + obj.type === 'Qline' || + obj.type === 'QPolygon' || + obj.type === 'QRect', + ) + .forEach((obj) => { + obj.setFontSize(fontSize) + }) + canvas?.renderAll() + }, [fontSize]) + /** * 캔버스 초기화 */ diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 4960f7e7..952b678b 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -3,6 +3,8 @@ import QLine from '@/components/fabric/QLine' import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' import { getStartIndex, rearrangeArray } from '@/util/canvas-util' +import { useRecoilState } from 'recoil' +import { fontSizeState } from '@/store/canvasAtom' export const Mode = { DRAW_LINE: 'drawLine', // 기준선 긋기모드 @@ -20,6 +22,7 @@ export function useMode() { const historyLines = useRef([]) const [canvas, setCanvas] = useState(null) const [zoom, setZoom] = useState(100) + const [fontSize] = useRecoilState(fontSizeState) const addEvent = (mode) => { switch (mode) { @@ -153,6 +156,7 @@ export function useMode() { selectable: false, viewLengthText: true, direction: getDirection(points.current[0], points.current[1]), + fontSize: fontSize, }, ) @@ -237,6 +241,7 @@ export function useMode() { strokeWidth: 2, viewLengthText: true, selectable: false, + fontSize: fontSize, }, ) @@ -295,6 +300,7 @@ export function useMode() { fill: 'transparent', stroke: 'black', transparentCorners: false, + fontSize: fontSize, }) canvas.remove(rect) canvas.add(qRect) @@ -335,6 +341,7 @@ export function useMode() { selectable: false, viewLengthText: true, direction: getDirection(a, b), + fontSize: fontSize, }) historyLines.current.push(line) @@ -365,6 +372,7 @@ export function useMode() { fill: 'transparent', viewLengthText: true, selectable: true, + fontSize: fontSize, }) // 새로운 다각형 객체를 캔버스에 추가합니다.