점선 배경 추가

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

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