diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index defc3a4f..d4327a94 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -76,13 +76,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { this.shape = shape }, - toObject: function(propertiesToInclude) { + toObject: function (propertiesToInclude) { return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), { type: this.type, text: this.text, }) }, - init: function() { + init: function () { this.addLengthText() this.on('moving', () => { @@ -138,19 +138,20 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { points.forEach((start, i) => { const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id && obj.idx === i) - if (thisText) { - thisText.set({ - left: (start.x + points[(i + 1) % points.length].x) / 2, - top: (start.y + points[(i + 1) % points.length].y) / 2, - }) - return - } - const end = points[(i + 1) % points.length] const dx = end.x - start.x const dy = end.y - start.y const length = Math.sqrt(dx * dx + dy * dy) + if (thisText) { + thisText.set({ + left: (start.x + points[(i + 1) % points.length].x) / 2, + top: (start.y + points[(i + 1) % points.length].y) / 2, + text: length.toFixed(0), + }) + return + } + const midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2) // Create new text object if it doesn't exist @@ -173,48 +174,56 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { this.fontSize = fontSize this.text.set({ fontSize }) }, - _render: function(ctx) { + _render: function (ctx) { this.callSuper('_render', ctx) }, - _set: function(key, value) { + _set: function (key, value) { this.callSuper('_set', key, value) }, setCanvas(canvas) { this.canvas = canvas }, fillCell(cell = { width: 50, height: 100, padding: 10 }) { - const points = this.getCurrentPoints() - let bounds + const points = this.points + const minX = Math.min(...points.map((p) => p.x)) + const maxX = Math.max(...points.map((p) => p.x)) + const minY = Math.min(...points.map((p) => p.y)) + const maxY = Math.max(...points.map((p) => p.y)) - try { - bounds = fabric.util.makeBoundingBoxFromPoints(points) - } catch (error) { - alert('다각형의 꼭지점이 4개 이상이어야 합니다.') - return - } + const boundingBoxWidth = maxX - minX + const boundingBoxHeight = maxY - minY - for (let x = bounds.left; x < bounds.left + bounds.width; x += cell.width + cell.padding) { - for (let y = bounds.top; y < bounds.top + bounds.height; y += cell.height + cell.padding) { - const rect = new fabric.Rect({ - left: x, - top: y, - width: cell.width, - height: cell.height, - fill: 'transparent', - stroke: 'black', - selectable: false, - }) + const rectWidth = cell.width + const rectHeight = cell.height + + const cols = Math.floor((boundingBoxWidth + cell.padding) / (rectWidth + cell.padding)) + const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding)) + + for (let i = 0; i < cols; i++) { + for (let j = 0; j < rows; j++) { + const rectLeft = minX + i * (rectWidth + cell.padding) + const rectTop = minY + j * (rectHeight + cell.padding) const rectPoints = [ - new fabric.Point(rect.left, rect.top), - new fabric.Point(rect.left + rect.width, rect.top), - new fabric.Point(rect.left, rect.top + rect.height), - new fabric.Point(rect.left + rect.width, rect.top + rect.height), + { x: rectLeft, y: rectTop }, + { x: rectLeft + rectWidth, y: rectTop }, + { x: rectLeft, y: rectTop + rectHeight }, + { x: rectLeft + rectWidth, y: rectTop + rectHeight }, ] - const isInside = rectPoints.every((rectPoint) => this.inPolygon(rectPoint) && this.distanceFromEdge(rectPoint) >= cell.padding) + const allPointsInside = rectPoints.every((point) => this.inPolygon(point)) + + if (allPointsInside) { + const rect = new fabric.Rect({ + left: rectLeft, + top: rectTop, + width: rectWidth, + height: rectHeight, + stroke: 'black', // or any other color + fill: 'transparent', + selectable: false, + }) - if (isInside) { this.canvas.add(rect) } } @@ -303,7 +312,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { } }) }, - setWall: function(wall) { + setWall: function (wall) { this.wall = wall }, setViewLengthText(isView) { @@ -311,4 +320,4 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { text.set({ visible: isView }) }) }, -}) \ No newline at end of file +}) diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index eb93516b..939c48f4 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -391,20 +391,39 @@ export const sortedPoints = (points) => { point.y2 = nextPoint.y }) - // copyPoint에서 x1, y1 값을 기준으로 정렬 후 첫번째 값 + // copyPoint에서 x1, y1 값을 기준으로 시작 인덱스 const startIndex = getStartIndex(copyPoints) + const startDirection = getDirectionByPoint( + { x: copyPoints[startIndex].x1, y: copyPoints[startIndex].y1 }, + { x: copyPoints[startIndex].x2, y: copyPoints[startIndex].y2 }, + ) const resultPoints = [copyPoints[startIndex]] let currentPoint = copyPoints[startIndex] - copyPoints.forEach((point, index) => { - if (index === startIndex) return + switch (startDirection) { + case 'right': { + copyPoints.forEach((point, index) => { + if (index === startIndex) return - const nextPoint = copyPoints.find((p) => p.x1 === currentPoint.x2 && p.y1 === currentPoint.y2) - resultPoints.push(nextPoint) - currentPoint = nextPoint - }) + const nextPoint = copyPoints.find((p) => p.x2 === currentPoint.x && p.y2 === currentPoint.y) + resultPoints.push(nextPoint) + currentPoint = nextPoint + }) + break + } + case 'bottom': { + copyPoints.forEach((point, index) => { + if (index === startIndex) return + + const nextPoint = copyPoints.find((p) => p.x1 === currentPoint.x2 && p.y1 === currentPoint.y2) + resultPoints.push(nextPoint) + currentPoint = nextPoint + }) + break + } + } return resultPoints.map((point) => { return { x: point.x, y: point.y }