Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 111x 68x 68x 68x 68x 68x 68x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 68x 68x 68x 68x 68x 68x | /**
* Creates a {@link createBillboardPointCallback.CanvasFunction} that will create a canvas with a point.
*
* @param {number} centerAlpha The alpha of the center of the point. The value must be in the range [0.0, 1.0].
* @param {string} cssColor The CSS color string.
* @param {string} cssOutlineColor The CSS color of the point outline.
* @param {number} cssOutlineWidth The width of the outline in pixels.
* @param {number} pixelSize The size of the point in pixels.
* @return {createBillboardPointCallback.CanvasFunction} The function that will return a canvas with the point drawn on it.
*
* @private
*/
function createBillboardPointCallback(
centerAlpha,
cssColor,
cssOutlineColor,
cssOutlineWidth,
pixelSize,
) {
return function () {
const canvas = document.createElement("canvas");
const length = pixelSize + 2 * cssOutlineWidth;
canvas.height = canvas.width = length;
const context2D = canvas.getContext("2d");
context2D.clearRect(0, 0, length, length);
if (cssOutlineWidth !== 0) {
context2D.beginPath();
context2D.arc(length / 2, length / 2, length / 2, 0, 2 * Math.PI, true);
context2D.closePath();
context2D.fillStyle = cssOutlineColor;
context2D.fill();
// Punch a hole in the center if needed.
Eif (centerAlpha < 1.0) {
context2D.save();
context2D.globalCompositeOperation = "destination-out";
context2D.beginPath();
context2D.arc(
length / 2,
length / 2,
pixelSize / 2,
0,
2 * Math.PI,
true,
);
context2D.closePath();
context2D.fillStyle = "black";
context2D.fill();
context2D.restore();
}
}
context2D.beginPath();
context2D.arc(length / 2, length / 2, pixelSize / 2, 0, 2 * Math.PI, true);
context2D.closePath();
context2D.fillStyle = cssColor;
context2D.fill();
return canvas;
};
}
/**
* A function that returns a canvas containing an image of a point.
* @callback createBillboardPointCallback.CanvasFunction
* @returns {HTMLCanvasElement} The result of the calculation.
*/
export default createBillboardPointCallback;
|