diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js index 68b3efab..f6f55730 100644 --- a/src/components/fabric/QLine.js +++ b/src/components/fabric/QLine.js @@ -23,6 +23,10 @@ export default class QLine extends fabric.Line { this.#addLengthText() }) + this.on('moving', () => { + this.#addLengthText() + }) + this.on('modified', (e) => { const scaleX = this.scaleX const scaleY = this.scaleY diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 6338253d..e887107b 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -41,6 +41,10 @@ export default class QPolygon extends fabric.Polygon { this.#addLengthText() }) + this.on('moving', () => { + this.#addLengthText() + }) + this.on('removed', (e) => { this.#text.forEach((text) => { this.canvas.remove(text) @@ -62,17 +66,27 @@ export default class QPolygon extends fabric.Polygon { const scaleX = this.scaleX const scaleY = this.scaleY - for (let i = 0; i < this.points.length; i++) { - const start = this.points[i] - const end = this.points[(i + 1) % this.points.length] + const points = this.getCurrentPoints() - const dx = (end.x - start.x) * scaleX - const dy = (end.y - start.y) * scaleY + for (let i = 0; i < points.length; i++) { + const start = this.getCurrentPoints()[i] + const currentStart = this.getCurrentPoints()[i] + const end = + this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length] + const currentEnd = + this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length] + const dx = end.x - start.x + const dy = end.y - start.y const length = Math.sqrt(dx * dx + dy * dy) + const midPoint = new fabric.Point( + (currentStart.x + currentEnd.x) / 2, + (currentStart.y + currentEnd.y) / 2, + ) + const text = new fabric.Text(length.toFixed(0), { - left: ((start.x + end.x) / 2) * scaleX, - top: ((start.y + end.y) / 2) * scaleY, + left: midPoint.x, + top: midPoint.y, fontSize: 16, selectable: false, }) @@ -81,6 +95,18 @@ export default class QPolygon extends fabric.Polygon { } } + getCurrentPoints() { + const scaleX = this.scaleX + const scaleY = this.scaleY + + return this.points.map((point) => { + return { + x: point.x * scaleX + this.left, + y: point.y * scaleY + this.top, + } + }) + } + #distanceFromEdge(point) { const vertices = this.points let minDistance = Infinity diff --git a/src/components/fabric/QRect.js b/src/components/fabric/QRect.js index a99f5adf..02a145a1 100644 --- a/src/components/fabric/QRect.js +++ b/src/components/fabric/QRect.js @@ -44,6 +44,10 @@ export default class QRect extends fabric.Rect { this.canvas.remove(text) }) }) + + this.on('moving', () => { + this.#addLengthText() + }) } #addLengthText() { if (this.#text.length > 0) {