2016/01/05

[JavaScript][d3.js]zooming panningジェスチャーでオブジェクトの拡大・縮小

iPhoneの写真アプリのようにzooming(ズーム)、panning(パンニング)で画像を拡大するような処理をd3.jsで実装するには、どうすればいいのだろうか?

タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
を参考にしながら、下のように実装した。

<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 = "scale(" + d3.event.scale + ',' + d3.event.scale + ")";
  d3Img.style("transform", t);
});
var d3Img = d3.select('._img');
d3Img.call(zoom);
</script>
ポイントは、「d3.event.scale」でscaleが拾えるところ。

0 コメント:

コメントを投稿