캔버스 설정 테두리만, 라인해치, 올페인트 작업

docs/dictionary.txt

@@ -10,7 +10,8 @@
 복도치수(입력치수): inputSize
 실제치수: actualSize
 테두리만: borderOnly
-라인해치: lineHatching
+라인해치: lineHatch
+Allpainted : allPainted
 문자글꼴: textFont 
 흐름방향글꼴 : flowDirectionFont
 회로번호글꼴: circuitNumberFont

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) => {

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)
       })
     }

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.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
-  ctx.lineWidth = 0.4
+  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',
   })