109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
/**
|
|
* Utility class for drawing canvas shapes.
|
|
*/
|
|
const CanvasUtil = {
|
|
|
|
/**
|
|
* Draws a round rectangle with a glow. The glowWidth indicates the depth
|
|
* of the glow.
|
|
*
|
|
* @param drawContext the context of the canvas to draw to
|
|
* @param x the x coordinate of the round rectangle
|
|
* @param y the y coordinate of the round rectangle
|
|
* @param w the width of the round rectangle
|
|
* @param h the height of the round rectangle
|
|
* @param glowColor the color of the glow
|
|
* @param glowWidth the width of the glow
|
|
*/
|
|
drawRoundRectGlow (drawContext, x, y, w, h, r, glowColor, glowWidth) {
|
|
|
|
// Save the previous state of the context.
|
|
drawContext.save();
|
|
|
|
if (w < 2 * r) r = w / 2;
|
|
if (h < 2 * r) r = h / 2;
|
|
|
|
// Draw a round rectangle.
|
|
drawContext.beginPath();
|
|
drawContext.moveTo(x+r, y);
|
|
drawContext.arcTo(x+w, y, x+w, y+h, r);
|
|
drawContext.arcTo(x+w, y+h, x, y+h, r);
|
|
drawContext.arcTo(x, y+h, x, y, r);
|
|
drawContext.arcTo(x, y, x+w, y, r);
|
|
drawContext.closePath();
|
|
|
|
// Add a shadow around the rectangle
|
|
drawContext.shadowColor = glowColor;
|
|
drawContext.shadowBlur = glowWidth;
|
|
drawContext.shadowOffsetX = 0;
|
|
drawContext.shadowOffsetY = 0;
|
|
|
|
// Fill the shape.
|
|
drawContext.fill();
|
|
|
|
drawContext.save();
|
|
|
|
drawContext.restore();
|
|
|
|
// 1) Uncomment this line to use Composite Operation, which is doing the
|
|
// same as the clip function below and is also antialiasing the round
|
|
// border, but is said to be less fast performance wise.
|
|
|
|
// drawContext.globalCompositeOperation='destination-out';
|
|
|
|
drawContext.beginPath();
|
|
drawContext.moveTo(x+r, y);
|
|
drawContext.arcTo(x+w, y, x+w, y+h, r);
|
|
drawContext.arcTo(x+w, y+h, x, y+h, r);
|
|
drawContext.arcTo(x, y+h, x, y, r);
|
|
drawContext.arcTo(x, y, x+w, y, r);
|
|
drawContext.closePath();
|
|
|
|
// 2) Uncomment this line to use Composite Operation, which is doing the
|
|
// same as the clip function below and is also antialiasing the round
|
|
// border, but is said to be less fast performance wise.
|
|
|
|
// drawContext.fill();
|
|
|
|
// Comment these two lines if choosing to do the same with composite
|
|
// operation above 1 and 2.
|
|
drawContext.clip();
|
|
drawContext.clearRect(0, 0, 277, 200);
|
|
|
|
// Restore the previous context state.
|
|
drawContext.restore();
|
|
},
|
|
|
|
/**
|
|
* Clones the given canvas.
|
|
*
|
|
* @return the new cloned canvas.
|
|
*/
|
|
cloneCanvas (oldCanvas) {
|
|
/*
|
|
* FIXME Testing has shown that oldCanvas may not exist. In such a case,
|
|
* the method CanvasUtil.cloneCanvas may throw an error. Since audio
|
|
* levels are frequently updated, the errors have been observed to pile
|
|
* into the console, strain the CPU.
|
|
*/
|
|
if (!oldCanvas)
|
|
return oldCanvas;
|
|
|
|
//create a new canvas
|
|
var newCanvas = document.createElement('canvas');
|
|
var context = newCanvas.getContext('2d');
|
|
|
|
//set dimensions
|
|
newCanvas.width = oldCanvas.width;
|
|
newCanvas.height = oldCanvas.height;
|
|
|
|
//apply the old canvas to the new one
|
|
context.drawImage(oldCanvas, 0, 0);
|
|
|
|
//return the new canvas
|
|
return newCanvas;
|
|
}
|
|
};
|
|
|
|
export default CanvasUtil;
|