选定的图像点会随着页面大小的变化而变化

Question

我已经选择了图像的坐标（clientX和clientY）并显示了所选位置的图标，一旦我调整了浏览器的大小，所选图标就会显示在不同的位置。为此，我可以使用eventlistner并进行一些计算吗？即使更改分辨率或调整浏览器大小也可以保持相同的位置。

Mycomponent：

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { showCardDetails } from "../../store/Action";
let temp = [];
class cardDetails extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    left: "",
    right: "",
    coords: []
  };
  componentDidMount() {
    const { dispatch } = this.props;
    console.log(this.props.backOffice + "props");
    console.log(this.props.match.params.userId);
    let coords = JSON.parse(localStorage.getItem("coords"));
    this.setState({ coords: coords });
    window.addEventListener("resize", this.handlePress);
  }
  handlePress = () => {
    const { coords } = this.state;
    console.log(this.state);
   //anycalculation here?
  };
  handleclick = e => {
    var canvas = document.getElementById("imgCoord");
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    console.log(e.offsetLeft);
    var x =
      e.clientX +
      document.body.scrollLeft +
      document.documentElement.scrollLeft;
    var y =
      e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    let left = x + "px";
    let top = y + "px";
    let obj = {
      left: left,
      top: top,
      width: w,
      height: h
    };
    temp.push(obj);
    this.setState({ left: left, top: top, coords: temp });
    localStorage.setItem("coords", JSON.stringify(temp));
  };
  render() {
    const { backOffice, match } = this.props;
    const { left, top, coords } = this.state;
    console.log(coords);
    return (
      <React.Fragment>
        <div>
          <img
            id="imgCoord"
            src={require("../../assets/images/imageTagging.PNG")}
            onClick={$event => this.handleclick($event)}
          />
          {coords &&
            coords.map(item => (
              <img
                style={{
                  width: "20px",

                  position: "absolute",
                  left: item.left,
                  top: item.top,
                  backgroundColor: "white"
                }}
                src={require("../../assets/images/tag.png")}
                id="marker"
              />
            ))}
        </div>
      </React.Fragment>
    );
  }
}

/**
 * Redux map state
  @param {} state
  @param {} ownParams
 */
function mapStateToProps(state, ownParams) {
  console.log(state);
  return {
    backOffice: state.selectedCardData
  };
}

export default withRouter(connect(mapStateToProps)(cardDetails));

图像参考：选定的图像坐标

调整大小后：

Answer 1

我认为您使用的图片位置属性错误。您可以在here中找到所有可能的描述。