如何在html中的图像上绘制项目的x，y坐标

Question

我需要在图像（例如：人的图像）上放置/绘制一个图钉（小图像以指向人的各个部分）。

我从服务器获取特定引脚的 x,y,height,width 值，我正在为每个引脚创建一个 div 元素并分配 x,y,height,width 值。

在 Javascript 中，我正在以下面提到的方式计算视图比例值，并将视图比例与 x、y、宽度、高度相乘，并将其分配给 pin div 元素。

const screenwidth = screen.width;
const screenheight = screen.height;

viewscale = Math.min(screenwidth / mainImagewidth, screenheight / mainImageheight);

我无法将图钉放置在主图像的确切位置。如果有人知道这个逻辑，请帮助我。

更新： 请通过图片在下面找到解释。

红色矩形是屏幕。绿色是主要形象，比方说人类形象。黑色矩形是描述人类图像中某个部分的图钉。我从服务器获取这个黑色矩形引脚的 x,y 坐标。

Answer 1

假设我理解正确，这里有一个可能的演示解决方案：

首先，为您的 pin 定义一个配置：

const pinConfig = {
  width: 45,
  height: 45,
  offsetLeft: 40,
  offsetTop: 75
};

定义一个简单的键/值映射，以便在给定偏移类型（左或上）时获得正确的大小类型（宽度或高度）：

const offsetTypeToSizeDimensionMap = {
  left: 'width',
  top: 'height'
};

使用一个简单的 fn 来计算相对于大小的偏移位置。 size / 2因为我们需要补偿pin的大小，所以定位是基于元素的中心。

const calcRelativeOffsetPos = (offsetPos, size) => offsetPos - (size / 2);

这是一个生成 fn 的样式属性字符串，接受一个对象（基本上是我们上面的pinConfig）：

const generateStylesString = (stylesConfig) => {
  return Object.keys(stylesConfig).map((styleProp) => {
    if (styleProp.includes('offset')){
      const stylePropName = styleProp.split('offset')[1].toLowerCase();
      const relativeSizeTypeByOffsetType = offsetTypeToSizeDimensionMap[stylePropName];
      const calculatedRelativeOffsetPos = calcRelativeOffsetPos(stylesConfig[styleProp], stylesConfig[relativeSizeTypeByOffsetType]);
      return stylePropName + ': ' + calculatedRelativeOffsetPos + 'px; ';
    }
    return styleProp + ': ' + stylesConfig[styleProp] + 'px; ';
  }).join('');
};

最后，将style attr 设置为.child-parent 节点：

document.querySelector('.child-image').setAttribute('style', generateStylesString(pinConfig));

这是 Codepen 上的一个示例：https://codepen.io/Inlesco/pen/xLwjLy?editors=1010

如果您需要 React 方式，这很容易 - 只需在映射元素时将生成的内联样式字符串连接到 JSX 元素即可。

请随时提供反馈，以便我们改进 :)