From a16e4cccba0a79245331ecf930fa5796d711b0a5 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 8 Jul 2024 16:44:08 +0900 Subject: [PATCH] =?UTF-8?q?polygon=20=EB=B0=B1=EA=B7=B8=EB=9D=BC=EC=9A=B4?= =?UTF-8?q?=EB=93=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/img/check.jpg | Bin 0 -> 5083 bytes src/components/Roof2.jsx | 15 +++++++++++++++ src/components/fabric/QPolygon.js | 7 ++++++- src/hooks/useCanvas.js | 7 +++++++ 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 public/assets/img/check.jpg diff --git a/public/assets/img/check.jpg b/public/assets/img/check.jpg new file mode 100644 index 0000000000000000000000000000000000000000..83c66d2f2917084e72db364fe6c2e9a413814e78 GIT binary patch literal 5083 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 PnpWEZ-Pwxg4#)okch;W= literal 0 HcmV?d00001 diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 0b6e30f7..54216362 100644 --- a/src/components/Roof2.jsx +++ b/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 && ( diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index cc8bbce8..b20350b5 100644 --- a/src/components/fabric/QPolygon.js +++ b/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() + } } diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js index f1b98031..5f44060a 100644 --- a/src/hooks/useCanvas.js +++ b/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()