Add existing to tracked
This commit is contained in:
+70
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 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.
|
||||
if (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;
|
||||
Reference in New Issue
Block a user