0

ステップ 1: サイズが 400x300 の画像があります。ここで、画像をクリックしてクリック位置 (上、左) を見つけ、その場所を小さな画像アイコンでマークし、この情報をデータベース (上と左) に保存します。

ステップ 2: これで同じ画像ができましたが、サイズは (700*500) です。ここで、ステップ 1 でデータベースに保存したクリックされた位置を、この画像上の小さな画像アイコンで表示したいと思います。

問題: 問題は、サイズ 400*300 の画像の場合は表示位置が正しいことですが、サイズ 700*500 の画像の場合、アイコンをクリックした位置に配置するのに問題が発生することです。どちらの場合も、小さいアイコンの (上、左) の値は同じです。

jQueryを介してやりたいこのプロセス全体。提案してください

4

2 に答える 2

0

マイコードをご覧ください

マーキング時にクリック位置を取得するということは、image1のクリックイベントを意味します。

      var PosX = 0;
                    var PosY = 0;
                    var ImgPos;
      //here i am getting the exact position of image with size (400*300)
                    ImgPos = FindPosition(sender);
                    if (!e) var e = window.event;
                    if (e.pageX || e.pageY) {
                        PosX = e.pageX;
                        PosY = e.pageY;
                    }
                    else if (e.clientX || e.clientY) {
                        PosX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                        PosY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                    }
     //these two value i am saving in database
                    PosX = PosX - ImgPos[0];
                    PosY = PosY - ImgPos[1];
      //gettting the position of image 
                    function FindPosition(oElement) {
                    if (typeof (oElement.offsetParent) != "undefined") {
                        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                            posX += oElement.offsetLeft;
                            posY += oElement.offsetTop;
                        }                                                  
                        return [posX, posY];

                    }
                    else {
                        return [oElement.x, oElement.y];
                    }
                }
于 2012-05-17T05:36:07.480 に答える
0

このようなものを使用して、ckaufmanの推奨事項を実装できます。

image1.click(function(e) {
    var offset = $(this).offset(),
        width = $(this).width(),
        height = $(this).height(),
        leftPercent = (e.clientX - offset.left)/width,
        topPercent = (e.clientY - offset.top)/height;

    // position marker image appropriately and 
    // store leftPercent and topPercent in database
});

次に、同じ画像の異なるサイズのバージョンにマーカーの位置を設定するには、次のようにします。

var leftPercent = .45, // from database
    toppercent = .23

image2.load(function() {
    var width = $(this).width(),
        height = $(this).height(),
        leftPosition = Math.round(leftPercent*width),
        topPosition = Math.round(topPercent*height);

    // set the marker position to leftPosition and topPosition
    // note: this is relative to the top left of the main image
});
于 2012-05-16T21:05:46.650 に答える