헥사곤 그리드를 그리는데 질문이 있습니다.

Question

html canvas 를 활용하여 그리드를 그리고 있습니다.그리드 그리는것 자체는 구현했는데, 위에 표시한 것처럼 일부 edge를 '뚫어서'? 두 개 또는 그 이상의 영역이 합쳐진것처럼 표시하고 싶은데 잘 안되네요.. canvas 가 아니고 다른 라이브러리를 사용해도 좋으니 힌트를 부탁드립니다 ㅜㅜ

톰소여 · Accepted Answer

꼼수이긴 하는데 안그리면 됩니다. 그러면 안겹친 부분은 그리기 때문에 합쳐진 것처럼 보이게 됩니다.원 소스를 모르기 때문에 대략 감으로 코딩해보면..const canvas &#61; document.getElementById('hexagonCanvas'); const ctx &#61; canvas.getContext('2d'); const a &#61; 2 * Math.PI / 6; const r &#61; 50; const connectedPointsArray &#61; [ [[0, 0], [0, 1], [1, 1], [1, 2]], [[2, 2], [3, 3], [4, 3]], // Add more connected points as needed ]; function init() { drawGrid(canvas.width, canvas.height); } init(); function drawGrid(width, height) { let hexagonArray &#61; null; hexagonArray &#61; calcDrawGrid(width, height) ; let xindex &#61; 0; console.log(hexagonArray); for (let y &#61; r; y &#43; r * Math.sin(a) < height; y &#43;&#61; r * Math.sin(a)) { let yindex &#61; 0; for (let x &#61; r, j &#61; 0; x &#43; r * (1 &#43; Math.cos(a)) < width; x &#43;&#61; r * (1 &#43; Math.cos(a)), y &#43;&#61; (-1) ** j&#43;&#43; * r * Math.sin(a)) { drawHexagon(x, y, xindex, yindex); yindex&#61;yindex&#43;1; } xindex&#61;xindex&#43;1; } } function drawHexagon(x, y, xindex, yindex) { ctx.beginPath(); let isExisted &#61; false; for(let j&#61;0;j<connectedPointsArray.length;j&#43;&#43;){ for(let k&#61;0;k<connectedPointsArray[j].length;k&#43;&#43;){ let compArray &#61; connectedPointsArray[j][k]; if(compArray[0]&#61;&#61;xindex && compArray[1]&#61;&#61;yindex){ isExisted &#61; true; } } } if(isExisted){ ctx.strokeStyle &#61; 'red'; } else{ ctx.strokeStyle &#61; 'black'; } /**/ for (let i &#61; 0; i < 6; i&#43;&#43;) { if(isExisted){ //이동만 시키면 안그리기 때문에 합쳐진 걸로 보임.. 확인하려면 lineTo 로 바꾸면 빨간선으로 그림.. ctx.moveTo(x &#43; r * Math.cos(a * i), y &#43; r * Math.sin(a * i)); } else{ ctx.lineTo(x &#43; r * Math.cos(a * i), y &#43; r * Math.sin(a * i)); } } ctx.closePath(); ctx.stroke(); } function calcDrawGrid(width, height) { let hexagonArray &#61; []; let xindex &#61; 0; for (let y &#61; r; y &#43; r * Math.sin(a) < height; y &#43;&#61; r * Math.sin(a)) { let yindex &#61; 0; hexagonArray[xindex] &#61; []; for (let x &#61; r, j &#61; 0; x &#43; r * (1 &#43; Math.cos(a)) < width; x &#43;&#61; r * (1 &#43; Math.cos(a)), y &#43;&#61; (-1) ** j&#43;&#43; * r * Math.sin(a)) { let vertices &#61; calculateHexagonVertices(x, y); yindex&#61;yindex&#43;1; hexagonArray[xindex].push(vertices); } xindex&#61;xindex&#43;1; } return hexagonArray; } function calculateHexagonVertices(x, y) { const vertices &#61; []; for (let i &#61; 0; i < 6; i&#43;&#43;) { const xPos &#61; x &#43; r * Math.cos(a * i); const yPos &#61; y &#43; r * Math.sin(a * i); vertices.push([xPos, yPos]); } return vertices; }와 같습니다.. 결과물은...또는가 됩니다.코드 상 오류가 있기는 한데 이해바랍니다 ^^;

헥사곤 그리드를 그리는데 질문이 있습니다.

1개의 답변

#canvas 목록