4

ピンチしてズームし、ドラッグして SVG をパンする必要があります。この SVG は 480*480 ピクセルで表示されますが、実際のサイズは 1920*1920 ピクセルです。

私はHammerJSを使用し、 and をリッスンしましpinchたdrag:

$(document).hammer().on('pinch', $.throttle(30, setZoom)).
on('drag', $.throttle(30, moveTo));

これらのメソッド ( setZoom, ) 内では、Hammer 作成者が提案したようmoveToに、イベントのデフォルト アクションを既に防止しています。

ev.gesture.preventDefault()

ご覧のとおり、 jQuery.throttleを使用してハンドラーを調整しています。

私のズームとパンの実装viewboxは、SVG の属性を変更することで機能します。画像全体を表示するには、この属性をviewbox="0 0 1920 1920"に設定し、特定のものを表示するには、 に設定しましたviewbox="100 100 1720 1720"。（SVGを操作するには、svg.jsを使用しています）

最後に、SVG の構造は次のとおりです。

  • 1枚の画像（1920×1920ピクセル）、
  • グリッドを表すグループ内の 20 本の線
  • ellipseそれぞれが an 要素と a要素を含む、多かれ少なかれ 50 のグループtext > tspan。

これは SVG のコードの一部です。

<image id="SvgjsImage1027" xlink:href="/exams/still_picture/exam-4" width="1920" height="1920" x="0" y="0"></image>
<g id="SvgjsG1002" class="grid">
    <line id="SvgjsLine1003" x1="0" y1="0" x2="1920" y2="0"></line>
    …
</g>
<g id="SvgjsG1026" class="points">
    <g id="s10621674-24" class="threshold">
        <ellipse id="SvgjsEllipse1029" rx="7" ry="7" cx="1062" cy="1674" fill="#2b96d9"></ellipse>
        <text id="SvgjsText1030" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;" font-size="40" text-anchor="middle" x="1067.6568542494924" y="1690.5354797464468">
            <tspan id="SvgjsTspan1031" dy="36.93333336" x="1067.6568542494924" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;">24</tspan>
        </text>
    </g>
    …
</g>

質問

Android でのパフォーマンスはかなり悪いです。Chrome 26.0.1410.58Samsung Galaxy Tab 2 で Chrome 26 ( ) と Chrome Beta 27 ( )を試しましたChrome 27.0.1453.74が、動作が遅く感じます。iPad 2 (iOS 6 の Safari) で同じページを開こうとしましたが、ネイティブ アプリに匹敵するパフォーマンスで適切に動作します。

Android でのパフォーマンスを改善するために、何を試すことができますか? 別のブラウザー (Firefox Mobile など) に切り替えることはできないため、解決策は HTML/Javascript ランドにある必要があります。

また、ピンチしてズームし、ドラッグしてパンする (たとえばjQuery.panzoom ) を処理するためにいくつかのライブラリを使用しようとしましたが、より良い結果は得られませんでした。

4

1 に答える 1