読者です 読者をやめる 読者になる 読者になる

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

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

pierre3/DrawingTs · GitHub

System.Drawing 風?

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

  • 描画面への書き込み処理は、CanvasクラスのonPaintイベントハンドラに記述
  • onPaint の引数に渡されるGraphicsオブジェクトに用意された各種描画用メソッドを使用
  • ストロークや塗りつぶしのスタイルはPenBrushなどの(それっぽい)オブジェクトで指定
  • 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();

どんなクラスやメソッドがあるかは、こちらの定義ファイル(drawingTs.d.ts)で確認できます。
読み込んだ画像を表示する drawImage() はまだ未実装だったり、まだまだ機能不足ですが。。。

サンプルコード

サンプルコードと実行結果がこちらで確認できます。

http://pierre3net.azurewebsites.net/Drawing