tmlib.js でちょっとしたペイントツール作ってみた
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() でクリック時のイベントリスナを設定
tmlib.js を使うと, 簡単に dom を操作できたり, マウス位置, タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます.
『tmlib.js でちょっとしたペイントツール作ってみた』 http://t.co/ndNaX4AYQC
RT @phi_jp: tmlib.js を使うと, 簡単に dom を操作できたり, マウス位置, タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます.
『tmlib.js でちょっとしたペイントツール作ってみた』 http://t.co/ndNaX4AYQC
あとでコード読む ”tmlib.js でちょっとしたペイントツール作ってみた | TM Life” – http://t.co/HgzqZTKzmP #JavaScript
tmlib.js でちょっとしたペイントツール作ってみた http://t.co/3CTODcwVGt #tmlibjs #js
[tmlib.js][javascript] / “tmlib.js でちょっとしたペイントツール作ってみた | TM Life” http://t.co/KxuMrqS4uA
RT @tmlife_jp: [tmlib.js][javascript] / “tmlib.js でちょっとしたペイントツール作ってみた | TM Life” http://t.co/KxuMrqS4uA
javascript: tmlib.js でちょっとしたペイントツール作ってみた | TM Life http://t.co/UklPbWywC8
RT @RSS_hateb_Roy: javascript: tmlib.js でちょっとしたペイントツール作ってみた | TM Life http://t.co/UklPbWywC8
RT @phi_jp: tmlib.js を使うと, 簡単に dom を操作できたり, マウス位置, タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます.
『tmlib.js でちょっとしたペイントツール作ってみた』 http://t.co/ndNaX4AYQC
tmlib.js でちょっとしたペイントツール作ってみた | TM Life
http://t.co/1iqeKqXRnm
tmlib.js でちょっとしたペイントツール作ってみた | TM Life http://t.co/6bO9AUNSpb
tmlib.js でちょっとしたペイントツール作ってみた | TM Life:tmlib.js でちょっとしたペイントツール作ってみた. JavaScript のコードはたったの90行!! tmlib.js を使うと, 簡単に d.. http://t.co/V1b7MBoB5Q
tmlib.js でちょっとしたペイントツール作ってみた | TM Life
tmlib.js でちょっとしたペイントツール作ってみた. JavaScript のコードはたったの90行!! tmlib.js
を使うと, 簡単に dom を操作できたり, マウス位置,
タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます. よかったら実行したり fork
してイジって遊んで下さいな♪ 主な機能 カラーパレットで色変更 スライドでライン幅調整…
はてなブックマーク – tmlib.js でちょっとしたペイントツール作ってみた | TM Life はてなブックマークに追加
tmlib.js でちょっとしたペイントツール作ってみた | TM Life [テクノロジー] [blog-tech]:tmlib.js でちょっとしたペイントツール作ってみた. JavaScript のコードはたったの90行!!.. http://t.co/V1b7MBoB5Q
JavaScript:メモ:「tmlib.js でちょっとしたペイントツール作ってみた」
http://t.co/k6wo59SV5l
from はてなブックマーク – キーワード – JavaScript http://b.hatena.ne.jp/keyword/JavaScript