75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
|
|
export default class DrawHexagon {
|
|
constructor(settings) {
|
|
this.flatTopCornerX = [];
|
|
this.flatTopCornerY = [];
|
|
this.pointyTopCornerX = [];
|
|
this.pointyTopCornerY = [];
|
|
|
|
// dice dots, 0,0 is center
|
|
// TODO: if pointy: [0].concat(flatTop), if flat: [0].concat(pointy)
|
|
// this.hexDotX = [0];
|
|
// this.hexDotY = [0];
|
|
|
|
let hexSides = 6;
|
|
let hexSlices = 24;
|
|
for (let hexSlice = 0; hexSlice < hexSlices; hexSlice++) {
|
|
let x = parseInt(Math.cos(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
|
|
let y = parseInt(Math.sin(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
|
|
|
|
if ((hexSlice % 4) === 0) {
|
|
let cur = hexSlice / 4;
|
|
this.flatTopCornerX[cur] = x;
|
|
this.flatTopCornerY[cur] = y;
|
|
}
|
|
|
|
if (((hexSlice-2) % 4) === 0) {
|
|
let cur = (hexSlice-2) / 4;
|
|
this.pointyTopCornerX[cur] = x;
|
|
this.pointyTopCornerY[cur] = y;
|
|
}
|
|
}
|
|
}
|
|
|
|
outline(context, cell) {
|
|
let x = cell.x;
|
|
let y = cell.y;
|
|
let scale = cell.scale;
|
|
let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
|
|
let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
|
|
|
|
context.beginPath();
|
|
context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
|
|
context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
|
|
context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
|
|
context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
|
|
context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
|
|
context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
|
|
context.closePath();
|
|
|
|
context.lineWidth = cell.width;
|
|
context.strokeStyle = cell.getColor();
|
|
context.stroke();
|
|
}
|
|
|
|
filled(context, cell) {
|
|
let x = cell.x;
|
|
let y = cell.y;
|
|
let scale = cell.scale;
|
|
let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
|
|
let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
|
|
|
|
context.beginPath();
|
|
context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
|
|
context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
|
|
context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
|
|
context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
|
|
context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
|
|
context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
|
|
|
|
context.fillStyle = cell.getColor();
|
|
context.fill();
|
|
}
|
|
}
|
|
|