99 lines
2.0 KiB
TypeScript
99 lines
2.0 KiB
TypeScript
|
export abstract class Drawing
|
||
|
|
{
|
||
|
|
width: number
|
||
|
|
height: number
|
||
|
|
|
||
|
|
scale: number = 1
|
||
|
|
abstract drawPath(path: DrawPathContext, option: DrawLineOption)
|
||
|
|
|
||
|
|
abstract drawLine(
|
||
|
|
x0: number,
|
||
|
|
y0: number,
|
||
|
|
x1: number,
|
||
|
|
y1: number,
|
||
|
|
option: DrawLineOption,
|
||
|
|
)
|
||
|
|
abstract drawRect(
|
||
|
|
x: number,
|
||
|
|
y: number,
|
||
|
|
width: number,
|
||
|
|
height: number,
|
||
|
|
option: DrawRectOption,
|
||
|
|
)
|
||
|
|
abstract drawLinePolygon(points: Array<any>, option: DrawLinePolygonOption)
|
||
|
|
abstract drawText(text: string, x: number, y: number, option: DrawTextOption)
|
||
|
|
abstract drawForeignObjectText(
|
||
|
|
text: string,
|
||
|
|
x: number,
|
||
|
|
y: number,
|
||
|
|
option: DrawTextOption,
|
||
|
|
)
|
||
|
|
abstract drawImage(
|
||
|
|
source: CanvasImageSource,
|
||
|
|
x: number,
|
||
|
|
y: number,
|
||
|
|
width: number,
|
||
|
|
height: number,
|
||
|
|
option: DrawImageOption,
|
||
|
|
border: number,
|
||
|
|
): Promise<any>
|
||
|
|
|
||
|
|
abstract clearAll()
|
||
|
|
|
||
|
|
abstract toHTML(): string
|
||
|
|
}
|
||
|
|
|
||
|
|
export class BaseDrawOption
|
||
|
|
{
|
||
|
|
lineWidth: number = 1
|
||
|
|
strokeStyle: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface IDrawPath
|
||
|
|
{
|
||
|
|
method: string
|
||
|
|
args: number[]
|
||
|
|
}
|
||
|
|
export class DrawPathContext
|
||
|
|
{
|
||
|
|
data: Array<IDrawPath> = []
|
||
|
|
|
||
|
|
moveTo(x: number, y: number)
|
||
|
|
{
|
||
|
|
this.data.push({ method: 'M', args: [x, y] })
|
||
|
|
|
||
|
|
return this
|
||
|
|
}
|
||
|
|
|
||
|
|
lineTo(x: number, y: number)
|
||
|
|
{
|
||
|
|
this.data.push({ method: 'L', args: [x, y] })
|
||
|
|
return this
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export class DrawLineOption extends BaseDrawOption { }
|
||
|
|
export class DrawRectOption extends BaseDrawOption
|
||
|
|
{
|
||
|
|
fillStyle: string
|
||
|
|
}
|
||
|
|
export class DrawImageOption extends BaseDrawOption { }
|
||
|
|
export class DrawLinePolygonOption extends BaseDrawOption
|
||
|
|
{
|
||
|
|
isFill: boolean = true
|
||
|
|
fillStyle: string = 'rgb(0,0,0)'
|
||
|
|
}
|
||
|
|
|
||
|
|
export type DrawTextBaseLnie = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'
|
||
|
|
export type DrawTextAlign = 'start' | 'center' | 'right'
|
||
|
|
export class DrawTextOption
|
||
|
|
{
|
||
|
|
maxWidth?: number
|
||
|
|
textAlign: DrawTextAlign = 'center'
|
||
|
|
textBaseline: DrawTextBaseLnie = 'middle'
|
||
|
|
fillStyle: string = 'rgb(0,0,0)'
|
||
|
|
fontSize: string = '12'
|
||
|
|
fontWeight: string = '400'
|
||
|
|
fontFamily: string = '宋体'
|
||
|
|
}
|