UnityのWebView(gree/unity-webview)にて画像ビューワーを表示させたいと思い、D3.jsを用いて画像ビューワー用のHTMLを作成しております。
(gree/unity-webviewを使用する場合、viewportの設定が無効になってしまうため)
ひとまず下記のように記述し、動作上はおおよそうまくいっているのですが、例えば左方向にドラッグし続けて、そこから右方向にドラッグしようとすると、しばらく右方向に画像をスクロールし続けないと画像がドラッグできない不具合が発生しております。
D3.jsの仕様上(?)、際限なく一方方向にドラッグできてしまい、ドラッグしすぎると画像がブラウザ上から消えてしまいます。それを制御するため、ドラッグに制限をかけるためにif文で制御しているのですが、「d3.event.translate」の値を変えるだけでは不十分なようです。
まとめると、下記の条件を満たすことができればOKです。
・画像ビューワーの機能として、ズームイン、ズームアウト、ドラッグが実装されている。
・D3.jsは使わなくてもよい。
・iOS、Androidで動作する。
また、gree/unity-webviewで、viewportの設定を有効にできる方法がありましたら、教えていただけるとすごく助かります。
よろしくお願いいたします。
開発環境は下記のとおりです。
・Mac OSX v10.11 El Capitan
・Unity 5.3.1p2
・gree/unity-webview
<!DOCTYPE html> <meta charset="utf-8"> <style> html,body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: white; } </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> // 画像の幅を取得 var img = new Image(); img.src = "test.jpg"; var zoom = d3.behavior.zoom() .scale(1) .scaleExtent([1, 5]) .on("zoom", zoomed); var svg = d3.select("body") .call(zoom); function zoomed() { var width = img.width; // 幅 var height = img.height; // 高さ // ウィンドウの幅より画像の幅のほうが大きい場合 if (window.innerWidth < width * d3.event.scale) { if (d3.event.translate[0] < (window.innerWidth - width * d3.event.scale)) { d3.event.translate[0] = window.innerWidth - width * d3.event.scale; } if (d3.event.translate[0] > 0) { d3.event.translate[0] = 0; } } else { if (d3.event.translate[0] > (window.innerWidth - width * d3.event.scale)) { d3.event.translate[0] = window.innerWidth - width * d3.event.scale; } if (d3.event.translate[0] < 0) { d3.event.translate[0] = 0; } } // ウィンドウの高さより画像の高さのほうが大きい場合 if (window.innerHeight < height * d3.event.scale) { if (d3.event.translate[1] < (window.innerHeight - height * d3.event.scale)) { d3.event.translate[1] = window.innerHeight - height * d3.event.scale; } if (d3.event.translate[1] > 0) { d3.event.translate[1] = 0; } } else { if (d3.event.translate[1] > (window.innerHeight - height * d3.event.scale)) { d3.event.translate[1] = window.innerHeight - height * d3.event.scale; } if (d3.event.translate[1] < 0) { d3.event.translate[1] = 0; } } // スクロールを実行 var t = "translate(" + d3.event.translate[0] + 'px,' + d3.event.translate[1] +"px) " + "scale(" + d3.event.scale + ',' + d3.event.scale + ")"; d3.select("img") .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); } </script> <img src="test.jpg"> </body>
あなたの回答
tips
プレビュー