added rounded buttons
This commit is contained in:
parent
606232d1d1
commit
851fd050a7
|
@ -12,6 +12,8 @@ export default class UIElement extends CanvasNode{
|
||||||
fontSize: number;
|
fontSize: number;
|
||||||
hAlign: string;
|
hAlign: string;
|
||||||
vAlign: string;
|
vAlign: string;
|
||||||
|
borderRadius: number;
|
||||||
|
borderWidth: number;
|
||||||
|
|
||||||
// EventAttributes
|
// EventAttributes
|
||||||
onClick: Function;
|
onClick: Function;
|
||||||
|
@ -36,6 +38,8 @@ export default class UIElement extends CanvasNode{
|
||||||
this.fontSize = 30;
|
this.fontSize = 30;
|
||||||
this.hAlign = "center";
|
this.hAlign = "center";
|
||||||
this.vAlign = "center";
|
this.vAlign = "center";
|
||||||
|
this.borderRadius = 5;
|
||||||
|
this.borderWidth = 1;
|
||||||
|
|
||||||
this.onClick = null;
|
this.onClick = null;
|
||||||
this.onClickEventId = null;
|
this.onClickEventId = null;
|
||||||
|
@ -143,6 +147,10 @@ export default class UIElement extends CanvasNode{
|
||||||
return this.backgroundColor.toStringRGBA();
|
return this.backgroundColor.toStringRGBA();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected calculateBorderColor(): string {
|
||||||
|
return this.borderColor.toStringRGBA();
|
||||||
|
}
|
||||||
|
|
||||||
protected calculateTextColor(): string {
|
protected calculateTextColor(): string {
|
||||||
return this.textColor.toStringRGBA();
|
return this.textColor.toStringRGBA();
|
||||||
}
|
}
|
||||||
|
@ -152,8 +160,12 @@ export default class UIElement extends CanvasNode{
|
||||||
let offset = this.calculateOffset(ctx);
|
let offset = this.calculateOffset(ctx);
|
||||||
|
|
||||||
ctx.fillStyle = this.calculateBackgroundColor();
|
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.fillStyle = this.calculateTextColor();
|
||||||
ctx.fillText(this.text, this.position.x + offset.x - origin.x, this.position.y + offset.y - origin.y);
|
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 ColoredCircle from "./Nodes/ColoredCircle";
|
||||||
import Color from "./Utils/Color";
|
import Color from "./Utils/Color";
|
||||||
import Button from "./Nodes/UIElements/Button";
|
import Button from "./Nodes/UIElements/Button";
|
||||||
|
import {} from "./index";
|
||||||
|
|
||||||
function main(){
|
function main(){
|
||||||
// Create the game object
|
// Create the game object
|
||||||
|
@ -100,4 +101,42 @@ function main(){
|
||||||
game.start();
|
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();
|
main();
|
Loading…
Reference in New Issue
Block a user