Javascript 获取矩形的坐标

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

在我的示例中，如果单击ROI，它将绘制一个矩形，我希望上下X和Y坐标相同

这把小提琴正在演奏

//对画布和上下文的引用
var oImageBuffer=document.createElement（'img'）；
var oCanvas=document.getElementById（“SetupImageCanvas”）；
var o2DContext=oCanvas.getContext（“2d”）；
//设置默认上下文状态
o2DContext.lineWidth=1；
o2DContext.translate（0.50，0.50）；//用于更清晰线条的抗锯齿技巧
//保存用户图形的变量
var层=[]；
var currentColor=“黑色”；
//用于拖动的变量
var bDragging=false；
var startX，startY；
//用户选择状态的变量
var$roiCheckbox=document.getElementById（“btnROI”）；
var$layersCheckbox=document.getElementById（“btnLAYER”）；
var$patches=document.getElementById（'txtPatchCount'）；
var$mouse=document.getElementById（“MouseCoords”）；
var Roischecked=假；
var layersIsChecked=false；
var-patchCount=0；
//侦听鼠标事件
oCanvas.addEventListener（'mousedown'，MouseDownEvent，false）；
oCanvas.addEventListener（'mouseup'，MouseUpEvent，false）；
oCanvas.addEventListener（'mousemove'，MouseMoveEvent，false）；
oCanvas.addEventListener（'mouseout'，MouseOutEvent，false）；
$（“#txtPatchCount”）.keyup（函数（）{
getStatus（）；
//清理画布
o2DContext.clearRect（0，0，oCanvas.width，oCanvas.height）；
//重新绘制所有以前保存的线对和roi
对于（变量i=0；i0）{
layer.patchCount=patchCount；
}
绘制（图层）；
}
});
//鼠标事件处理程序
功能MouseDownEvent（e）{
e、 预防默认值（）；
startX=e.clientX-this.offsetLeft；
startY=e.clientY-this.offsetTop；
currentColor=randomColor（）；
getStatus（）；
bDraging=true；
}
功能鼠标事件（e）{
如果（！bDragging）{
返回；
}
e、 预防默认值（）；
bDraging=false；
mouseX=e.clientX-this.offsetLeft；
mouseY=e.clientY-this.offsetTop；
推({
x1:startX，
y1：startY，
x2:mouseX，
y2：老鼠，
颜色：currentColor，
绘图机：图层已选中，
补丁数：补丁数，
});
}
功能MouseOutEvent（e）{
MouseUpEvent（e）；
}
功能MouseMoveEvent（e）{
如果（！bDragging）{
返回；
}
var mouseX=e.clientX-this.offsetLeft；
var mouseY=e.clientY-this.offsetTop；
//清理画布
o2DContext.clearRect（0，0，oCanvas.width，oCanvas.height）；
//重新绘制所有以前保存的线对和roi
对于（变量i=0；i0）{
//设置上下文状态
o2DContext.lineWidth=1.5；
o2DContext.strokeStyle='#0F0'；
//绘制区域
o2DContext.strokeRect（layer.x1，layer.y1，（layer.x2-layer.x1），（layer.y2-layer.y1））；
var w=layer.x2-layer.x1；
o2DContext.beginPath（）；
对于（变量i=1；i

好的，我回到绘图板，想出了这个

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

你可以根据这些数字计算出精确的坐标

JS

---

@这不是一个重复的问题。我主要要坐标。我不会拖动它来调整大小。我想通过改变坐标来调整它的大小manually@GCyrillus那么我如何才能做到这一点呢？事实上，我只是想让协调的数据自动填充到画布中。画布的重新绘制不是一项优先任务（这是可选的）。几年前，我在wordpress插件中添加了一项调整图像大小的任务，现在我再也找不到源代码了。关键词是手柄拖动和调整大小。但是你可以在释放按钮上检索鼠标坐标。我想自动填充坐标，而不是根据坐标绘制。我正在使用鼠标移动事件绘制。我只想得到文本框中的坐标。

    // 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();
}

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

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

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