svgを使って動かせる地図を作ろう
svgの特色としては「ベクタ画像である」「グラフィックの部品化が容易」「domを操作することで様々な処理を行うことが出来る」等，様々なものが挙げられますが，いざこれらを活かすとなるとどう使えば良いかイメージしにくいこともあろうかと思います． そこで今回は実際にこれらの仕組みを使って簡単な地図を作ってみようと思います．でも単なる地図であれば面白くありませんから，拡大・縮小・移動・回転を可能とする言わばtiny google mapのような機能を実装してみましょう． とにかく見てみよう それでは早速見てみましょう．直接開く 地図画像 スクリプト 実装した機能は次のとおりです． マウスドラッグで位置を変更できます マウスホイールで拡大縮小できます shiftもしくはaltキーを押したままマウスをホイールすることで回転することができます ダブルクリックで位置を元に戻します 地図を変形しても市名を表
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
forked from: MultiTouch + SVG + DnD - jsdo.it - Share JavaScript, HTML5 and CSS
