Невозможно правильно использовать boundingclientrect

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(), поэтому извините меня за здесь является общим, и неясно, как вы собираетесь использовать этот метод в этом отношении).

(Если ваше изображение покрывает весь холст, вам не нужно его очищать, просто перерисуйте изображение).