Question

我正在尝试构建一个 find waldo，为此，我需要在角色所在的位置分配一个位置。为此，我想用 e.pageX 和 e.PageY 分配 X 和 Y 的位置，问题是图像非常大，所以需要滚动才能看到所有图像。

所以每次滚动时位置都会改变。我一直在想一种方法来检查点击的字符是否正确，但我似乎无法找到一种方法来做到这一点......如果有人能帮助我，我会非常感激。

代码如下：

import React, {useState} from 'react'
import mainImage from '../img/marioBrosMain.jpg'
import '../main.css'
import Box from '../pages/box.js'

function Main() {

  const [style, setStyle] = useState();
  const [hidden, setHidden] = useState(true)
  let Characters;

  const imageClick = (x, y) => {
    const newStyle = {
      position: "absolute",
    zIndex: 2,
    borderRadius: "2px solid red",
    border: "4px solid red",
    height: "50px",
    paddingLeft: "10px",
    left: `${x}px`,
         top: `${y}px`
          }
          setHidden(false)
    return newStyle

  }

  if (!hidden) {
Characters = (
    <>
    <div className="hello">
      <div>
        <button>Star</button>
      </div>
      <div>
        <button>Mario</button>
      </div>
      <div>
        <button>Yoshi</button>
      </div>
    </div>
    </>
);
}
    return (
        <div id="frame">
          <div id="mainImage" style = {style}>
          {Characters}
          </div>
          <img src={mainImage} className="marioBros____image"  onClick={(e) => {setStyle(imageClick(e.pageX, e.pageY)); console.log(e.pageX)}} />
        </div>
    )
}

export default Main

如何检测点击的位置是否正确？

0 个答案: