忍者ブログ

Home > > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)

[PR]

  • 2017-10-20

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)

Home > Canvas > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)

Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)

Share on Tumblr このエントリーをはてなブックマークに追加

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等々が使えちゃう素晴らしいライブラリですが、
ドキュメントはあまりないので、以下に手順を書いておきます。

興味ある方はどうぞ。

uupaa.jsを入手しよう(build)

2分でわかる uupaa.js の ビルド方法 :: handsOut.jpの通りですが、
とりあえずフルセットを試したいって人は以下の手順だけやればOK。
(僕の作ったサンプルで読み込んでるものをダウンロードするのもありですが。)

Windows

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(snow leopard)

Macには初めからJavaもPHPも入ってるので、
uupaa.js/buildにcdして、 「php -f b.php」するだけでOKです。

uupaa.jsを使ってみよう

今回使った機能をjQueryと対比しながら列挙してみる。
※ ソース見てないので間違ってるかもしれません。
参考:uupaa.js 0.7 チートシート(Core) :: handsOut.jp

window.onload周り

// jQueryでは…
$(function() { ... });

// uupaaでは…
window.xboot = function() { ... };  // DOMContentLoaded
window.xwin = function() { ... };  // window.onload
window.xcanvas = function() { ... };  // canvas使ってる時はこれ。

event周り

// 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の使い方

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を使ってみて下さい。

・・・久しぶりにブログ書いたら、文章ひどいですね。

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる) from Born Neet

Home > Canvas > Canvasのclipで遊ぶ(ついでにuupaa.jsの最新版0.7を使ってみる)

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top