javascript - 获取矩形的坐标

Question

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

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

工作 fiddle 是 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 + ")";
        }