获取矩形的坐标

Question

我想添加4个文本框，这将给我一个矩形的坐标，如果我手动编辑坐标，它也应该改变/改变矩形。 请告诉我如何继续这个解决方案。

在我的例子中，如果你点击ROI，它会绘制一个矩形，我想要相同的上下X和Y坐标。

工作小提琴是http://jsfiddle.net/qf6Ub/2/

// references to canvas and context 
var oImageBuffer = document.createElement('img'); 
var oCanvas = document.getElementById("SetupImageCanvas"); 
var o2DContext = oCanvas.getContext("2d"); 

// set default context states 
o2DContext.lineWidth = 1; 
o2DContext.translate(0.50, 0.50); // anti-aliasing trick for sharper lines 

// vars to save user drawings 
var layers = []; 
var currentColor = "black"; 

// vars for dragging 
var bDragging = false; 
var startX, startY; 

// vars for user-selected status 
var $roiCheckbox = document.getElementById("btnROI"); 
var $layersCheckbox = document.getElementById("btnLAYER"); 
var $patches = document.getElementById('txtPatchCount'); 
var $mouse = document.getElementById("MouseCoords"); 
var roiIsChecked = false; 
var layersIsChecked = false; 
var patchCount = 0; 

// listen for mouse events 
oCanvas.addEventListener('mousedown', MouseDownEvent, false); 
oCanvas.addEventListener('mouseup', MouseUpEvent, false); 
oCanvas.addEventListener('mousemove', MouseMoveEvent, false); 
oCanvas.addEventListener('mouseout', MouseOutEvent, false); 

$("#txtPatchCount").keyup(function() { 
    getStatus(); 
    // clear the canvas 
    o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height); 
    // redraw all previously saved line-pairs and roi 
    for (var i = 0; i < layers.length; i++) { 
     var layer = layers[i]; 
     if (layer.patchCount > 0) { 
      layer.patchCount = patchCount; 
     } 
     draw(layer); 
    } 
}); 

// mouse event handlers 

function MouseDownEvent(e) { 
    e.preventDefault(); 
    startX = e.clientX - this.offsetLeft; 
    startY = e.clientY - this.offsetTop; 
    currentColor = randomColor(); 
    getStatus(); 
    bDragging = true; 
} 

function MouseUpEvent(e) { 
    if (!bDragging) { 
     return; 
    } 
    e.preventDefault(); 
    bDragging = false; 
    mouseX = e.clientX - this.offsetLeft; 
    mouseY = e.clientY - this.offsetTop; 
    layers.push({ 
     x1: startX, 
     y1: startY, 
     x2: mouseX, 
     y2: mouseY, 
     color: currentColor, 
     drawLayer: layersIsChecked, 
     patchCount: patchCount, 
    }); 
} 

function MouseOutEvent(e) { 
    MouseUpEvent(e); 
} 

function MouseMoveEvent(e) { 
    if (!bDragging) { 
     return; 
    } 

    var mouseX = e.clientX - this.offsetLeft; 
    var mouseY = e.clientY - this.offsetTop; 

    // clear the canvas 
    o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height); 

    // redraw all previously saved line-pairs and roi 
    for (var i = 0; i < layers.length; i++) { 
     draw(layers[i]); 
    } 

    // create a temporary layer+roi object 
    var tempLayer = { 
     x1: startX, 
     y1: startY, 
     x2: mouseX, 
     y2: mouseY, 
     color: currentColor, 
     drawLayer: layersIsChecked, 
     patchCount: patchCount, 
    }; 

    // draw the temporary layer+roi object 
    draw(tempLayer); 

    // Display the current mouse coordinates. 
    $mouse.innerHTML = "(" + mouseX + "," + mouseY + ")" + patchCount; 
} 


function draw(layer) { 


    if (layer.drawLayer) { 

     // set context state 
     o2DContext.lineWidth = 0.50; 
     o2DContext.strokeStyle = layer.color; 

     // draw parallel lines 
     hline(layer.y1); 
     hline(layer.y2); 
    } 

    if (layer.patchCount > 0) { 

     // set context state 
     o2DContext.lineWidth = 1.5; 
     o2DContext.strokeStyle = '#0F0'; 

     // draw regions 
     o2DContext.strokeRect(layer.x1, layer.y1, (layer.x2 - layer.x1), (layer.y2 - layer.y1)); 
     var w = layer.x2 - layer.x1; 
     o2DContext.beginPath(); 
     for (var i = 1; i < layer.patchCount; i++) { 
      var x = layer.x1 + i * w/layer.patchCount; 
      o2DContext.moveTo(x, layer.y1); 
      o2DContext.lineTo(x, layer.y2); 
     } 
     o2DContext.stroke(); 
    } 


} 
function getStatus() { 
    roiIsChecked = $roiCheckbox.checked; 
    layersIsChecked = $layersCheckbox.checked; 
    patchCount = $patches.value; 
    if (!roiIsChecked || !patchCount) { 
     patchCount = 0; 
    } 
} 

function randomColor() { 
    return ('#' + Math.floor(Math.random() * 16777215).toString(16)); 
} 

function hline(y) { 
    o2DContext.beginPath(); 
    o2DContext.moveTo(0, y); 
    o2DContext.lineTo(oCanvas.width, y); 
    o2DContext.stroke(); 
} 

Answer 1

  document.getElementById("MouseCoords").innerHTML = "(" + x + "," + y + "); " 
                   +"("+ oPixel.x + "," + oPixel.y + "); " 
                   +"("+ oCanvasRect.left + "," + oCanvasRect.top + ")"; 
     } 

Answer 2

好吧，我又回到了绘图板，并用此FIDDLE走了过来。

它从容器的顶部和左侧提供了div的尺寸及其位置。

您可以从这些数字中计算出确切的坐标。

JS

var divwidth = $('.coord').width(); 
var divheight = $('.coord').height(); 
var pos = $('.coord').offset(); 

$('#divdimensions').html(divwidth + ',' + divheight); 
$('#divposition').html(pos.left + ',' + pos.top);