Qratch

Renderableopen in new window

Renderable は最低限必要な描画APIを提供するインターフェースです。

Component

Renderable は Component を継承しています。

メンバ

readonly width: number

描画できる領域の幅を表します。

readonly width: height

描画できる領域の高さを表します。

メソッド

center(): Pointable

描画できる領域の中央座標を返します。

fill(style: RenderStyle): void

描画できる領域を style で塗りつぶします。

fillRect(x: number, y: number, width: number, height: number, style: RenderStyle): void

座標 x, y に大きさ width, height の矩形をスタイル style で塗りつぶします。

strokeRect(x: number, y: number, width: number, height: number, lineWidth: number, style: RenderStyle): void

座標 x, y から大きさ width, height の矩形の線を太さ lineWidth スタイル style で描画します。

line(x1: number, y1: number, x2: number, y2: number, lineWidth: number, lineCap: RenderLineCap, style: RenderStyle): void

座標 x1, y1 から座標 x2, y2 の線を太さ lineWidth 両端形状 lineCap スタイル style で描画します。

fillArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, style: RenderStyle, anticlockwise?: boolean): void

座標 x, y に半径 radius 開始角度 startAngle 終了角度 endAngle の扇形を style で描画します。anticlockwise に true が指定されている場合、半時計回りに描画します。

strokeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, lineWidth: number, style: RenderStyle, anticlockwise?: boolean): void

座標 x, y に半径 radius 開始角度 startAngle 終了角度 endAngle の扇形の線を太さ lineWidth スタイル style で描画します。anticlockwise に true が指定されている場合、半時計回りに描画します。

fillEllipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, style: RenderStyle, anticlockwise?: boolean): void

座標 x, y に横半径 radiusX 縦半径 radiusY 開始角度 startAngle 終了角度 endAngle の楕円を style で描画します。anticlockwise に true が指定されている場合、半時計回りに描画します。

strokeEllipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, lineWidth: number, style: RenderStyle, anticlockwise?: boolean): void

座標 x, y に横半径 radiusX 縦半径 radiusY 開始角度 startAngle 終了角度 endAngle の楕円の線を太さ lineWidth スタイル style で描画します。anticlockwise に true が指定されている場合、半時計回りに描画します。

fillPolygon(points: RenderPolygonPoint[], style: RenderStyle): void

頂点座標の配列 points から成る多角形をスタイル style で塗りつぶします。

strokePolygon(points: RenderPolygonPoint[], lineWidth: number, style: RenderStyle): void

頂点座標の配列 points から成る多角形の線を太さ lineWidth スタイル style で塗りつぶします。

fillText(text: string, x: number, y: number, style: RenderStyle, maxWidth?: number, font?: string, textAlign?: RenderTextAlign, textBaseline?: RenderTextBaseline): void

文字列 text を座標 x, y にスタイル style 最大幅 maxWidth フォント font 文字列揃え textAlign 基準線 textBaseline で塗りつぶします。

strokeText(text: string, x: number, y: number, lineWidth: number, style: RenderStyle, maxWidth?: number, font?: string, textAlign?: RenderTextAlign, textBaseline?: RenderTextBaseline): void

文字列 text の線を座標 x, y に太さ lineWidth スタイル style 最大幅 maxWidth フォント font 文字列揃え textAlign 基準線 textBaseline で描画します。

img(image: RenderImage, x: number, y: number, width?: number, height?: number): void

画像 image を座標 x, y に描画します。width と height が指定されている場合そのサイズにリサイズし、描画します。