added rounded buttons

This commit is contained in:
Joe Weaver 2020-08-11 19:55:05 -04:00
parent 606232d1d1
commit 851fd050a7
3 changed files with 61 additions and 1 deletions

View File

@ -12,6 +12,8 @@ export default class UIElement extends CanvasNode{
fontSize: number;
hAlign: string;
vAlign: string;
borderRadius: number;
borderWidth: number;
// EventAttributes
onClick: Function;
@ -36,6 +38,8 @@ export default class UIElement extends CanvasNode{
this.fontSize = 30;
this.hAlign = "center";
this.vAlign = "center";
this.borderRadius = 5;
this.borderWidth = 1;
this.onClick = null;
this.onClickEventId = null;
@ -143,6 +147,10 @@ export default class UIElement extends CanvasNode{
return this.backgroundColor.toStringRGBA();
}
protected calculateBorderColor(): string {
return this.borderColor.toStringRGBA();
}
protected calculateTextColor(): string {
return this.textColor.toStringRGBA();
}
@ -152,7 +160,11 @@ export default class UIElement extends CanvasNode{
let offset = this.calculateOffset(ctx);
ctx.fillStyle = this.calculateBackgroundColor();
ctx.fillRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y);
ctx.fillRoundedRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y, this.borderRadius);
ctx.strokeStyle = this.calculateBorderColor();
ctx.lineWidth = this.borderWidth;
ctx.strokeRoundedRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y, this.borderRadius);
ctx.fillStyle = this.calculateTextColor();
ctx.fillText(this.text, this.position.x + offset.x - origin.x, this.position.y + offset.y - origin.y);

9
src/index.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
export {};
declare global {
interface CanvasRenderingContext2D {
roundedRect(x: number, y: number, w: number, h: number, r: number): void
strokeRoundedRect(x: number, y: number, w: number, h: number, r: number): void
fillRoundedRect(x: number, y: number, w: number, h: number, r: number): void
}
}

View File

@ -5,6 +5,7 @@ import UIElement from "./Nodes/UIElement";
import ColoredCircle from "./Nodes/ColoredCircle";
import Color from "./Utils/Color";
import Button from "./Nodes/UIElements/Button";
import {} from "./index";
function main(){
// Create the game object
@ -100,4 +101,42 @@ function main(){
game.start();
}
CanvasRenderingContext2D.prototype.roundedRect = function(x: number, y: number, w: number, h: number, r: number): void {
// Clamp the radius between 0 and the min of the width or height
if(r < 0) r = 0;
if(r > Math.min(w, h)) r = Math.min(w, h);
// Draw the rounded rect
this.beginPath();
// Top
this.moveTo(x + r, y);
this.lineTo(x + w - r, y);
this.arcTo(x + w, y, x + w, y + r, r);
// Right
this.lineTo(x + w, y + h - r);
this.arcTo(x + w, y + h, x + w - r, y + h, r);
// Bottom
this.lineTo(x + r, y + h);
this.arcTo(x, y + h, x, y + h - r, r);
// Left
this.lineTo(x, y + r);
this.arcTo(x, y, x + r, y, r)
this.closePath();
}
CanvasRenderingContext2D.prototype.strokeRoundedRect = function(x, y, w, h, r){
this.roundedRect(x, y, w, h, r);
this.stroke();
}
CanvasRenderingContext2D.prototype.fillRoundedRect = function(x, y, w, h, r){
this.roundedRect(x, y, w, h, r);
this.fill();
}
main();