From bdd928ba265c8ea064ed18f6b94d289316c329e7 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Sat, 27 Jul 2024 16:34:47 +0900 Subject: [PATCH] =?UTF-8?q?QLine=20=EB=B3=B5=EA=B5=AC=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 1 + src/components/fabric/QLine.js | 7 +++ src/components/fabric/QLine3.js | 91 +++++++++++++++++++++++++++++++++ src/hooks/useCanvas.js | 19 +++++-- src/util/qline-utils.js | 11 ++-- src/util/qpolygon-utils.js | 3 +- 6 files changed, 119 insertions(+), 13 deletions(-) create mode 100644 src/components/fabric/QLine3.js diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 370a1e2e..e483ad7e 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -11,6 +11,7 @@ import { canvasAtom, canvasListState, canvasSizeState, fontSizeState, sortedPoly import { QLine } from '@/components/fabric/QLine' import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas' import { calculateIntersection2 } from '@/util/canvas-util' +import { CustomLine } from '@/components/fabric/QLine' export default function Roof2() { const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas') diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index 9c8c2133..a6916774 100644 --- a/src/components/fabric/QLine.js +++ b/src/components/fabric/QLine.js @@ -91,6 +91,13 @@ export class QLine extends fabric.Group { }) } + static fromObject(object, callback) { + const { points, initOption, initLengthTxt } = object + const instance = new QLine(points, initOption, initLengthTxt) + callback && callback(instance) + return instance + } + addLengthText(isFirst) { if (this.text) { this.removeWithUpdate(this.text) diff --git a/src/components/fabric/QLine3.js b/src/components/fabric/QLine3.js new file mode 100644 index 00000000..9002d9a7 --- /dev/null +++ b/src/components/fabric/QLine3.js @@ -0,0 +1,91 @@ +import { fabric } from 'fabric' + +export const QLine2 = fabric.util.createClass(fabric.Line, { + type: 'QLine2', + text: null, + canvas: null, + initialize: function (points, options, canvas) { + if (canvas) { + this.canvas = canvas + } + this.callSuper('initialize', points, options) + }, + + toObject: function (propertiesToInclude) { + return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), { + type: this.type, + x1: this.x1, + y1: this.y1, + x2: this.x2, + y2: this.y2, + }) + }, + init: function () { + this.addLengthText(true) + + this.on('moving', () => { + this.addLengthText(false) + }) + + this.on('modified', (e) => { + this.addLengthText(false) + }) + + this.on('removed', () => { + if (this.text) { + this.canvas.remove(this.text) + } + + this.text = null + }) + }, + + addLengthText(isFirst) { + if (this.text) { + this.canvas.remove(this.text) + this.text = null + } + + if (isFirst && this.lengthTxt > 0) { + const text = new fabric.Textbox(this.lengthTxt.toFixed(0).toString(), { + left: (this.x1 + this.x2) / 2, + top: (this.y1 + this.y2) / 2, + fontSize: this.fontSize, + }) + this.length = this.lengthTxt + this.text = text + this.canvas.add(text) + return + } + const scaleX = this.scaleX + const scaleY = this.scaleY + const x1 = this.left + const y1 = this.top + const x2 = this.left + this.width * scaleX + const y2 = this.top + this.height * scaleY + const dx = x2 - x1 + const dy = y2 - y1 + this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) + + const text = new fabric.Textbox(this.length.toFixed(0).toString(), { + left: (x1 + x2) / 2, + top: (y1 + y2) / 2, + fontSize: this.fontSize, + selectable: false, + }) + text.set({ name: 'lengthText' }) + this.text = text + this.canvas.add(text) + }, + setFontSize(fontSize) { + this.fontSize = fontSize + this.text.set({ fontSize }) + }, + _render: function (ctx) { + this.callSuper('_render', ctx) + this.init() + }, + _set: function (key, value) { + this.callSuper('_set', key, value) + }, +}) diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js index 44ed17ce..2ffdf9f9 100644 --- a/src/hooks/useCanvas.js +++ b/src/hooks/useCanvas.js @@ -110,13 +110,24 @@ export function useCanvas(id) { fabric.Object.prototype.cornerStyle = 'rect' fabric.Object.prototype.cornerStrokeColor = '#2BEBC8' fabric.Object.prototype.cornerSize = 6 - + fabric.QLine = QLine QPolygon.prototype.canvas = canvas QLine.prototype.canvas = canvas QRect.prototype.canvas = canvas - fabric.QLine = fabric.util.createClass(fabric.Group, {}) + QLine.fromObject = function (object, callback) { + const { x1, x2, y1, y2 } = object + const instance = new QLine([x1, y1, x2, y2], object, canvas) + canvas?.add(instance) + } + + // fabric.QLine.fromObject = fabric.Line.fromObject + + // CustomLine.prototype.canvas = canvas + + // fabric.QLine = fabric.util.createClass(fabric.Group, {}) fabric.QPolygon = fabric.util.createClass(fabric.Group, {}) + // Register the custom class with fabric // fromObject 메서드를 QLine 클래스에 직접 추가 fabric.QLine.fromObject = function (object, callback) { @@ -577,9 +588,7 @@ export function useCanvas(id) { }, function (o, object) { // 각 객체가 로드될 때마다 호출됩니다. - console.log('Object loaded: ', o, object) - - canvas?.add(object) + // canvas?.add(object) canvas?.renderAll() }, ) diff --git a/src/util/qline-utils.js b/src/util/qline-utils.js index 4cbcb118..77821886 100644 --- a/src/util/qline-utils.js +++ b/src/util/qline-utils.js @@ -2,11 +2,8 @@ import { fabric } from 'fabric' import { QLine } from '@/components/fabric/QLine' export const defineQLine = () => { - fabric.QLine = fabric.util.createClass(fabric.Group, {}) - fabric.QLine.fromObject = function (object, callback) { - const { initOption, initPoints, initLengthTxt } = object - fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) { - return callback(new QLine(initPoints, initOption, initLengthTxt)) - }) - } + /*fabric.QLine = QLine + fabric.QLine.fromObject = (object, callback) => { + return new fabric.QLine([object.x1, object.y1, object.x2, object.y2], object) + }*/ } diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index bd5676bd..d09b8f21 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -20,8 +20,9 @@ export const defineQPloygon = () => { // fromObject 메서드를 QLine 클래스에 직접 추가 fabric.QPolygon.fromObject = function (object, callback) { const { initOption, initPoints, initLengthTxt } = object + fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) { - return callback(new QPolygon(initPoints, initOption, initLengthTxt)) + return callback(new QPolygon(initPoints, object, initLengthTxt)) }) } }