polygon 백그라운드 이미지 추가

src/components/Roof2.jsx

@@ -154,6 +154,7 @@ export default function Roof2() {
       canvas?.add(polygon)
 
       polygon.drawOuterLine(-50)
+      addBackgroundInPolygon(polygon)
 
       console.log(polygon.outerPolygon)
     }
@@ -182,6 +183,20 @@ export default function Roof2() {
     }
   }
 
+  const addBackgroundInPolygon = (polygon) => {
+    fabric.Image.fromURL('assets/img/check.jpg', function (img) {
+      // 패턴 객체를 생성합니다.
+      const pattern = new fabric.Pattern({
+        source: img.getElement(),
+        repeat: 'repeat',
+      })
+
+      polygon.fillBackground(pattern)
+
+      console.log(polygon)
+    })
+  }
+
   return (
     <>
       {canvas && (

src/components/fabric/QPolygon.js

@@ -24,7 +24,7 @@ export default class QPolygon extends fabric.Group {
     this.fontSize = options.fontSize
     this.points = points
     this.polygon = polygon
-    this.canvas = canvas
+    // this.canvas = canvas
 
     this.#init()
     this.#addEvent()
@@ -317,4 +317,9 @@ export default class QPolygon extends fabric.Group {
     this.addWithUpdate(outPolygon)
     this.canvas.renderAll()
   }
+
+  fillBackground(pattern) {
+    this.polygon.set({ fill: pattern })
+    this.canvas.renderAll()
+  }
 }

src/hooks/useCanvas.js

@@ -8,6 +8,9 @@ import {
 
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import QPolygon from '@/components/fabric/QPolygon'
+import { QLine } from '@/components/fabric/QLine'
+import QRect from '@/components/fabric/QRect'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
@@ -35,6 +38,10 @@ export function useCanvas(id) {
     fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
     fabric.Object.prototype.cornerSize = 6
 
+    QPolygon.prototype.canvas = c
+    QLine.prototype.canvas = c
+    QRect.prototype.canvas = c
+
     setCanvas(c)
     return () => {
       c.dispose()