0

JavaScript/jQuery で粗雑なトリミング ツールを作成しようとしています。固定サイズの HTML 要素があり、overflow:hiddenそれをキャンバスとして使用しています。ユーザーは、この要素内で画像をドラッグして、切り抜き境界内で好みに合わせて画像を配置できる必要があります。

正しいオフセットの計算に少し問題があります。

ここで jsFiddle をセットアップしました: http://jsfiddle.net/YtyFH/

私が問題を抱えている部分は次のとおりです。

if (drag) {
    $img.css({
        top: e.offsetY - this.offsetTop,
        left: e.pageX - this.offsetLeft
    });
}

現在、ユーザーがキャンバス内でドラッグを開始すると、画像の端がカーソル位置にスナップします。画像がすでにある場所から動き始めてほしいです。

4

1 に答える 1

3

これは可能な修正です。更新されたフィドルを参照してください

var $img = $this.find('img');
var offset = {
    left : $img.css('left') == 'auto' ? e.pageX : e.pageX - parseInt($img.css('left')),
    top : $img.css('top') == 'auto' ? e.pageY : e.pageY - parseInt($img.css('top'))
}

$this.on('mousemove', function (e) {
    if (drag) {
        $img.css({
        top: e.pageY - offset.top,
        left: e.pageX - offset.left
        });
    }
})
于 2013-06-19T13:09:52.520 に答える