javascript - 计算内部 div 的宽度/高度(以毫米为单位)(相对于已知宽度/高度(以毫米为单位)的外部 div。)

Question

1. 我有一个外部 div，其指定的宽度/高度(以毫米为单位)。 (mm只是赋值，不用于渲染)。
2. 里面有另一个 div，其实际宽度/高度(以 px 为单位)。
3. 两个 div 可以具有不同的比例。

我想要做的是计算内部 div 的宽度/高度(以毫米为单位)。使用 JavaScript 并考虑规模。

示例 1:外部 div 指定的宽度/高度为 30x30mm，比例为 0.8，内部 div 的宽度/高度(以 px 为单位)为 600x600px，则结果应为 24x24mm。

示例 2:外部 div 指定的宽度/高度为 60x30mm，比例为 1.0，内部 div 的宽度/高度(以 px 为单位)为 300x600px，则结果应为 15x30mm。

外部 div 宽度/高度(以毫米为单位)被视为最大尺寸。

我猜这很简单，但事实上 div/surface 可以有不同的比例，这对我来说很复杂。

var calcDimensions = function(scale) {

   var surfaceWidth, surfaceHeight, contentWidth, contentHeight, contentRatio, surfaceRatio;

   // Output variable holding the result
   var dimensions = { width: 0, height: 0 };


   surfaceWidth = 30; // outer divs assigned width in mm
   surfaceHeight = 14; // outer divs assigned height in mm
   contentWidth = 600; // inner divs real width in px
   contentHeight = 196; // inner divs real height in px

   scale = 0.8; // Can have a value between 0.1 - 1.0

   contentRatio = contentWidth > contentHeight ? contentHeight / contentWidth : contentWidth / contentHeight; // Assuming this is needed in the calculation.
   surfaceRatio = surfaceWidth > surfaceHeight ? surfaceHeight / surfaceWidth : surfaceWidth / surfaceHeight; // Assuming this is needed in the calculation.

  // Calculate stuff here and return calculated dimensions

  return dimensions;

}

Answer 1

您可以尝试执行以下操作:

在 View 中添加一个宽度 = 100mm 的 div

<div style="width:100mm;height:0" id="measure">

也许您必须设置 z-index 或 bg-color 才能使 div 不可见。现在您可以计算设备上每毫米的像素数，如下所示:

let pxPerMm = document.getElementById('measure').offsetWidth / 100;