4

SVG を使用して情報を表示するクロスプラットフォーム Web アプリケーションを作成しています。SVG グラフィックをパンおよびズームするには、マルチタッチ インターフェイスが必要です。私の調査によると、Hammer.js が私の最善のアプローチであり、jQuery ライブラリ バージョンを使用しているようです。

SVG の viewBox プロパティを使用して、画像をパンおよびズームできます。私が抱えている問題は、ピンチズーム中に中心点情報を使用することです（対左上隅からのスケーリング）。その中心点は、私のイメージのどこにあっても、ピンチの中心に留まる必要があります。明らかに、解決策は viewBox の最初の 2 つの部分を変更することですが、正しい値を判断するのに苦労しています。中心点 (event.gesture.center) はブラウザー ページの座標にあるように見えるので、これを確実にスケーリングする方法を見つけてから、viewBox の x 座標と y 座標を計算する必要があります。例を探しましたが、かなり関連するものは見つかりませんでした。

viewBox 属性を使用して SVG 画像をスケーリングする最良の方法はありますか? より良い代替手段はありますか？ピンチセンターからSVG画像をズームするサンプルコードはありますか?

また、イベント処理を SVG 要素にバインドしているにもかかわらず、ピンチ ジェスチャがページのどこからでも機能するように見えることに気付きました。私のコードを使用してSVG画像をズームしているだけなので、ピンチのデフォルトのブラウザー処理ではありません。ピンチイベントをバインドするために使用しているコードは次のとおりです。

$(window.demoData.svgElement).hammer().on("pinch", function (event) {
    event.preventDefault();
    ...
});

これら2つの問題についてご協力いただきありがとうございます。

4

3 に答える 3

3

他の誰かがこれらの問題を解決しようとしてくれたことをうれしく思います。SVG はこれまでのところ十分な注目を集めていないようです。

私は数か月間、解決策を探して取り組んできました。まず、SVG を移動するための 3 つのオプションがあります。

  1. あなたが言ったようにviewBoxを使用します。画像を単一のアイテムとして扱いたい場合は、これが最適なソリューションだと思います。
  2. SVG 要素の CSS 変換を使用できます。欠点は、これによりピクセル化が発生することですが、他の種類の要素に対して存在するソリューションを使用できることを意味します
  3. SVG 内の要素または要素のグループに対して svg 変換を使用できます。

コードの問題に答えるために、中央ピンチは次のように説明できます。まず、screenCTM (座標変換行列) を使用して、ピンチ イベントの中心点を画面座標から SVG 座標に変換する必要があります。ポイントが座標 (x,y) を持っている場合、ビューボックスの原点は次と同等の変換を受ける必要があります

  • 翻訳(-x, -y)
  • scale(スケールファクター)
  • 平行移動(x, y)

私は、hammerjs の上で動作する、hammerheadと呼んだライブラリで「ほとんど」この作業を行いました。これが実際の例です。「...」を配置した場所に移動するにはコードが多すぎるため、問題を正確に解決するためのコードは提供しません。操作するviewBoxオブジェクトを作成することになりました。参考までに、これを操作するために使用するコードを示します。

scale: function(scale, center){
  var boxScale = 1.0/scale;
  center = center || this.center();
  var newMinimal = this.getMinimal().subtract(center).multiply(boxScale).add(center);
  var newMaximal = this.getMaximal().subtract(center).multiply(boxScale).add(center);
  var newViewBox = viewBox(newMinimal, newMaximal, this.getValidator());
  return newViewBox.valid()? newViewBox : null;
}

この方法には問題がないわけではありません。viewBox を変更すると、計算負荷が非常に高くなります。要素が非常に少ない画像を除いて、携帯電話で快適なスクロール エクスペリエンスを実現することはできません。アクションに応答してビューを一度変更すると、うまく機能します。たとえば、左右上下キー。これらのレポで上で述べた他のオプションのいくつかを調べました

  1. SVG操作
  2. アジャイル
  3. svgビューア

私が言ったように、かなりの時間を試してみてください。これらはすべて、アプローチの 1 つを個別に使用します。スムーズなスクロールとピクセル化なしの両方を実現するには、両方の組み合わせが必要になると思います。私はさらに別のライブラリに取り組んでいます。

于 2014-06-28T08:45:21.310 に答える