Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- Newer: Macにユーザ権限でmysqlをソースから(あと、DBD::mysqlも)
- Older: eBOOK-OFFのサービスに感動した
Home > > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)
Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Home > > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)
Home > Canvas > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)
Tweet
clipがおもしろそうだったので遊んでみました。
恥ずかしながらこの機能、今日まで知りませんでした。
※ 昨年末、HTML5やCanvasを結構触ってたのに・・・
というわけで、MDCのサンプルを改造してできたのが以下の2つ。
A canvas clip example(with rotate&uupaa)
星が回転します。ちょっとプラネタリウムっぽい?
A canvas clip example(with uupaa(mouse event))
マウスの動きに合わせてクリッピング領域が移動します。
また、左クリックで拡大、右クリックで縮小できます。
望遠鏡をイメージしました。
どちらもuupaa-jsを使ってるので、IEでも動くはずです。(とてつもなく重いですが。)
さて、今までcanvasものはjQuery+uuCanvasで実装してきましたが、
昨年末に待望の0.7が登場したので、今回からすべてuupaa.jsでやることにしました。
uupaaはクロスブラウザでHTML5やCSS3等々が使えちゃう素晴らしいライブラリですが、
ドキュメントはあまりないので、以下に手順を書いておきます。
興味ある方はどうぞ。
2分でわかる uupaa.js の ビルド方法 :: handsOut.jpの通りですが、
とりあえずフルセットを試したいって人は以下の手順だけやればOK。
(僕の作ったサンプルで読み込んでるものをダウンロードするのもありですが。)
JREをインストール。
(無料 Java ソフトウェアをダウンロード - Sun Microsystems)
xamppをインストール。
(apache friends - xampp for windows)
コンパネ→システム→詳細設定→環境変数から、
PATHに「c:\xampp\php」を追加する。
minifier.zipを展開して、中身をuupaa.jsのbuildディレクトリに入れる。
コマンドプロンプトでbuildディレクトリに移動して、「b」を実行。
これでuupaa.jsのディレクトリに「uupaa.js(縮小化なし)」が、
buildディレクトリに「mini.full.y.js(縮小版)」ができます。
普段は
<script type="text/javascript" src="mini.full.y.js"></script>
としておいて、何かあったら、
<script type="text/javascript" src="uupaa.js"></script>
に切り替えてデバッグするのが良いと思います。(かなりでかいので)
Macには初めからJavaもPHPも入ってるので、
uupaa.js/buildにcdして、
「php -f b.php」するだけでOKです。
今回使った機能をjQueryと対比しながら列挙してみる。
※ ソース見てないので間違ってるかもしれません。
参考:uupaa.js 0.7 チートシート(Core) :: handsOut.jp
// jQueryでは…
$(function() { ... });
// uupaaでは…
window.xboot = function() { ... }; // DOMContentLoaded
window.xwin = function() { ... }; // window.onload
window.xcanvas = function() { ... }; // canvas使ってる時はこれ。
// jQueryでは…
$('#id').click(function(e) { ... }); // set
$('#id').click(); // fire
// uupaaでは…
uu('#id').click(function(e) { ... }); // set
/* チートシートでは以下の書き方になってるけどダメっぽい */
uu('#id').bind('click', function(e) { ... });
uu.ev.fire(uu('#id').nth(), 'click'); // fire
/* これはダメ */
uu('#id').click();
uu.ev.stop(e); // イベントキャンセル
offset(), width(), height()相当のメソッドは見つけられませんでした。
属性はattr()で取れます。
get(0)に相当するのは、nth()っぽいです。
※ uu.id()を使えばノードが返ってくるので、そっちを使うべきだと思います。
uu[.query]()が返すのはuu.jamです。(uupaaオブジェクトでwrapされたもの)
Canvas機能を組み込んだuupaa.jsをロードするだけです。
(上記のbuild手順でやればフル機能が入ってます。)
uuCanvasの時に書いていたXAMLは不要になりました。
canvas 周りの I/F を変更しました。 - latest log
ただ、pの下にcanvasを置くとIEでエラーになるので注意です。(excanvasもそうみたい)
preとかul,dlとかは大丈夫だった気がします。
・・・とりあえず、divに入れてお茶を濁しておきましょう。
※ ホントはdiv直下にインライン要素を置くのもダメですけどね。
あと、uupaaとは直接関係ないですが、
canvas(というか要素内)でマウス座標を取る際の気をつけるところ。
要素の左上を原点とした座標は、
IEではoffsetX,Y、それ以外はlayerX,Yで取得します。
(uupaaのソースもそうなっていたはずです。)
このlayerXが曲者で、positionが未設定の場合pageXと同じ値を返します。
layerXとoffsetXは違う - Griever
というわけで、cssで「position: relative;」するか、
uu('#id').css('position', 'relative')しときましょう。
以上です。
皆さんも国産ライブラリuupaa.jsを使ってみて下さい。
・・・久しぶりにブログ書いたら、文章ひどいですね。