diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index cbc64ed6..9ccb1a5c 100644 --- a/src/components/fabric/QLine.js +++ b/src/components/fabric/QLine.js @@ -12,6 +12,7 @@ export class QLine extends fabric.Group { direction type = 'QLine' parent + #lengthTxt = 0 constructor(points, option, lengthTxt) { const [x1, y1, x2, y2] = points @@ -33,7 +34,7 @@ export class QLine extends fabric.Group { this.parent = option.parent if (lengthTxt > 0) { - this.length = Number(lengthTxt) + this.#lengthTxt = Number(lengthTxt) } this.#init() @@ -41,20 +42,16 @@ export class QLine extends fabric.Group { } #init() { - this.#addLengthText() + this.#addLengthText(true) } #addControl() { - this.on('added', () => { - this.#addLengthText() - }) - this.on('moving', () => { - this.#addLengthText() + this.#addLengthText(false) }) this.on('modified', (e) => { - this.#addLengthText() + this.#addLengthText(false) }) this.on('selected', () => { @@ -66,21 +63,24 @@ export class QLine extends fabric.Group { }) } - #addLengthText() { + #addLengthText(isFirst) { if (this.text) { this.removeWithUpdate(this.text) this.text = null } - if (this.length > 0) { - const text = new fabric.Textbox(this.length.toFixed(0).toString(), { + + 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.addWithUpdate(text) return } + const scaleX = this.scaleX const scaleY = this.scaleY const x1 = this.left diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index c60670e1..bdca82aa 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -1,9 +1,7 @@ import { fabric } from 'fabric' import { - calculateIntersection, distanceBetweenPoints, getDegreeByChon, - getDirection, getDirectionByPoint, getRoofHeight, getRoofHypotenuse, @@ -81,6 +79,13 @@ export default class QPolygon extends fabric.Group { this.texts.forEach((text) => { text.set({ fontSize }) }) + + this.getObjects().forEach((obj) => { + if (obj.type === 'QLine') { + obj.setFontSize(fontSize) + } + }) + this.addWithUpdate() } @@ -304,9 +309,14 @@ export default class QPolygon extends fabric.Group { } }) - const smallestLines = this.lines.filter( - (line) => line.length === smallestLength, - ) + // QPolygon 객체의 모든 선들을 가져옵니다. + const lines = [...this.lines] + + // 이 선들을 길이에 따라 정렬합니다. + lines.sort((a, b) => a.length - b.length) + + // 정렬된 배열에서 가장 작은 두 선을 선택합니다. + const smallestLines = lines.slice(0, 2) let needPlusLine let needMinusLine @@ -448,6 +458,6 @@ export default class QPolygon extends fabric.Group { this.addWithUpdate(realLine4) this.addWithUpdate(realLine5) this.addWithUpdate(realLine6) - this.addWithUpdate(ridge) + this.canvas.add(ridge) } }