47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
import {getColor, invSqrt2, sqrt2} from './utils.js';
|
|
import {FLAT, POINTY} from './consts.js';
|
|
|
|
export default class DrawSquare {
|
|
constructor(settings) {
|
|
this.settings = Object.assign({}, settings);
|
|
|
|
this.squareX = [invSqrt2, invSqrt2, -invSqrt2, -invSqrt2];
|
|
this.squareY = [invSqrt2, -invSqrt2, -invSqrt2, invSqrt2];
|
|
this.diamondX = [1, 0, -1, 0, 0.5, -0.5];
|
|
this.diamondY = [0, -1, 0, 1, -0.5, 0.5];
|
|
}
|
|
|
|
fill(context, scale, x, y, cell) {
|
|
scale = scale * cell.scale;
|
|
let squareCornerX = cell.orientation === POINTY ? this.diamondX : this.squareX;
|
|
let squareCornerY = cell.orientation === POINTY ? this.diamondY : this.squareY;
|
|
|
|
context.beginPath();
|
|
context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
|
|
context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
|
|
context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
|
|
context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
|
|
|
|
context.fillStyle = getColor(cell.color);
|
|
context.fill();
|
|
}
|
|
|
|
outline(context, scale, x, y, cell) {
|
|
scale = scale * cell.scale;
|
|
let squareCornerX = cell.orientation === POINTY ? this.diamondX : this.squareX;
|
|
let squareCornerY = cell.orientation === POINTY ? this.diamondY : this.squareY;
|
|
|
|
context.beginPath();
|
|
context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
|
|
context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
|
|
context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
|
|
context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
|
|
context.closePath();
|
|
|
|
context.lineWidth = cell.width;
|
|
context.strokeStyle = getColor(cell.color);
|
|
context.stroke();
|
|
}
|
|
}
|
|
|