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

Question

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

你可以理解我的意思

1. visiting spreadshirt
2. selecting any print
3. trying to move / resize the print
4. 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 值都会分别改变。

---

更新:回答您的评论:

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...

      所以我不得不以某种方式修复它。我选择删除边界，以便 Logo 可以在 T 恤图片内自由移动和拉伸(stretch)。和决定以英寸为单位的 T 恤宽度应为 30.5*(452/548) =25,157...，而不是 22。

2. 然后，作为声音检查，我将 Logo 宽度设置为最大并将其移至顶部。现在是实验的时候了。预期结果应该合理接近
   { 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!”。
   很抱歉打扰您，但您使用的 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 控制了 Logo 。