如何从canvas获取lx、rx、ty、by坐标并转换为PDF点用于电子签章

你当前计算的lx和ty是拖拽图片元素左上角相对于canvas的坐标，剩下的rx、by可以通过叠加拖拽元素自身的宽高直接得到。

核心实现代码 #

你使用的interact.js拖拽事件对象自带目标元素的位置、尺寸属性，不需要额外操作DOM获取元素参数，参考实现如下：

const canvasRect = canvas.getBoundingClientRect();
const { left: canvasLeft, top: canvasTop } = canvasRect;
// 从interact.js事件对象直接获取拖拽元素的当前坐标和宽高
const { x: dragClientX, y: dragClientY, width: imgWidth, height: imgHeight } = e.rect;

// 计算相对于canvas的左上角坐标
const lx = dragClientX - canvasLeft;
const ty = dragClientY - canvasTop;
// 统一转换为PDF点单位，0.75为像素转PDF点的默认系数
const ptScale = 0.75;

this.coordinates = {
  lx: lx * ptScale,
  ty: ty * ptScale,
  rx: (lx + imgWidth) * ptScale,
  by: (ty + imgHeight) * ptScale
};

注意事项 #

• 如果canvas存在适配缩放（比如为了适配窗口调整了PDF渲染的展示比例），不要直接硬编码0.75作为转换系数，需要先计算canvas实际渲染尺寸和PDF原始页面尺寸的比值，将该比值纳入坐标换算逻辑
• 建议在dragend（拖拽结束）事件中获取最终坐标，不要在dragmove过程中存储坐标，避免拿到拖拽过程中的中间临时值
• PDF默认坐标原点为页面左下角，如果你后续赋值签章位置时出现上下偏移的问题，可以用当前PDF页面的总高度减去换算后的y坐标值后再使用

内容的提问来源于stack exchange，提问作者newb001