I Try to reproduce an exagone fill by small alveolus. I try in pure CSS but I failed. I look on menu like that and see translation in css. But this is good if u have a small and predictable alveolus.
I try with javascript
<html>
<head>
<style>
html {
background-color: yellow;
}
#honeypond {
width: 300px;
height: 300px; /* Adjust according to the desired height */
background-color: #FFF;
position: relative;
overflow: hidden; /* Clip the contents to the hexagonal shape */
margin: 0 auto; /* Center the container horizontally */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#honeypond::before,
#honeypond::after {
content: "";
display: table;
clear: both;
}
.alveolus {
background-color: transparent;
position: absolute;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
cursor: pointer;
}
.alveolus:hover {
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const honeypond = document.getElementById("honeypond");
const canvas = document.getElementById("honey-canvas");
const ctx = canvas.getContext("2d");
const alveolSide = 30;
const myarr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var maxColumn = honeypond.offsetWidth / alveolSide; var middlecolumn = maxColumn / 2;
var y = 0; var idxcol = 0; var row = 0;
myarr.forEach(function (val) {
var xTopRow = row % 2 === 0 ? (honeypond.offsetWidth - alveolSide) / 2 : honeypond.offsetWidth / 2;//decale pour imbriquer
var x = idxcol <= middlecolumn ? xTopRow - (middlecolumn - idxcol - 1) * alveolSide : xTopRow + (idxcol - middlecolumn) * alveolSide;
while (!isVisibleAlveol(ctx, x, y, alveolSide) && y <= honeypond.offsetHeight) {
if (idxcol < maxColumn) { idxcol++; }
else {
y += alveolSide * 0.75; row++; idxcol = 0;
xTopRow = row % 2 === 0 ? (honeypond.offsetWidth - alveolSide) / 2 : honeypond.offsetWidth / 2;
}
x = idxcol <= middlecolumn ? xTopRow - (middlecolumn - idxcol - 1) * alveolSide : xTopRow + (idxcol - middlecolumn) * alveolSide;
}
if (y <= honeypond.offsetHeight) {
const Myalveolus = document.createElement("div");
Myalveolus.classList.add("alveolus");
Myalveolus.style.backgroundColor = "red";
Myalveolus.style.width = alveolSide + "px";
Myalveolus.style.height = alveolSide + "px";
Myalveolus.style.left = x + "px";
Myalveolus.style.top = y + "px";
honeypond.appendChild(Myalveolus);
idxcol++;
}
});
const Myalveolus = document.createElement("div");
Myalveolus.classList.add("alveolus");
Myalveolus.style.backgroundColor = "blue";
Myalveolus.style.width = alveolSide + "px";
Myalveolus.style.height = alveolSide + "px";
Myalveolus.style.left = "135px";
Myalveolus.style.top = "0";
honeypond.appendChild(Myalveolus);
});
function isVisibleAlveol(ctx, x, y, alveolSide) {
var isInsideHexagon = false; var radius = alveolSide / 2 //Math.sqrt(Math.pow(alveolSide / 2, 2) - Math.pow(alveolSide / 4, 2));
var hexagonVertices = calculateHexagonVertices(x + alveolSide / 2, y + alveolSide / 2, radius);
hexagonVertices.forEach(function (point) {
isInsideHexagon = isInsideHexagon || ctx.isPointInPath(point.x, point.y);
});
return isInsideHexagon;
}
function calculateHexagonVertices(cx, cy, r) {
const vertices = [];
for (let i = 0; i < 6; i++) {
const angle = Math.PI / 6 + (Math.PI / 3 * i); // angle en radian : 30 + 60*i
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
vertices.push({ x, y });
}
return vertices;
}
</script>
</head>
<body>
<div id="honeypond">
<canvas id="honey-canvas" width="300" height="300" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);"></canvas>
</div>
</body>
</html>
But ctx.isPointInPath(point.x, point.y) return always false… I control my calculateHexagonVertices, coordinates seem good. I put one alveolus in the end (blue) coordinates returned by calculateHexagonVertices are 162.99/22.5 – 150/30 – 137/22.5 – 137/7.5 – 150/0 – 162.99/7.5. Normally all are inside canvas.
What I forget or not understand?
Thanks for your help
I generate
3