如何正确测量打印尺寸和与卷筒纸的距离？

Question

我正在尝试建立一个 T 恤印刷网站，目前我无法正确测量/计算印刷品在 x/y 轴上的位置和打印尺寸本身。

你可以明白我的意思

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

当用户选择不同尺寸的 T 恤时，box.width_in_inches可能会更改。
当用户缩放页面时，box.width_in_pixels将更改。
但所有*_in_pixels值将分别更改。

---

更新：回答您的意见：

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

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

   3. 以已设置边界的像素为单位：(1428,750−160(/(1732,190−100( =0,777...

      所以我不得不以某种方式修复它。我选择删除边界，以便 徽标可以在T恤图片内自由移动和拉伸。和 决定 T 恤宽度(英寸(应为 30.5*(452/548( = 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
   }
   

   我觉得它们很合理。

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

   但是如果我加上inches.width和inches.x，我会得到 25.073 - 给出 0.3% - 我观察到的平均误差。

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设置零，而且你会得到一个较小的宽度误差。这可能是因为Moveable放置徽标的控件。