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

I need to place/plot a pin(Small image to point the parts of person) on a image(For example: A image of person).

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

I am getting x,y,height,width values from server for a specific pin and i am creating one div element for each pin and assigning x,y,height,width values.

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

In Javascript, i am calculating view scale value in below mentioned way and multiply view scale with x,y,width,height and assign it into pin div element.

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

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

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

I am not able to place the pin on exact position of main image. Please help me if someone has idea of this logic.

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

Update: Please find below the explanation through image.

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

Red Color rectangle is the screen. Green is the main image, let's say human image. Black color rectangle is a pin to describe a part in human image. I am getting x,y coordinates for this black colored rect pin from server.

红色矩形是屏幕。绿色是主要形象，让我们说人类形象。黑色矩形是用于描述人类图像中的一部分的引脚。我从服务器获取这个黑色矩形针的x，y坐标。

1 个解决方案

#1

Assuming I've understood this correctly, here's a possible demo solution:

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

First, define a config for your pin:

首先，为您的引脚定义配置：

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

Define a simple key/value map for getting the correct size type (width or height) when given an offset type (left or top):

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

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

Use a simple fn that calculates offset position relative to size. size / 2 because we need to compensate for the size of the pin, so positioning is based on the center of the element.

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

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

Here's a style attribute string generating fn, accepts an object (our pinConfig above, basically):

这是一个生成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('');
};

Finally, set style attr to .child-parent node:

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

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

Here's an example on Codepen: https://codepen.io/Inlesco/pen/xLwjLy?editors=1010

以下是Codepen的一个示例：https：//codepen.io/Inlesco/pen/xLwjLy？edit = 1010

If you need the React way, it's easy - just concat the generated inline styles string to a JSX element when mapping out the elements and that's it.

如果你需要React方法，那很简单 - 只需将生成的内联样式字符串连接到JSX元素，然后映射出元素即可。

Feel free to provide feedback, so we can improve this :)

随意提供反馈，所以我们可以改善这个:)

#1