tmlib.js でちょっとしたペイントツール作ってみた. JavaScript のコードはたったの90行!!

tmlib.js を使うと, 簡単に dom を操作できたり, マウス位置, タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます.

よかったら実行したり fork してイジって遊んで下さいな♪

Sample

主な機能

• カラーパレットで色変更
• スライドでライン幅調整
• Save ボタンで画像を保存
• Clear ボタンでビューをクリア

Tips

マウス or タッチ位置の取得

ブラウザでは, mousemove や touchmove といったイベント発行時に 呼ばれる関数に Event オブジェクトが渡されます.

tmlib.js ではその Event オブジェクトからマウスクリック位置 or タッチ位置を取得することができます. e.pointX で X 座標値, e.pointY で Y 座標値を取得できます.

    element.event.pointstart(function(e) {
        pointX = e.pointX;
        pointY = e.pointY;
    });

DOM 操作

tmlib.js は, ™.dom.Element というクラスが定義されています. jQuery でいう $ みたいなもので, これを使う事で DOM を簡単に操作できるようになります.

        var elm = colorPalet.create("span");
        elm.attr.set("class", "piece");
        elm.backgroundColor = COLOR_LIST[i];
        elm.event.click(function() {
            canvas.strokeStyle = this.backgroundColor;
            
            active.attr.set("class", "piece");
            this.attr.set("class", "piece active");
            active = this;
        });

今回の例では span 要素を生成して, 下記のような操作を行っています.

• attr.set() で class 属性に piece を設定
• backgroundColor で背景色を設定
• event.click() でクリック時のイベントリスナを設定