TypeScript で作った、System.Drawingっぽい HTML Canvas ライブラリ

MSCC用に作ったアプリでは、HTML Canvasのお絵かきツールをTypeScriptでつくりました。
その中からCanvas面を操作する部分をライブラリに切り出してGitHubで公開してみました。

<a href="https://github.com/pierre3/DrawingTs">pierre3/DrawingTs</a>

System.Drawing 風？

Canvasへの図形等の描画処理を .Net Framework の System.Drawing名前空間にあるようなGDI操作っぽく作ってみました。

描画面への書き込み処理は、CanvasクラスのonPaintイベントハンドラに記述
onPaint の引数に渡されるGraphicsオブジェクトに用意された各種描画用メソッドを使用
ストロークや塗りつぶしのスタイルはPenやBrushなどの(それっぽい)オブジェクトで指定
Canvasクラスには、マウスやタッチ操作に対応したイベントハンドラを用意（現状、Down、Move、Upしかありませんが）

window.onload = (ev: Event) => {
    var canvas = new Canvas("canvas1");
    
    //描画処理はonPaint イベントハンドラで    
    canvas.onPaint = (g: DrawingTs.Graphics): any => {
        g.clear(true);
        g.drawString(message,
            Font.Create("sans-serif", 18),
            new SolidBrush(new Color("blue")),
            4, 18);
    };      
    //Pointerイベントは、Mouse,Touch,Pen の差異を吸収しいてる(はず。たぶん)
    canvas.onPointerDown = (ev: DrawingTs.CanvasPointerEvent) => {
        message = "PointerDown (" + ev.position.x + ", " + ev.position.y + ")"
        canvas.paint();
    };
    canvas.onPointerMove = (ev: DrawingTs.CanvasPointerEvent) => {
        message = "PointerMove (" + ev.position.x + ", " + ev.position.y + ")";
        canvas.paint();
    };
    canvas.onPointerUp = (ev: DrawingTs.CanvasPointerEvent) => {
        message = "PointerUp (" + ev.position.x + ", " + ev.position.y + ")"
        canvas.paint();
    };
    //Canvas面への書き込みはpaintメソッドで実行
    canvas.paint();