Блог

Я пытаюсь отобразить HTML — элемент на холсте. Для этого я заранее рассчитываю размер HTML-элемента, добавляя его в документ, получая размер, а затем удаляя его позже.

Проблема в том, что в Chrome я получаю размер, превышающий 200 пикселей по высоте. Итак, под элементом на холсте есть гигантский пробел.

Я попытался вообще не использовать настройки шрифта, проверил поля/отступы (та же проблема, даже если они удалены) и попытался использовать высоту прокрутки/смещение/высоту клиента/jQuery…все дают слишком большую высоту. Я прочитал столько других постов, сколько смог найти, и не нашел решения. Так что…надеюсь, кто-нибудь подскажет мне какие-нибудь новые идеи 🙂 В Firefox это работает идеально…

Вот код:

 function renderHTML(htmlContent, pageHeight, windowWidth, windowHeight, browserSettings, dPR) {  var containerDiv = document.createElement("div");  containerDiv.id = "container-div";  var fontSize = emToPx(parseFloat(browserSettings.plaintext.fontSize)); // This is 14px in the console  containerDiv.style.font = `${fontSize}px ${browserSettings.plaintext.fontFamily}`;  containerDiv.style.backgroundColor = "#fc0303";  containerDiv.innerHTML = htmlContent;   // Create a new HTML document to pass into drawDocument  var docToSign = document.implementation.createHTMLDocument();  docToSign.body.innerHTML = containerDiv.outerHTML;  docToSign.documentElement.style.backgroundColor = "#03fc07";   // Get size of doc  document.body.appendChild(containerDiv);  var docWidth = containerDiv.scrollWidth;  var docHeight = containerDiv.scrollHeight;  // containerDiv.parentNode.removeChild(containerDiv);  console.log("height: "   $("#container-div").height());  console.log("containerDiv.scrollHeight: "   containerDiv.scrollHeight);  console.log("containerDiv.offsetHeight: "   containerDiv.offsetHeight);  console.log("containerDiv.clientHeight: "   containerDiv.clientHeight);  console.log("docHeight: "   docHeight);   var canvas = initializeCanvas(docHeight, windowWidth, windowHeight, browserSettings, dPR, docWidth);  if (typeof canvas === "string") {  console.log(`renderHTML: Error when initializing the canvas.`);  return canvas;  }  console.log("canvas.width: "   canvas.width);  console.log("canvas.height: "   canvas.height);  ...  

Вывод в консоли выглядит так:

На холсте вы можете увидеть разрыв хуууге:

Красный — это фон для containerDiv , а зеленый-фон для docToSign.documentElement . Когда я добавил фон docToSign.document.body , он окрашивал не более одного элемента documentElement. Таким образом, ни один из этих элементов на самом деле не такой высокий. Откуда могли взяться лишние пробелы?

Понял! ХА! containerDiv необходимое свойство CSS display: inline-block . 4 часа на это потрачено впустую…