import { Utils } from '@components/canvas/Utils' ; import { Tools } from '@components/canvas/Tools' ; import { Stage } from '@components/canvas/Stage' ; interface MiCanvasConfig { width ? : number ; height ? : number ; ratio ? : number ; background ? : string ; index ? : number | string ; } class MiCanvas { id : string ; canvas : HTMLCanvasElement ; ctx : CanvasRenderingContext2D ; ratio = 1 ; width = 0 ; height = 0 ; param config constructor ( config ) { this . id = Utils . uid ( ) ; this . canvas = Utils . createCanvasElement ( ) ; this . ctx = this . canvas . getContext ( '2d' ) as CanvasRenderingContext2D ; this . ratio = config . ratio ?? 1 ; this . canvas . id = this . id ; this . canvas . style . padding = '0' ; this . canvas . style . margin = '0' ; this . canvas . style . border = '0' ; this . canvas . style . backgroundColor = config . background ?? 'transparent' ; this . canvas . style . position = 'absolute' ; this . canvas . style . top = '0' ; this . canvas . style . left = '0' ; this . canvas . style . zIndex = config . index as string ; } param container create ( container ? ) { const stage = Tools . getStage ( ) ; container = container ?? ( stage ? stage . canvas : this ) . getCanvas ( ) . parentNode as HTMLDivElement ; const nStage = new Stage ( { container , buffer : true } ) ; nStage . canvas . getCanvas ( ) . style . backgroundColor = 'transparent' ; return nStage . canvas ; } return remove ( ) { const element = this . getCanvas ( ) . parentNode as HTMLDivElement ; if ( element ) element . removeChild ( this . getCanvas ( ) ) ; } return getCanvas ( ) { return this . canvas ; } return getContext ( ) { return this . ctx ; } param width param height setSize ( width , height ) { this . setWidth ( width ) ; this . setHeight ( height ) ; } return getWidth ( ) { return this . width ; } param width protected setWidth ( width ) { this . width = this . canvas . width = width * this . ratio ; this . canvas . style . width = `${ width }px` ; this . ctx . scale ( this . ratio , this . ratio ) ; } return getHeight ( ) { return this . height ; } param height protected setHeight ( height ) { this . height = this . canvas . height = height * this . ratio ; this . canvas . style . height = `${ height }px` ; this . ctx . scale ( this . ratio , this . ratio ) ; } param type param quality toDataURL ( type ? , quality ? ) { try { return this . canvas . toDataURL ( type , quality ) ; } catch ( e ) { try { return this . canvas . toDataURL ( ) ; } catch ( err ) { console . error ( err . message ) ; return '' ; } } } param bounds clear ( bounds ? ) { if ( bounds ) { this . ctx . clearRect ( bounds . x || 0 , bounds . y || 0 , bounds . width || 0 , bounds . height || 0 ) ; } else { this . ctx . clearRect ( 0 , 0 , this . getWidth ( ) / this . ratio , this . getHeight ( ) / this . ratio ) ; } } } export class Canvas extends MiCanvas { constructor ( config = { width : 0 , height : 0 } ) { config . index = config . index ?? 578 ; super ( config ) ; this . setSize ( config . width as number , config . height as number ) ; } }