Question

您好我正在尝试在画布上绘制的图像上绘制矩形。因此，要查看它，可以在图像上看到矩形。

我制作了一个文本框，它取数字值来绘制带有1,2,3 ..分区的矩形。如果我正在删除该值，则矩形应该从图像中消失，但即使图像也是相同的，也可以使用相同的图像。

如何在画布上保存图像。我试图使用getBoundingClientRect相同，但不知道如何在这方面使用相同的。

function getStatus() {

        var layersCheckbox = document.getElementById("btnLAYER");
        var patches = document.getElementById('txtPatchCount');
        var roiCheckbox = document.getElementById("btnROI");
         var metricsCheckbox = document.getElementById("btnMetrics");

        bSetROI = roiCheckbox.checked;
         bSetMetrics = metricsCheckbox.checked;
        bSetLayers = layersCheckbox.checked;
        patchCount = patches.value;

        if (!bSetROI || !patchCount ) {
            patchCount = 0;

        }
}


$(function(){

  $("#txtPatchCount").keyup(function () 

        {
                getStatus();

                // clear the canvas
                o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
                 oCanvas.getBoundingClientRect();  
                // redraw all previously saved line-pairs and roi
                for (var i = 0; i < layers_array.length; i++) {
                    var layer5 = layers_array[i];
                    if (layer5.patchCount > 0) {
                        layer5.patchCount = patchCount;
                    }
                    draw(layer5);
                }
           }
  );
});

Answer 1

getBoundingClientRect()方法仅返回元素的当前绝对位置和维度（作为画布，图像或任何其他元素）。

只是调用它什么都不做 - 它会返回一个对象，其中包含一些您可以阅读的属性以及用于某些内容的对象：

var rectangle = element.getBoundingClientRect();

console.log(rectangle.left, rectangle.top, rectangle.width, rectangle.height)

为方便起见，还有right和bottom。请注意，如果应用了填充和边框，则会包含填充和边框。

如果清除画布，则需要重绘其上的所有内容，因为画布是一个被动位图，只保留包含图像在内的任何绘制的像素（您没有显示draw()方法的代码所以请原谅我在这里是通用的，并且不清楚你打算如何在这方面使用这种方法。）

（如果你的图片覆盖整个画布，你不需要清除它，只需重新绘制图像。）

无法正确使用getboundingclientrect

1 个答案: