前回、zooming panningジェスチャーでオブジェクトの拡大・縮小というエントリーでiPhoneの写真アプリのようにzooming(ズーム)、panning(パンニング)で画像を拡大するような処理をd3.jsで実装する方法を書きましたが、昨日のエントリーのtransform:translateを組み合わせて、下のように書くことができる。
<div style="width:200px;height:200px;overflow: hidden;background: gray;"> <img src="./img.png" class="_img"> </div> <script> var zoom = d3.behavior.zoom(); zoom.on('zoom',function(){ var t = "translate(" + d3.event.translate[0] + 'px,' + d3.event.translate[1] +"px) " + "scale(" + d3.event.scale + ',' + d3.event.scale + ")"; d3Img .style("transform-origin", "0 0") .style("-moz-transform-origin", "0 0") .style("-webkit-transform-origin", "0 0") .style("-o-transform-origin", "0 0") .style("-ms-transform-origin", "0 0") .style("transform", t) .style("-moz-transform", t) .style("-webkit-transform", t) .style("-o-transform", t) .style("-ms-transform", t); }); var d3Img = d3.select('._img'); var svg = d3Img.call(zoom); </script>とはいっても、これは、
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
のエントリーと同じ処理なんだけどね。
0 コメント:
コメントを投稿