如何在html

Question

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

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

在Javascript中，我正在以下面提到的方式计算视图比例值，并将视图比例与x，y，width，height相乘并将其分配到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因为我们需要补偿引脚的大小，所以定位是基于元素的中心。

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元素，然后映射出元素即可。

随意提供反馈，以便我们改进：）