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

Question

我正在尝试建立一个 T 恤打印网站，目前我一直在研究如何正确 measure/calculate 打印在 x/y 轴上的位置和打印尺寸本身。

你可以明白我的意思

visiting spreadshirt

selecting any print

trying to move / resize the print

the measurement will be the same regardless of the screen/font size

我不确定计算的具体过程，但我在想也许我可以得到设备 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 值将分别改变。

更新： 回复您的评论：

也许你在代码中得到了错误的测量值，因为它们从一开始就是错误的：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。
然后作为声音检查，我将徽标宽度设置为最大并将其移至顶部。现在是实验的时候了。预期结果应该相当接近
{ x:0, y:0, w: 25,157, h: 9.07 }

有了这个功能：

// 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%初始 window 大小（我不能设置得更小）。在这种情况下，我得到这些测量值：
{x: 0.153..., y: 0.172..., w: 24.920..., h: 8.948...}

但是如果我添加 inches.width 和 inches.x 我将得到 25.073 - 给出 0.3% - 我观察到的平均错误。

所以你可以问："What about x and y? They are never 0!".
很抱歉打扰您，但看起来您使用的 Moveable 有问题。如果我使用这个函数：

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 放置了徽标。

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

how to correctly measure print size & distance from web?

printing

calculation

measurement