You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
3 years ago
|
export class BoxDrawer{
|
||
|
|
|
||
|
|
private canvas: any = null;
|
||
|
|
private canvasContext: any = null;
|
||
|
|
|
||
|
|
private readonly weight: number = null;
|
||
|
|
private readonly height: number = null;
|
||
|
|
private readonly paddingLeft: number = 10;
|
||
|
|
private readonly paddingRight: number = 10;
|
||
|
|
private readonly paddingTop: number = 5;
|
||
|
|
private readonly paddingBottom: number = 5;
|
||
|
|
private readonly scaleLine: number = 4;
|
||
|
|
|
||
|
|
constructor(weight: number, height: number) {
|
||
|
|
this.weight = weight;
|
||
|
|
this.height = height;
|
||
|
|
|
||
|
|
this.init();
|
||
|
|
// this.drawCoordinate();
|
||
|
|
console.log(this.canvas.toDataURL());
|
||
|
|
}
|
||
|
|
|
||
|
|
private init(): void{
|
||
|
|
// 创建画布
|
||
|
|
this.canvas = document.createElement('canvas');
|
||
|
|
this.canvas.weight = this.weight;
|
||
|
|
this.canvas.height = this.height;
|
||
|
|
|
||
|
|
this.canvasContext = this.canvas.getContext('2d');
|
||
|
|
}
|
||
|
|
|
||
|
|
private drawCoordinate(): void{
|
||
|
|
this.drawBorder();
|
||
|
|
}
|
||
|
|
|
||
|
|
private drawBorder(): void{
|
||
|
|
const x = this.scaleLine + this.paddingLeft;
|
||
|
|
const y = this.scaleLine + this.paddingTop;
|
||
|
|
const _x = this.weight - this.scaleLine - this.paddingRight;
|
||
|
|
const _y = this.height - this.scaleLine - this.paddingBottom;
|
||
|
|
this.canvasContext.beginPath();
|
||
|
|
this.canvasContext.lineWidth="6";
|
||
|
|
this.canvasContext.strokeStyle="red";
|
||
|
|
this.canvasContext.rect(x, y, _x - x, _y - y);
|
||
|
|
this.canvasContext.stroke();
|
||
|
|
}
|
||
|
|
}
|