자바 스크립트에서 이미지에 직사각형을 그리기

Question

이미지에 직사각형을 표시하는 간단한 자바 스크립트 프로그램을 작성하려고합니다. 단추를 클릭하여 직사각형을 추가 한 다음 왼쪽 위 및 오른쪽 아래 모서리를 클릭하면 프로그램이 직사각형을 빨간색으로 표시합니다. 내가 jquery와 똑바로 자바 스크립트를 사용하고 있습니다.

클릭 이벤트가 처리되는 동안 사각형의 왼쪽 위 또는 아래 오른쪽 구석이 다른 사각형 안에있는 경우를 제외하고 모든 것이 거의 작동하지만 x 및 y는 올바르지 않습니다.

나는 몇 시간 동안이 문제를 해결하려고 노력했지만 Google은 도움이되지 못했습니다. I 구체적 시도 :

• 대신 오프셋

들 (왼쪽 및 위쪽)의 절대 위치를 사용하고 e.screenX e.screenY

e.pageX 대한 변경이 명백하다 I 내가 이걸 제대로 할 수없는 것을 놓치고는 있지만 정확히 무엇을 모르겠다.

나는 jsfiddle with an example that shows the problem을 만들었습니다. 당신이 구형 영역의 내부를 클릭하면, x 및 y 좌표는 왼쪽 상단에 상대 있습니다

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')); 

Answer 1

: 그러나 경우에 당신이 그것을 클릭하고 싶지 않아, 이건 내 JS 코드 이미지의 왼쪽 상단 모서리가 아니라 직사각형 모서리.

이유는 $ (this) .offset()은 이미지의 오프셋이 아니라 클릭하는 요소의 오프셋을 반환하므로 rect 내부를 클릭하면 rect의 오프셋을 반환합니다. .

click_event = function(e) {이 시도 :

var offset = $("img").offset();