From e0ba5e5abb9a18e0b2009d14a43d55f71799dbb0 Mon Sep 17 00:00:00 2001 From: ysCha Date: Tue, 3 Mar 2026 20:59:24 +0900 Subject: [PATCH] =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- snippet.js | 272 ---------------------------------------------------- snippet2.js | 272 ---------------------------------------------------- 2 files changed, 544 deletions(-) delete mode 100644 snippet.js delete mode 100644 snippet2.js diff --git a/snippet.js b/snippet.js deleted file mode 100644 index feed1e5f..00000000 --- a/snippet.js +++ /dev/null @@ -1,272 +0,0 @@ -/** - * Renders an edge result (polygon) on the canvas - * @param {Object} res - Edge result object containing polygon vertices - * @param wallLineStart - * @param wallLineEnd - * @param {Array} res.Polygon - Array of vertex objects with X,Y coordinates - */ - const drawEdgeResult = (res, wallLineStart, wallLineEnd) => { - if (!ctx || res.Polygon.length < 2) return; - - // 삼각형 polygon인지 확인 (3개의 점으로 구성) - const isTriangle = res.Polygon.length === 3; - - if (isTriangle) { - // 삼각형인 경우 직선을 그리기 - drawStraightLineFromSkeleton(res); - return; - } - - const skelP0 = { x: res.Polygon[0].X, y: res.Polygon[0].Y }; - const skelP1 = { x: res.Polygon[1].X, y: res.Polygon[1].Y }; - - // Helper function to check if a point is on a line segment - const isPointOnSegment = (p, q, r) => { - return ( - q.x <= Math.max(p.x, r.x) && - q.x >= Math.min(p.x, r.x) && - q.y <= Math.max(p.y, r.y) && - q.y >= Math.min(p.y, r.y) - ); - }; - - // Helper function to check for collinearity - const areCollinear = (p, q, r) => { - const val = (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y); - return Math.abs(val) < 1e-9; // Use a small tolerance for float comparison - }; - - let isOverlapping = false; - for (let i = 0; i < points.length; i++) { - const polyP1 = { x: points[i][0], y: points[i][1] }; - const polyP2 = { x: points[(i + 1) % points.length][0], y: points[(i + 1) % points.length][1] }; - - // Check if the skeleton edge is collinear with the polygon edge - // and if the skeleton points lie on the polygon edge segment. - if (areCollinear(polyP1, polyP2, skelP0) && - areCollinear(polyP1, polyP2, skelP1) && - isPointOnSegment(polyP1, skelP0, polyP2) && - isPointOnSegment(polyP1, skelP1, polyP2)) { - isOverlapping = true; - break; - } - } - - const p0 = res.Polygon[0]; - const p1 = res.Polygon[1]; - const dx = p1.X - p0.X; - const dy = p1.Y - p0.Y; - const len = Math.hypot(dx, dy); - if (len === 0) return; - - // 정규화된 방향 벡터 계산 - const dirX = dx / len; - const dirY = dy / len; - - // First pass: Create a filled polygon (transparent fill) - ctx.globalAlpha = 0.2; // Fully transparent - ctx.beginPath(); - ctx.fillStyle = 'green'; - - // Start from first vertex - ctx.moveTo(res.Polygon[0].X, res.Polygon[0].Y); - // Draw lines to each subsequent vertex - for (const v of res.Polygon) { - ctx.lineTo(v.X, v.Y); - } - ctx.closePath(); - ctx.fill(); - - // Second pass: Draw the polygon outline - ctx.globalAlpha = 1; // Fully opaque - ctx.beginPath(); - ctx.strokeStyle = isOverlapping ? 'red' : '#3C78D8'; // Blue color - ctx.lineWidth = 3; // 3px line width - - // Redraw the same polygon shape - ctx.moveTo(res.Polygon[0].X, res.Polygon[0].Y); - for (const v of res.Polygon) { - const wX = wallLineStart.X; - const wY = wallLineStart.Y; - const wEndX = wallLineEnd.X; - const wEndY = wallLineEnd.Y; - console.log("1::", v.X, v.Y); - if ((v.X === wallLineStart.X && v.Y === wallLineEnd.Y) || (v.X === wallLineEnd.X && v.Y === wallLineStart.Y)) { - console.log(v.X, v.Y); - - }else{ - ctx.lineTo(v.X, v.Y); - } - - ctx.lineTo(v.X, v.Y); - } - ctx.closePath(); - ctx.stroke(); - }; - - /** - * 삼각형 polygon 대신 직선을 그리는 함수 - * @param {Object} res - Edge result object containing polygon vertices - */ - const drawStraightLineFromSkeleton = (res) => { - if (!ctx || res.Polygon.length !== 3) return; - - // 삼각형의 세 점 - const p1 = res.Polygon[0]; - const p2 = res.Polygon[1]; - const p3 = res.Polygon[2]; - - // 다각형의 경계에 있는 점들을 찾기 (원래 다각형의 변 위에 있는 점들) - const boundaryPoints = []; - const innerPoints = []; - - [p1, p2, p3].forEach(point => { - let isOnBoundary = false; - - // 원래 다각형의 각 변과 비교 - for (let i = 0; i < points.length; i++) { - const lineStart = points[i]; - const lineEnd = points[(i + 1) % points.length]; - - // 점이 이 변 위에 있는지 확인 - if (isPointOnLine(point, lineStart, lineEnd)) { - isOnBoundary = true; - break; - } - } - - if (isOnBoundary) { - boundaryPoints.push(point); - } else { - innerPoints.push(point); - } - }); - - // 경계점이 2개이고 내부점이 1개인 경우 (일반적인 삼각형 케이스) - if (boundaryPoints.length === 2 && innerPoints.length === 1) { - const innerPoint = innerPoints[0]; - - // 내부점에서 맞은편 경계까지의 직선을 그리기 - drawExtendedLine(innerPoint, boundaryPoints); - } - }; - - /** - * 점이 선분 위에 있는지 확인하는 함수 - */ - const isPointOnLine = (point, lineStart, lineEnd) => { - const tolerance = 1; // 허용 오차 - - // 점과 선분의 두 끝점 사이의 거리 합이 선분의 길이와 같은지 확인 - const d1 = Math.hypot(point.X - lineStart[0], point.Y - lineStart[1]); - const d2 = Math.hypot(point.X - lineEnd[0], point.Y - lineEnd[1]); - const lineLength = Math.hypot(lineEnd[0] - lineStart[0], lineEnd[1] - lineStart[1]); - - return Math.abs(d1 + d2 - lineLength) < tolerance; - }; - - /** - * 내부점에서 맞은편 경계까지 직선을 연장해서 그리는 함수 - */ - const drawExtendedLine = (innerPoint, boundaryPoints) => { - if (boundaryPoints.length !== 2) return; - - // 경계점들의 중점 계산 (삼각형의 밑변 중점) - const midPoint = { - X: (boundaryPoints[0].X + boundaryPoints[1].X) / 2, - Y: (boundaryPoints[0].Y + boundaryPoints[1].Y) / 2 - }; - - // 내부점에서 중점으로의 방향 벡터 계산 - const dirX = midPoint.X - innerPoint.X; - const dirY = midPoint.Y - innerPoint.Y; - const len = Math.hypot(dirX, dirY); - - if (len === 0) return; - - // 정규화된 방향 벡터 - const normalizedDirX = dirX / len; - const normalizedDirY = dirY / len; - - // 맞은편 경계와의 교점 찾기 - const intersectionPoint = findIntersectionWithBoundary(innerPoint, normalizedDirX, normalizedDirY); - - if (intersectionPoint) { - // 직선 그리기 - ctx.beginPath(); - ctx.strokeStyle = '#3C78D8'; // 파란색 - ctx.lineWidth = 3; - ctx.moveTo(innerPoint.X, innerPoint.Y); - ctx.lineTo(intersectionPoint.X, intersectionPoint.Y); - ctx.stroke(); - } - }; - - /** - * 점에서 특정 방향으로 다각형 경계와의 교점을 찾는 함수 - */ - const findIntersectionWithBoundary = (startPoint, dirX, dirY) => { - let closestIntersection = null; - let minDistance = Infinity; - - // 모든 다각형의 변과 교점 확인 - for (let i = 0; i < points.length; i++) { - const lineStart = points[i]; - const lineEnd = points[(i + 1) % points.length]; - - // 레이와 선분의 교점 계산 - const intersection = getLineIntersection( - startPoint, - { X: startPoint.X + dirX * 1000, Y: startPoint.Y + dirY * 1000 }, // 충분히 긴 레이 - { X: lineStart[0], Y: lineStart[1] }, - { X: lineEnd[0], Y: lineEnd[1] } - ); - - if (intersection) { - // 교점이 시작점에서 올바른 방향에 있는지 확인 - const toIntersection = { - X: intersection.X - startPoint.X, - Y: intersection.Y - startPoint.Y - }; - - // 내적으로 방향 확인 (양수면 같은 방향) - const dotProduct = toIntersection.X * dirX + toIntersection.Y * dirY; - - if (dotProduct > 0) { // 올바른 방향 - const distance = Math.hypot(toIntersection.X, toIntersection.Y); - if (distance < minDistance) { - minDistance = distance; - closestIntersection = intersection; - } - } - } - } - - return closestIntersection; - }; - - /** - * 두 선분의 교점을 계산하는 함수 - */ - const getLineIntersection = (p1, p2, p3, p4) => { - const x1 = p1.X, y1 = p1.Y; - const x2 = p2.X, y2 = p2.Y; - const x3 = p3.X, y3 = p3.Y; - const x4 = p4.X, y4 = p4.Y; - - const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); - if (Math.abs(denom) < 1e-10) return null; // 평행선 - - const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom; - const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom; - - // 두 번째 선분(다각형의 변) 위에 교점이 있는지 확인 - if (u >= 0 && u <= 1) { - return { - X: x1 + t * (x2 - x1), - Y: y1 + t * (y2 - y1) - }; - } - - return null; - }; diff --git a/snippet2.js b/snippet2.js deleted file mode 100644 index feed1e5f..00000000 --- a/snippet2.js +++ /dev/null @@ -1,272 +0,0 @@ -/** - * Renders an edge result (polygon) on the canvas - * @param {Object} res - Edge result object containing polygon vertices - * @param wallLineStart - * @param wallLineEnd - * @param {Array} res.Polygon - Array of vertex objects with X,Y coordinates - */ - const drawEdgeResult = (res, wallLineStart, wallLineEnd) => { - if (!ctx || res.Polygon.length < 2) return; - - // 삼각형 polygon인지 확인 (3개의 점으로 구성) - const isTriangle = res.Polygon.length === 3; - - if (isTriangle) { - // 삼각형인 경우 직선을 그리기 - drawStraightLineFromSkeleton(res); - return; - } - - const skelP0 = { x: res.Polygon[0].X, y: res.Polygon[0].Y }; - const skelP1 = { x: res.Polygon[1].X, y: res.Polygon[1].Y }; - - // Helper function to check if a point is on a line segment - const isPointOnSegment = (p, q, r) => { - return ( - q.x <= Math.max(p.x, r.x) && - q.x >= Math.min(p.x, r.x) && - q.y <= Math.max(p.y, r.y) && - q.y >= Math.min(p.y, r.y) - ); - }; - - // Helper function to check for collinearity - const areCollinear = (p, q, r) => { - const val = (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y); - return Math.abs(val) < 1e-9; // Use a small tolerance for float comparison - }; - - let isOverlapping = false; - for (let i = 0; i < points.length; i++) { - const polyP1 = { x: points[i][0], y: points[i][1] }; - const polyP2 = { x: points[(i + 1) % points.length][0], y: points[(i + 1) % points.length][1] }; - - // Check if the skeleton edge is collinear with the polygon edge - // and if the skeleton points lie on the polygon edge segment. - if (areCollinear(polyP1, polyP2, skelP0) && - areCollinear(polyP1, polyP2, skelP1) && - isPointOnSegment(polyP1, skelP0, polyP2) && - isPointOnSegment(polyP1, skelP1, polyP2)) { - isOverlapping = true; - break; - } - } - - const p0 = res.Polygon[0]; - const p1 = res.Polygon[1]; - const dx = p1.X - p0.X; - const dy = p1.Y - p0.Y; - const len = Math.hypot(dx, dy); - if (len === 0) return; - - // 정규화된 방향 벡터 계산 - const dirX = dx / len; - const dirY = dy / len; - - // First pass: Create a filled polygon (transparent fill) - ctx.globalAlpha = 0.2; // Fully transparent - ctx.beginPath(); - ctx.fillStyle = 'green'; - - // Start from first vertex - ctx.moveTo(res.Polygon[0].X, res.Polygon[0].Y); - // Draw lines to each subsequent vertex - for (const v of res.Polygon) { - ctx.lineTo(v.X, v.Y); - } - ctx.closePath(); - ctx.fill(); - - // Second pass: Draw the polygon outline - ctx.globalAlpha = 1; // Fully opaque - ctx.beginPath(); - ctx.strokeStyle = isOverlapping ? 'red' : '#3C78D8'; // Blue color - ctx.lineWidth = 3; // 3px line width - - // Redraw the same polygon shape - ctx.moveTo(res.Polygon[0].X, res.Polygon[0].Y); - for (const v of res.Polygon) { - const wX = wallLineStart.X; - const wY = wallLineStart.Y; - const wEndX = wallLineEnd.X; - const wEndY = wallLineEnd.Y; - console.log("1::", v.X, v.Y); - if ((v.X === wallLineStart.X && v.Y === wallLineEnd.Y) || (v.X === wallLineEnd.X && v.Y === wallLineStart.Y)) { - console.log(v.X, v.Y); - - }else{ - ctx.lineTo(v.X, v.Y); - } - - ctx.lineTo(v.X, v.Y); - } - ctx.closePath(); - ctx.stroke(); - }; - - /** - * 삼각형 polygon 대신 직선을 그리는 함수 - * @param {Object} res - Edge result object containing polygon vertices - */ - const drawStraightLineFromSkeleton = (res) => { - if (!ctx || res.Polygon.length !== 3) return; - - // 삼각형의 세 점 - const p1 = res.Polygon[0]; - const p2 = res.Polygon[1]; - const p3 = res.Polygon[2]; - - // 다각형의 경계에 있는 점들을 찾기 (원래 다각형의 변 위에 있는 점들) - const boundaryPoints = []; - const innerPoints = []; - - [p1, p2, p3].forEach(point => { - let isOnBoundary = false; - - // 원래 다각형의 각 변과 비교 - for (let i = 0; i < points.length; i++) { - const lineStart = points[i]; - const lineEnd = points[(i + 1) % points.length]; - - // 점이 이 변 위에 있는지 확인 - if (isPointOnLine(point, lineStart, lineEnd)) { - isOnBoundary = true; - break; - } - } - - if (isOnBoundary) { - boundaryPoints.push(point); - } else { - innerPoints.push(point); - } - }); - - // 경계점이 2개이고 내부점이 1개인 경우 (일반적인 삼각형 케이스) - if (boundaryPoints.length === 2 && innerPoints.length === 1) { - const innerPoint = innerPoints[0]; - - // 내부점에서 맞은편 경계까지의 직선을 그리기 - drawExtendedLine(innerPoint, boundaryPoints); - } - }; - - /** - * 점이 선분 위에 있는지 확인하는 함수 - */ - const isPointOnLine = (point, lineStart, lineEnd) => { - const tolerance = 1; // 허용 오차 - - // 점과 선분의 두 끝점 사이의 거리 합이 선분의 길이와 같은지 확인 - const d1 = Math.hypot(point.X - lineStart[0], point.Y - lineStart[1]); - const d2 = Math.hypot(point.X - lineEnd[0], point.Y - lineEnd[1]); - const lineLength = Math.hypot(lineEnd[0] - lineStart[0], lineEnd[1] - lineStart[1]); - - return Math.abs(d1 + d2 - lineLength) < tolerance; - }; - - /** - * 내부점에서 맞은편 경계까지 직선을 연장해서 그리는 함수 - */ - const drawExtendedLine = (innerPoint, boundaryPoints) => { - if (boundaryPoints.length !== 2) return; - - // 경계점들의 중점 계산 (삼각형의 밑변 중점) - const midPoint = { - X: (boundaryPoints[0].X + boundaryPoints[1].X) / 2, - Y: (boundaryPoints[0].Y + boundaryPoints[1].Y) / 2 - }; - - // 내부점에서 중점으로의 방향 벡터 계산 - const dirX = midPoint.X - innerPoint.X; - const dirY = midPoint.Y - innerPoint.Y; - const len = Math.hypot(dirX, dirY); - - if (len === 0) return; - - // 정규화된 방향 벡터 - const normalizedDirX = dirX / len; - const normalizedDirY = dirY / len; - - // 맞은편 경계와의 교점 찾기 - const intersectionPoint = findIntersectionWithBoundary(innerPoint, normalizedDirX, normalizedDirY); - - if (intersectionPoint) { - // 직선 그리기 - ctx.beginPath(); - ctx.strokeStyle = '#3C78D8'; // 파란색 - ctx.lineWidth = 3; - ctx.moveTo(innerPoint.X, innerPoint.Y); - ctx.lineTo(intersectionPoint.X, intersectionPoint.Y); - ctx.stroke(); - } - }; - - /** - * 점에서 특정 방향으로 다각형 경계와의 교점을 찾는 함수 - */ - const findIntersectionWithBoundary = (startPoint, dirX, dirY) => { - let closestIntersection = null; - let minDistance = Infinity; - - // 모든 다각형의 변과 교점 확인 - for (let i = 0; i < points.length; i++) { - const lineStart = points[i]; - const lineEnd = points[(i + 1) % points.length]; - - // 레이와 선분의 교점 계산 - const intersection = getLineIntersection( - startPoint, - { X: startPoint.X + dirX * 1000, Y: startPoint.Y + dirY * 1000 }, // 충분히 긴 레이 - { X: lineStart[0], Y: lineStart[1] }, - { X: lineEnd[0], Y: lineEnd[1] } - ); - - if (intersection) { - // 교점이 시작점에서 올바른 방향에 있는지 확인 - const toIntersection = { - X: intersection.X - startPoint.X, - Y: intersection.Y - startPoint.Y - }; - - // 내적으로 방향 확인 (양수면 같은 방향) - const dotProduct = toIntersection.X * dirX + toIntersection.Y * dirY; - - if (dotProduct > 0) { // 올바른 방향 - const distance = Math.hypot(toIntersection.X, toIntersection.Y); - if (distance < minDistance) { - minDistance = distance; - closestIntersection = intersection; - } - } - } - } - - return closestIntersection; - }; - - /** - * 두 선분의 교점을 계산하는 함수 - */ - const getLineIntersection = (p1, p2, p3, p4) => { - const x1 = p1.X, y1 = p1.Y; - const x2 = p2.X, y2 = p2.Y; - const x3 = p3.X, y3 = p3.Y; - const x4 = p4.X, y4 = p4.Y; - - const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); - if (Math.abs(denom) < 1e-10) return null; // 평행선 - - const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom; - const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom; - - // 두 번째 선분(다각형의 변) 위에 교점이 있는지 확인 - if (u >= 0 && u <= 1) { - return { - X: x1 + t * (x2 - x1), - Y: y1 + t * (y2 - y1) - }; - } - - return null; - }; -- 2.47.2