diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 699c7182..b5978bfb 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -126,16 +126,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 @@ -168,38 +172,46 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { 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) } } diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index c8aeafe2..75bf9439 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -383,7 +383,7 @@ 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 },