added rounded buttons
This commit is contained in:
parent
606232d1d1
commit
851fd050a7
|
@ -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
9
src/index.d.ts
vendored
Normal 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
|
||||
}
|
||||
}
|
39
src/main.ts
39
src/main.ts
|
@ -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();
|
Loading…
Reference in New Issue
Block a user