diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index f2b38aa6..004f03db 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -208,7 +208,7 @@ export default function Roof2() { ] if (canvas) { - const polygon = new QPolygon(type2, { + const polygon = new QPolygon(eightPoint, { fill: 'transparent', stroke: 'black', strokeWidth: 1, diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 2cb3e97f..072f7bab 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -629,3 +629,23 @@ export function calculateDistance(point, line) { function calculateDistancePoint(point1, point2) { return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)) } + +/** + * {x, y} 형태의 배열을 받아 중복된 점을 제거하는 함수 + * @param points + * @returns {*[]} + */ +export function removeDuplicatePoints(points) { + const uniquePoints = [] + const seen = new Set() + + points.forEach((point) => { + const identifier = `${point.x}:${point.y}` + if (!seen.has(identifier)) { + seen.add(identifier) + uniquePoints.push(point) + } + }) + + return uniquePoints +} diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index ab4a276c..e683e4be 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -1,7 +1,7 @@ import { fabric } from 'fabric' import QPolygon from '@/components/fabric/QPolygon' import { QLine } from '@/components/fabric/QLine' -import { calculateIntersection, calculateIntersection2, distanceBetweenPoints, findIntersection1 } from '@/util/canvas-util' +import { calculateIntersection, calculateIntersection2, distanceBetweenPoints, findIntersection1, removeDuplicatePoints } from '@/util/canvas-util' export const defineQPloygon = () => { fabric.QPolygon = fabric.util.createClass(fabric.Group, {}) @@ -123,8 +123,8 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { let previousIndex = index === 0 ? polygon.lines.length - 1 : index - 1 const maxLength = Math.max(polygon.lines[index].length, polygon.lines[previousIndex].length) - newX2 = Math.floor(x1 + (maxLength / 2 + polygon.points.length * 20) * Math.cos(angle)) - newY2 = Math.floor(y1 + (maxLength / 2 + polygon.points.length * 20) * Math.sin(angle)) + newX2 = Math.floor(x1 + (maxLength / 2 + polygon.points.length * 10) * Math.cos(angle)) + newY2 = Math.floor(y1 + (maxLength / 2 + polygon.points.length * 10) * Math.sin(angle)) const line = new QLine([x1, y1, newX2, newY2], { fontSize: polygon.fontSize, @@ -135,7 +135,6 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { polygon.canvas.add(line) helpLines.push(line) polygon.canvas.renderAll() - debugger }) helpLines.forEach((line, index) => { @@ -186,22 +185,14 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { // 안만나는 선들 const notInterSectionLines = helpLines.filter((line) => !line.isAlreadyInterSection) const ridgeEndPoints = [] - const interSectionPoints = [] + let interSectionPoints = [] notInterSectionLines.forEach((line, index) => { let subCenterLines - if (maxHorizontalLineLength > maxVerticalLineLength) { - if (Math.abs(line.degree) < 90) { - subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal') - } else { - subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical') - } + if (Math.abs(line.degree) < 90) { + subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical') } else { - if (Math.abs(line.degree) < 90) { - subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'vertical') - } else { - subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal') - } + subCenterLines = centerLines.filter((centerLine) => centerLine.direction === 'horizontal') } centerLines.forEach((centerLine) => { @@ -212,33 +203,62 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { } ridgeStartPoints.forEach((point) => { - if (Math.abs(interSectionPoint.x - point.x) <= 2 || Math.abs(interSectionPoint.y - point.y) <= 2) { - line.interSectionPoints.push(interSectionPoint) - interSectionPoints.push(interSectionPoint) + line.interSectionPoints.push(interSectionPoint) + interSectionPoints.push(interSectionPoint) - const newLine = new QLine([line.x1, line.y1, interSectionPoint.x, interSectionPoint.y], { - stroke: 'black', - fontSize: polygon.fontSize, - }) + const newLine = new QLine([line.x1, line.y1, interSectionPoint.x, interSectionPoint.y], { + stroke: 'black', + fontSize: polygon.fontSize, + }) - const circle = new fabric.Circle({ - radius: 3, - fill: 'blue', - left: interSectionPoint.x - 3, - top: interSectionPoint.y - 3, - }) - polygon.canvas.add(circle) - polygon.canvas.add(newLine) + const circle = new fabric.Circle({ + radius: 3, + fill: 'blue', + left: interSectionPoint.x - 3, + top: interSectionPoint.y - 3, + }) + polygon.canvas.add(circle) + polygon.canvas.add(newLine) - polygon.canvas.remove(line) + polygon.canvas.remove(line) - line.set({ isAlreadyInterSection: true }) - } + line.set({ isAlreadyInterSection: true }) }) }) }) - ridgeStartPoints.forEach((point, index) => { + interSectionPoints = removeDuplicatePoints(interSectionPoints) + + const startRidgePoint = ridgeStartPoints[0] + + const endRidgePoint = ridgeStartPoints[ridgeStartPoints.length - 1] + + let step = 0 + + while (true) { + if (step % 2 === 0) { + const nextPoint = interSectionPoints.find((point) => point.x === startRidgePoint.x || point.y === startRidgePoint.y) + + if (nextPoint) { + const ridge = new QLine([startRidgePoint.x, startRidgePoint.y, nextPoint.x, nextPoint.y], { + stroke: 'green', + fontSize: polygon.fontSize, + }) + polygon.canvas.add(ridge) + polygon.canvas.renderAll() + } + + console.log('nextPoint', nextPoint) + console.log('startRidgePoint', startRidgePoint) + } else { + } + + step++ + + break + } + + /*ridgeStartPoints.forEach((point, index) => { for (let i = index + 1; i < ridgeStartPoints.length; i++) { const currentPoint = ridgeStartPoints[index] const nextPoint = ridgeStartPoints[i] @@ -253,9 +273,9 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { break } } - }) + })*/ - ridgeStartPoints.forEach((point, index) => { + /*ridgeStartPoints.forEach((point, index) => { let arrivalPoint let distance = Infinity let startPoint @@ -285,11 +305,11 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { ridgeEndPoints.push(arrivalPoint) polygon.canvas.add(ridge) polygon.canvas.add(helpLine) - polygon.canvas.remove(line) + // polygon.canvas.remove(line) polygon.canvas.renderAll() debugger } - }) + })*/ /*for (let i = 0; i < ridgeEndPoints.length; i = i + 2) { const currentRidgeEndPoint = ridgeEndPoints[i] @@ -301,7 +321,6 @@ export const drawHelpLineInHexagon2 = (polygon, chon) => { polygon.canvas.add(ridgeConnectLine) polygon.canvas.renderAll() - debugger }*/ }