From 67cabab44d68529d60580186a1650482daa64a01 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Tue, 22 Oct 2024 16:51:43 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=ED=85=8C=EB=91=90=EB=A6=AC=EB=A7=8C,=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=ED=95=B4=EC=B9=98,=20=EC=98=AC=ED=8E=98=EC=9D=B8?= =?UTF-8?q?=ED=8A=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/dictionary.txt | 3 +- .../modal/setting01/FirstOption.jsx | 12 ++++- src/hooks/surface/useSurfaceShapeBatch.js | 6 ++- src/util/canvas-util.js | 52 +++++++++++++++++-- 4 files changed, 66 insertions(+), 7 deletions(-) diff --git a/docs/dictionary.txt b/docs/dictionary.txt index cef0921e..0864da77 100644 --- a/docs/dictionary.txt +++ b/docs/dictionary.txt @@ -10,7 +10,8 @@ 복도치수(입력치수): inputSize 실제치수: actualSize 테두리만: borderOnly -라인해치: lineHatching +라인해치: lineHatch +Allpainted : allPainted 문자글꼴: textFont 흐름방향글꼴 : flowDirectionFont 회로번호글꼴: circuitNumberFont diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index 848596ba..6373d8a8 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -1,10 +1,13 @@ -import { useRecoilState } from 'recoil' +import { useRecoilState, useRecoilValue } from 'recoil' import { settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' import React, { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { useFirstOption } from '@/hooks/option/useFirstOption' +import { setSurfaceShapePattern } from '@/util/canvas-util' +import { canvasState } from '@/store/canvasAtom' +import { POLYGON_TYPE } from '@/common/common' export default function FirstOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 @@ -15,6 +18,7 @@ export default function FirstOption() { const { getMessage } = useMessage() const { get, post } = useAxios() const { swalFire } = useSwal() + const canvas = useRecoilValue(canvasState) // 데이터를 최초 한 번만 조회 useEffect(() => { @@ -124,6 +128,12 @@ export default function FirstOption() { return option2 }) + const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) + + polygons.forEach((polygon) => { + setSurfaceShapePattern(polygon, item.column) + }) + //치수 표시 } else { const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index 23e017bd..ac28d8ed 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -9,6 +9,7 @@ import { QPolygon } from '@/components/fabric/QPolygon' import { useSwal } from '@/hooks/useSwal' import { useMessage } from '@/hooks/useMessage' import { useEvent } from '@/hooks/useEvent' +import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' export function useSurfaceShapeBatch() { const { getMessage } = useMessage() @@ -17,6 +18,8 @@ export function useSurfaceShapeBatch() { const globalPitch = useRecoilValue(globalPitchState) const { swalFire } = useSwal() const { addCanvasMouseEventListener, initEvent } = useEvent() + const firstSettings = useRecoilValue(settingModalFirstOptionsState) + const secondSettings = useRecoilValue(settingModalSecondOptionsState) const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => { let length1, length2, length3, length4, length5 @@ -119,7 +122,8 @@ export function useSurfaceShapeBatch() { isDrawing = false obj.set('name', POLYGON_TYPE.ROOF) initEvent() - setSurfaceShapePattern(obj) + const displayMode = firstSettings.option2.filter((item) => item.selected)[0].column + setSurfaceShapePattern(obj, displayMode) setShowPlacementSurfaceSettingModal(true) }) } diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 0e49e67d..7e26e460 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -1,5 +1,6 @@ import { intersect } from 'mathjs' import * as turf from '@turf/turf' + /** * Collection of function to use on canvas */ @@ -773,7 +774,7 @@ export const rectToPolygon = (rect) => { } //면형상 선택 클릭시 지붕 패턴 입히기 -export function setSurfaceShapePattern(polygon) { +export function setSurfaceShapePattern(polygon, mode = 'onlyBorder') { const ratio = window.devicePixelRatio || 1 let width = 265 / 10 @@ -797,8 +798,9 @@ export function setSurfaceShapePattern(polygon) { const rows = Math.floor(patternSourceCanvas.height / patternSize.height) const cols = Math.floor(patternSourceCanvas.width / patternSize.width) - ctx.strokeStyle = 'green' - ctx.lineWidth = 0.4 + ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green' + ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4 + ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white' if (polygon.direction === 'east' || polygon.direction === 'west') { offset = roofStyle === 1 ? 0 : patternSize.height / 2 @@ -810,6 +812,9 @@ export function setSurfaceShapePattern(polygon) { ctx.moveTo(x, yStart) // 선 시작점 ctx.lineTo(x, yEnd) // 선 끝점 ctx.stroke() + if (mode === 'allPainted') { + ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart) + } for (let row = 0; row <= rows; row++) { const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset) @@ -819,6 +824,9 @@ export function setSurfaceShapePattern(polygon) { ctx.moveTo(xStart, y) // 선 시작점 ctx.lineTo(xEnd, y) // 선 끝점 ctx.stroke() + if (mode === 'allPainted') { + ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height) + } } } } else { @@ -829,6 +837,9 @@ export function setSurfaceShapePattern(polygon) { ctx.moveTo(0, y) // 선 시작점 ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점 ctx.stroke() + if (mode === 'allPainted') { + ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height) + } for (let col = 0; col <= cols; col++) { const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset) @@ -839,13 +850,46 @@ export function setSurfaceShapePattern(polygon) { ctx.moveTo(x, yStart) // 선 시작점 ctx.lineTo(x, yEnd) // 선 끝점 ctx.stroke() + if (mode === 'allPainted') { + ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart) + } } } } + const hachingPatternSourceCanvas = document.createElement('canvas') + + if (mode === 'lineHatch') { + hachingPatternSourceCanvas.width = polygon.width * ratio + hachingPatternSourceCanvas.height = polygon.height * ratio + + const ctx1 = hachingPatternSourceCanvas.getContext('2d') + + const gap = 10 + + ctx1.strokeStyle = 'green' // 선 색상 + ctx1.lineWidth = 0.3 // 선 두께 + + for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) { + ctx1.beginPath() + ctx1.moveTo(x, 0) // 선 시작점 + ctx1.lineTo(0, x) // 선 끝점 + ctx1.stroke() + } + } + + const combinedPatternCanvas = document.createElement('canvas') + combinedPatternCanvas.width = polygon.width * ratio + combinedPatternCanvas.height = polygon.height * ratio + const combinedCtx = combinedPatternCanvas.getContext('2d') + + // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘 + combinedCtx.drawImage(patternSourceCanvas, 0, 0) + combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0) + // 패턴 생성 const pattern = new fabric.Pattern({ - source: patternSourceCanvas, + source: combinedPatternCanvas, repeat: 'repeat', })