96 lines
1.8 KiB
JavaScript
96 lines
1.8 KiB
JavaScript
class BBTimelineCanvas {
|
|
constructor(parentEl, el) {
|
|
const a = this;
|
|
|
|
a.Parent = parentEl;
|
|
a.Container = el;
|
|
a.CTX = a.Container.getContext("2d");
|
|
|
|
a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };
|
|
|
|
a.initialiseComponents();
|
|
}
|
|
|
|
initialiseComponents() {
|
|
const a = this;
|
|
|
|
a.Container.style.width = a.Parent.Size.W + "px";
|
|
a.Container.style.height = a.Parent.Size.H + "px";
|
|
a.Container.style.position = 'absolute';
|
|
a.Container.style.border = 'none';
|
|
|
|
a.CTX.canvas.width = a.Parent.Size.W;
|
|
a.CTX.canvas.height = a.Parent.Size.H;
|
|
|
|
a.Clear();
|
|
}
|
|
|
|
|
|
Clear() {
|
|
const a = this;
|
|
|
|
a.CTX.clearRect(0, 0, a.CTX.canvas.width, a.CTX.canvas.height);
|
|
}
|
|
|
|
Invalidate() {
|
|
// placeholder
|
|
}
|
|
|
|
|
|
drawText(x, y, label, font, foreColour, align) {
|
|
const a = this;
|
|
|
|
a.CTX.font = font;
|
|
a.CTX.fillStyle = foreColour;
|
|
|
|
const size = a.measureText(font, label);
|
|
|
|
switch (align) {
|
|
case "center":
|
|
x = (x - size.OffsetLeft);
|
|
break;
|
|
case "right":
|
|
x = (x - size.Width);
|
|
break;
|
|
case "left":
|
|
default:
|
|
// do nothing
|
|
break;
|
|
}
|
|
|
|
a.CTX.fillText(label, x, (y + size.Height));
|
|
|
|
return size;
|
|
}
|
|
|
|
drawRectangle(rectangle, colour) {
|
|
const a = this;
|
|
|
|
a.CTX.beginPath();
|
|
a.CTX.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
|
|
//a.ctx.fillStyle = 'yellow';
|
|
//a.ctx.fill();
|
|
a.CTX.lineWidth = 1;
|
|
a.CTX.strokeStyle = colour;
|
|
a.CTX.stroke();
|
|
}
|
|
|
|
half(value) {
|
|
return (value / 2);
|
|
}
|
|
|
|
measureText(font, value) {
|
|
const a = this;
|
|
|
|
a.CTX.font = font;
|
|
const size = a.CTX.measureText(value);
|
|
|
|
return {
|
|
Width: size.width,
|
|
Height: size.fontBoundingBoxAscent,
|
|
OffsetLeft: a.half(size.width),
|
|
OffsetTop: a.half(size.fontBoundingBoxAscent)
|
|
};
|
|
}
|
|
|
|
} |