图像坐标随浏览器宽度变化而变化

Question

您好，我正在单击图像上的特定点并在选定区域上显示一个图标。当我更改分辨率时，该点正在移动到图像的其他部分。下面是我的代码。如何修复分辨率或浏览器宽度变化的坐标。添加了 eventlistner 并且需要知道在窗口调整大小时必须进行任何计算吗？

我的组件是：

 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

[编辑]

您需要在 componentDidMount 方法中添加一个事件监听器（这里是文档https://www.w3schools.com/jsref/event_onresize.asp），并在 componentWillUnmount 方法中删除这个监听器。 在监听器内部放置一个函数来设置新的坐标。

还需要计算图标坐标相对于窗口宽度和高度的百分比

handleclick = e => {
    ...your previous code

    const yPercent = h / top;
    const xPercent = w / left;

    this.setState({ yPercent, xPercent });
};

handleResize = () => {
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;

    const newTop = (this.state.yPercent * h) + "px";
    const newLeft = (this.state.xPercent * w) + "px";

    this.setState({ left: newLeft; top: newTop });
}