diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 9d4da1f7..dfb67269 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -338,9 +338,58 @@ function findOrthogonalPoint(x1, y1, x2, y2, x3, y3, x4, y4) { export const sortedPoints = (points) => { const copyPoints = [...points] //points를 x,y좌표를 기준으로 정렬합니다. + copyPoints.sort((a, b) => { + if (a.x === b.x) { + return a.y - b.y + } + return a.x - b.x + }) - const idx = getStartIndexPoint(copyPoints) - return rearrangeArray(copyPoints, idx) + // 이때 copyPoints를 순회하며 최초엔 x값을 비교하여 같은 점을 찾는다. 이때 이 점이 2번째 점이 된다. + // 그 다음점은 2번째 점과 y값이 같은 점이 된다. + // 또 그다음 점은 3번째 점과 x값이 같은 점이 된다. + // 이를 반복하여 copyPoints를 재배열한다. + const resultPoints = [copyPoints[0]] + let index = 1 + let currentPoint = { ...copyPoints[0] } + copyPoints.splice(0, 1) + while (index < points.length) { + if (index === points.length - 1) { + resultPoints.push(copyPoints[0]) + index++ + break + } else if (index % 2 === 0) { + // 짝수번째는 y값이 같은 점을 찾는다. + for (let i = 0; i < copyPoints.length; i++) { + // y값이 같은 point가 많은 경우 그 중 x값이 가장 큰걸 찾는다. + const temp = copyPoints.filter((point) => point.y === currentPoint.y) + // temp중 x값이 가장 가까운 값 + + const min = temp.reduce((prev, current) => (Math.abs(current.x - currentPoint.x) <= Math.abs(prev.x - currentPoint.x) ? current : prev)) + + resultPoints.push(min) + currentPoint = min + copyPoints.splice(copyPoints.indexOf(min), 1) + index++ + break + } + } else { + // 홀수번째는 x값이 같은 점을 찾는다. + for (let i = 0; i < copyPoints.length; i++) { + // x값이 같은 point가 많은 경우 그 중 y값이 가장 큰걸 찾는다. + const temp = copyPoints.filter((point) => point.x === currentPoint.x) + // temp중 y값이 가장 가까운 값 + const min = temp.reduce((prev, current) => (Math.abs(current.y - currentPoint.y) <= Math.abs(prev.y - currentPoint.y) ? current : prev)) + + resultPoints.push(min) + currentPoint = min + copyPoints.splice(copyPoints.indexOf(min), 1) + index++ + break + } + } + } + return resultPoints } /**