0

JavaScript と css を使用して画像を中央に配置することに成功しました。私が抱えている問題は、中央の画像の座標が私が期待したものではないということです。上と左の値は、含まれている div の上と左を基準にするのではなく、画像の正確な中心を表します。ここにフィドルがあり、コードに貼り付けます。サーバー側でオフセットを計算できるように、フレームの正確な上部と左側を知る必要があります。

HTML:

<div id="containment-wrapper">
    <img id="imgFrame" class="centerImg" src="http://i.imgur.com/2KKIB.png" name=
    "imgFrame">

    <div id="drag_resize" style=
    "position: absolute; z-index: 1; width:500px; height: 375px;"><img id="#imgSource"
    src="http://data.whicdn.com/images/35067333/ocean-life-029_large.jpg" style=
    "width: 100%; height:100%;" name="#imgSource"></div>
  </div>

  <div style="height: 200px;"></div>Frame Position:

  <form>
    <input type="text" id="framePos"><br>
    Image Size: <input type="text" id="imgSize" style="width: 500px;"><br>
    Orgignal Image Position: <input type="text" id="imgPos" style="width: 500px;"><br>
    Calcualted Image Position: <input type="text" id="imgPosCalc" style=
    "width: 500px;"><br>
  </form>

CSS:

#containment-wrapper {
  border:1px solid; width: 432px;
  height: 348px; position: relative;
  border: solid 1px;display: table;
  text-align: center;
}

.centerImg {
    display:block;
    margin:auto;
    max-width:100%;
    top:50%;
    left:50%;
    opacity:0;
    position: absolute; z-index: 9999; pointer-events:none;  
}​

JavaScript:

$(function () {
    var frameTop = 0;
    var frameLeft = 0;

    $('#imgFrame').each(function () {
        imgheight = Math.round($(this).height() / 2);
        imgwidth = Math.round($(this).width() / 2);
        $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
    });

    var pos = $('#imgFrame').position();
    $('#framePos').val("Top: " + pos.top + " Left: " + pos.left);
    frameTop = pos.top;
    frameLeft = pos.left;

    $("#drag_resize").resizable({
        aspectRatio: true,
        resize: function (event, ui) {
            $('#imgSize').val("W: " + ui.size.width + " H: " + ui.size.height);
        },
        handles: 'e,w,n,s'


    }).draggable({
        drag: function (event, ui) {
            $('#imgPos').val("Top: " + (ui.position.top) + " Left: " + (ui.position.left));
            $('#imgPosCalc').val("Top: " + (ui.position.top - frameTop) + " Left: " + (ui.position.left - frameLeft));

        }
    });

    $('#imgSource').css({
        'width': '200px',
        'height': '200px;'
    })
});​
4

1 に答える 1

0

フレームの真上と真左の位置を計算する関数を追加しました。

function getTrueXY(){
        var img = document.getElementById('imgFrame'); 
        //or however you get a handle to the IMG
        var fameWidth= img.clientWidth;
        var frameHeight= img.clientHeight;

        var container = document.getElementById('containment-wrapper');
        var conWidth= container .clientWidth;
        var conHeight = container .clientHeight;

        var trueLeft = Math.round((conWidth / 2) - (fameWidth / 2));
        var trueTop = Math.round((conHeight / 2) - (frameHeight / 2));



    }

フィドルも更新しました。

于 2012-11-15T16:03:15.957 に答える