如何正确测量打印尺寸&与网页的距离？

Question

我正试图建立一个T恤印刷网站，目前我被如何正确测量计算打印在xy轴上的位置和打印尺寸本身所卡住了。

你可以了解我说的是什么意思

1. 参观 摊开衫
2. 选择任何打印
3. 试图移动调整打印尺寸
4. 无论屏幕字体大小，测量结果都是一样的。

我不知道具体是如何计算的，但我在想，也许我可以让设备的 DPI 然后根据结果将像素转换为英寸。但遗憾的是，这在很多情况下并不能给出正确的测量结果。

Answer 1

你不需要 DPI 的任何东西。

因为你有一个固定的、已知大小和位置的盒子（本例中是T恤）。

当用户在框内移动一个元素时，你可以计算出该元素的位置和大小。相对于盒子.

而你需要做的就是类似于。

scale = box.width_in_inches / box.width_in_pixels
el.x_in_inches      = (el.x_in_pixels - box.x_in_pixels)*scale
el.y_in_inches      = (el.y_in_pixels - box.y_in_pixels)*scale
el.width_in_inches  = (el.width_in_pixels              )*scale
el.height_in_inches = (el.height_in_pixels             )*scale

box.width_in_inches 可以改变当用户选择不同尺寸的T恤。box.width_in_pixels 会在用户放大页面时改变。但所有 *_in_pixels 值将分别发生变化。

---

更新。回答你的意见。

1. 也许你在代码中得到了错误的测量值 因为它们从一开始就是错误的： T恤的宽度和高度的比例

   1. 以英寸为单位。22 30.5 = 0.72...
   2. 0.72... 图片的像素。452 548 = 0,8248... (或在我的浏览器中：1428,750 1732,190 = 0,8248...)

   3. 以像素为单位，以你设置的边界为单位。(1428,750−160) (1732,190−100) = 0,777...

      所以我不得不用某种方法来解决。我选择去掉边框，这样标志就可以在T恤图片里面自由移动和拉伸。并决定T恤的宽度（英寸）应该是30.5*(452548) = 25,157...，而不是22。

2. 然后只是作为一个健全的检查，我将标志宽度设置为最大，并将其移动到顶部。现在是时候做实验了。预期的结果应该是合理地接近于 { x:0, y:0, w: 25,157, h: 9.07 }

3. 有了这个功能。

   // const shirt_w_in_inches = 30.5*(452/548)
   const shirt_h_in_inches = 30.5
   
   function get_measurements() {
     const pixels_shirt = shirt.getBoundingClientRect()
     const pixels_logo  = logo .getBoundingClientRect()
     const scale = shirt_h_in_inches / pixels_shirt.height
     const inches = {
       x: (pixels_logo.x - pixels_shirt.x)*scale,
       y: (pixels_logo.y - pixels_shirt.y)*scale,
       w: (pixels_logo.width             )*scale,
       h: (pixels_logo.height            )*scale,
     }
   
     console.log("pixels_shirt", pixels_shirt)
     console.log("pixels_logo" , pixels_logo)
     console.log("inches"      , inches)
   
     return inches
   }
   

   我发现他们很合理。

   最糟糕的情况是，当我设置了500%的缩放，并刷新页面，然后如果我将浏览器调整到初始窗口大小的25%（我不能设置得更小），我能够找到最大误差约为T恤宽度的1%。在这种情况下，我得到这些测量值。{x: 0.153..., y: 0.172..., w: 24.920..., h: 8.948...}

   但如果我加上 inches.width 和 inches.x

4. 所以你可以问："那么 x 和 y? 他们从来没有0！"。我很抱歉打破它给你，但它看起来像一个问题与 可移动 你正在使用的。如果我使用这个函数。

   function set_full_size() {
     const pixels_shirt = shirt.getBoundingClientRect()
     const pixels_logo  = shirt.getBoundingClientRect()
     logo.style.left    = shirt.clientLeft  + 'px'
     logo.style.top     = shirt.clientTop   + 'px'
     logo.style.width   = shirt.clientWidth + 'px'
     logo.style.height  = shirt.clientHeight*pixels_logo.height/pixels_logo.clientWidth + 'px'
   }
   

   它不仅为 x 和 y但在宽度上你也会得到一个较小的错误。可能是由于控制了 可移动 把周围的标志。