48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import Node from "./Node"
|
||
|
|
|
||
|
|
export default class ImageNode extends Node
|
||
|
|
{
|
||
|
|
public image? : CanvasImageSource;
|
||
|
|
public backgroundColor : string = "rgba(0,0,0,0)";
|
||
|
|
public constructor(){
|
||
|
|
super();
|
||
|
|
this.handleDrawBefore(()=>{
|
||
|
|
if(this.width == 0)
|
||
|
|
{
|
||
|
|
this.width = (this.image?.width || 0) as number;
|
||
|
|
this.height = (this.image?.height || 0) as number;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.handleDraw(function(ctx,area){
|
||
|
|
if(this.image && this.image.width)
|
||
|
|
{
|
||
|
|
ctx.context.fillStyle = this.backgroundColor;
|
||
|
|
ctx.context.fillRect(0,0,area.width,area.height)
|
||
|
|
ctx.context.drawImage(
|
||
|
|
this.image,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
this.image.width as number,
|
||
|
|
this.image.height as number,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
area.width,
|
||
|
|
area.height
|
||
|
|
)
|
||
|
|
};
|
||
|
|
return true;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
public loadFromURL(url:string)
|
||
|
|
{
|
||
|
|
this.image = new Image();
|
||
|
|
this.image.onload = () => {
|
||
|
|
this.update();
|
||
|
|
};
|
||
|
|
this.image.src = url;
|
||
|
|
}
|
||
|
|
public loadFromImage(image:CanvasImageSource)
|
||
|
|
{
|
||
|
|
this.image = image;
|
||
|
|
}
|
||
|
|
};
|