2

画像に長方形をマークする簡単なJavaスクリプトプログラムを作成しようとしています。ボタンをクリックして長方形を追加してから、左上隅と右下隅をクリックすると、プログラムは長方形を赤でマークする必要があります。私はjqueryでストレートJavaScriptを使用しています。

クリックイベントが処理されている間、長方形の左上隅または右下隅が別の長方形の内側にある場合を除いて、ほとんどすべてが機能しますが、xとyは正しくありません。

私はこれを何時間もトラブルシューティングしようとしてきましたが、グーグルは役に立ちませんでした。私は特に試しました：

  • e.screenXおよびe.screenYのe.pageXを変更する
  • オフセットの代わりに絶対位置（上と左）を使用する

これを正しく行うことができない何かが欠けていることは明らかですが、正確には何がわかりません。

問題を示す例を使用してjsfiddleを作成しました。それでも、クリックしたくない場合は、これが私のJSコードです。

var rects = [{x1: 708, y1: 246, x2: 738, y2: 277},
             {x1: 442, y1: 239, x2: 474, y2: 271},
             {x1: 676, y1: 242, x2: 703, y2: 270}];

var $container = $("#container");
var click_count = 0;
var added_rects = 0;
var waiting_for_clicks = false;
var new_rects = [];
var current_rect = {};

var add_rect = function(color, rect) {
    $('<div class="child"/>')
    .appendTo($container)
    .css("left", rect.x1 + "px")
    .css("top", rect.y1 + "px")
    .css("width", (rect.x2-rect.x1)+"px")
    .css("height", (rect.y2-rect.y1)+"px")
    .css("border", "1px solid " + color);
};

var remove_last_rect = function() {
    if (new_rects.length > 0) {
        $container.children('div:last-child').remove();
        new_rects.pop();
    }
}
_.map(rects, _.partial(add_rect, 'red'));

var listen_for_rect = function() {
    click_count = 0;
    waiting_for_clicks = true;
    current_rect = {x1: -1, y1: -1, x2: -1, y2: -1};
    $('#add-rect').attr('disabled', 'disabled');
    $('#remove-rect').attr('disabled', 'disabled');
};

var stop_listening_for_rects = function() {
    waiting_for_clicks = false;
    $("#add-rect").removeAttr('disabled');
    $('#remove-rect').removeAttr('disabled');
    add_rect('red', current_rect);
    new_rects.push(current_rect);
}

$('#add-rect').click(function(e) {
    e.preventDefault();
    listen_for_rect();
});

$('#remove-rect').click(function(e) {
    remove_last_rect();
    if (new_rects.length == 0) $(this).attr('disabled', 'disabled');
});

var click_event = function(e) {
    e.preventDefault();
    if (waiting_for_clicks) {
        click_count++;
        var offset = $(this).offset();
        var x = e.pageX-offset.left;
        var y = e.pageY-offset.top;
        console.log(x);
        console.log(y);
        if (click_count == 1) {
            current_rect.x1 = x;
            current_rect.y1 = y;
        } else if (click_count == 2) {
            current_rect.x2 = x;
            current_rect.y2 = y;
            stop_listening_for_rects();
        }
    }
};

$container.on('click', '.child', click_event);

$('img').click(click_event);
// console.log($('.child'));
4

1 に答える 1

3

四角形の内側をクリックすると、x座標とy座標は、画像の左上隅ではなく、四角形の左上隅を基準にしています。

その理由は、$（this）.offset（）は、画像のオフセットではなく、クリックしている要素のオフセットを返すため、四角形の内側をクリックすると、四角形のオフセットが返されるためです。

これを試してみてくださいclick_event = function(e) {：

var offset = $("img").offset();
于 2013-03-27T04:49:52.777 に答える