From ca8d63ac9c1d9bf34c8e01fd68291029061beaf6 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 2 Jul 2024 11:24:25 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=90=EC=84=A0=20=EB=B0=B0=EA=B2=BD=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/util/canvas-util.js | 41 +++++++++++++++++++++++++++++++++++++
 src/components/Roof2.jsx    | 17 +++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/src/app/util/canvas-util.js b/src/app/util/canvas-util.js
index b83828a9..bb8eaab3 100644
--- a/src/app/util/canvas-util.js
+++ b/src/app/util/canvas-util.js
@@ -130,3 +130,44 @@ export const distanceBetweenPoints = (point1, point2) => {
   const dy = point2.y - point1.y
   return Math.sqrt(dx * dx + dy * dy)
 }
+
+function fillCanvasWithDots(canvas, gap) {
+  const width = canvas.getWidth()
+  const height = canvas.getHeight()
+
+  for (let x = 0; x < width; x += gap) {
+    for (let y = 0; y < height; y += gap) {
+      const circle = new fabric.Circle({
+        radius: 1,
+        fill: 'black',
+        left: x,
+        top: y,
+        selectable: false,
+      })
+      canvas.add(circle)
+    }
+  }
+
+  canvas.renderAll()
+}
+
+export const setCanvasBackgroundWithDots = (canvas, gap) => {
+  // Create a new canvas and fill it with dots
+  const tempCanvas = new fabric.StaticCanvas()
+  tempCanvas.setDimensions({
+    width: canvas.getWidth(),
+    height: canvas.getHeight(),
+  })
+  fillCanvasWithDots(tempCanvas, gap)
+
+  // Convert the dotted canvas to an image
+  const dataUrl = tempCanvas.toDataURL({ format: 'png' })
+
+  // Set the image as the background of the original canvas
+  fabric.Image.fromURL(dataUrl, function (img) {
+    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+      scaleX: canvas.width / img.width,
+      scaleY: canvas.height / img.height,
+    })
+  })
+}
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 6cc92fe2..40f2da7e 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -4,6 +4,7 @@ import { Mode, useMode } from '@/hooks/useMode'
 import QRect from '@/components/fabric/QRect'
 import QLine from '@/components/fabric/QLine'
 import QPolygon from '@/components/fabric/QPolygon'
+import { setCanvasBackgroundWithDots } from '@/app/util/canvas-util'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
@@ -161,6 +162,22 @@ export default function Roof2() {
           >
             다각형 추가
           </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={() => {
+              setCanvasBackgroundWithDots(canvas, 10)
+            }}
+          >
+            점선 추가
+          </button>
+          <button
+            className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+            onClick={() => {
+              setCanvasBackgroundWithDots(canvas, 20)
+            }}
+          >
+            점선 추가
+          </button>
         </div>
       )}