16

CSS トランスフォーム スケールを使用して、div でスムーズなズームを作成しています。問題は、拡大してもdivに関連して正しいマウス位置を取得できるようにしたいということですが、このデータを取得するための正しいアルゴリズムを理解できるようです。現在の倍率を次から取得しています。

var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;

さまざまなスケール設定でdivの位置を読み取ると、正しい位置が報告されるようです。つまり、画面が大きくなるまでdivをスケーリングすると、左の位置と上の値が負になり、正しいように見えます。返されたスケール値:

$("#zoom_div").position().left
$("#zoom_div").position().top

現在のマウスの位置を取得するには、クリック イベントから x と y の位置を読み取り、オフセットを取り除きます。これは、スケール値 1 (スケールなし) では正しく機能しますが、div が拡大された場合には機能しません。これが私の基本的なコードです：

$("#zoom_div").on("click", function(e){
    var org = e.originalEvent;

    var pos = $("#zoom_div").position();

    var offset = {
        x:org.changedTouches[0].pageX - pos.left,
        y:org.changedTouches[0].pageY - pos.top
    }

    var rel_x_pos = org.changedTouches[0].pageX - offset.x;
    var rel_y_pos = org.changedTouches[0].pageY - offset.y;

    var rel_pos = [rel_x_pos, rel_y_pos];
    return rel_pos;
});

ページX / Yとの間でスケール係数を加算および減算する乗算除算を何度か試みましたが、うまくいきませんでした。誰でも正しい値を取得する方法を理解するのを手伝ってくれますか?

（私の質問をより明確にするために、元のコードを単純化しました。上記のコードで見つかる可能性のあるエラーは、その編集が原因です。マウスの位置の問題を除いた元のコード）。

私が話していることを説明するために、translate3d を使用して div をドラッグできる簡単な jsfiddle の例を作成しました。スケールが通常の場合 (1)、div はクリックされたポイントでドラッグされます。div が拡大されると (2)、クリックしたポイントから正しくドラッグされなくなります。

http://jsfiddle.net/6EsYG/12/

4

3 に答える 3

10

Webkit 変換元を設定する必要があります。基本的にスケールアップすると中心から発生します。これは、オフセットが間違っていることを意味します。0,0 は正方形の中心から始まります。ただし、原点を左上隅に設定すると、スケーリング時に正しい座標が保持されます。原点を設定する方法は次のとおりです。

#zoom_div{
    -webkit-transform-origin: 0 0;
}

これをオフセットにスケールを掛けることと組み合わせると、私にとってはうまくいきました：

offset = {
  "x" : x * scale,
  "y" : y * scale
}

jsFiddle のデモを見る

于 2013-03-20T11:04:51.557 に答える
5

使用しないでくださいevent.pageX - pos.left、しかしevent.offsetX（または一部のブラウザの場合：event.originalEvent.layerX

div.on('click',function(e) {
    var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
    var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});

私のjsFiddleの例を参照してください：http：//jsfiddle.net/Yukulele/LdLZg/

于 2013-03-18T15:24:45.750 に答える