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

我正在尝试建立一个t恤衫印刷网站，目前我正致力于如何正确测量/计算x/y轴上的印刷位置和印刷尺寸本身

你可以理解我的意思

拜访

选择任何打印

正在尝试移动/调整打印的大小

无论屏幕/字体大小如何，测量值都是相同的

我不确定计算是如何进行的，但我想也许我可以得到设备的dpi，然后根据结果将像素转换为英寸。但遗憾的是，在许多情况下，这无法给出正确的测量值。

您不需要任何此类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恤时，宽度（以英寸为单位）

会发生变化。

框。当用户缩放页面时，以像素为单位的宽度将发生变化。

但是所有的
*.\u英寸像素
值将分别改变


更新：
答复你的评论：

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

英寸：22/30.5=0.72…
图片的像素数：452/548=08248…（或在我的浏览器中的页面上：1428750/1732190=08248…）
以设置边界的像素为单位：（1428750）−160) / (1732,190−100）=0777…

所以我得想办法把它修好。我选择删除边界，以便
徽标可在t恤图片内自由移动和拉伸。及
决定t恤宽度（英寸）应为30.5*（452/548）=
25157…，不是22


然后，就像一个声音检查，我设置的标志宽度最大，并将其移动到顶部。现在是进行实验的时候了。预期结果应合理接近

{x:0，y:0，w:25157，h:9.07}
使用此功能：

//const shirt\u w\u in\u inches=30.5*（452/548）
常量衬衫英寸=30.5
函数get_measurements（）{
常量像素\u shirt=shirt.getBoundingClientRect（）
const pixels_logo=logo.getBoundingClientRect（）
常量比例=衬衫高度（单位：英寸/像素）衬衫高度
常数英寸={
x：（像素×徽标.x-像素×衬衫.x）*比例，
y：（像素\u logo.y-像素\u shirt.y）*比例，
w：（像素×徽标宽度）*比例，
h：（像素×徽标高度）*比例，
}
日志（“像素衬衫”，像素衬衫）
console.log（“像素标志”，像素标志）
控制台日志（“英寸”，英寸）
返回英寸
}

我觉得它们很合理

我能找到的最大误差约为t恤宽度1%的最坏情况是，我设置了500%的缩放并刷新页面，然后将浏览器大小调整为初始窗口大小的25%（我无法设置得更小）。在这种情况下，我得到这些测量值：

{x:0.153…，y:0.172…，w:24.920…，h:8.948…}

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

所以你可以问：“那么
x
和
y
呢？它们从来都不是0！”
很抱歉打断您，但您使用的Moveable似乎有问题。如果我使用此功能：

function set\u full\u size（）{
常量像素\u 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*像素\u logo.height/pixels\u logo.clientWidth+'px'
}

它不仅为
x
和
y
设置零，而且宽度的误差更小。可能这是因为控制可移动放置在徽标周围

你可以添加一个例子吗？你链接的站点使用SVG，你使用什么-我不知道。你的数据结构和字段名称-我不知道。你如何从用户那里得到t恤的尺寸？我也不知道。我想你们知道如何得到元素的像素尺寸。所以我不知道我已经提供的代码中缺少了什么。但是，如果你用一个代码示例更新你的问题，我就可以解决它了。很抱歉，我的回复太晚了，这里有一个盒子的测量值，它的
30.5英寸高x 22英寸宽
很抱歉，现在我在世界上无法连接到jsfiddle:）的地方。我的VPN坏了。你能把代码放到github上吗？当然可以，np