Question

我想创建一个 2dgrid ，让我们说xMax = 10, yMax = 6得到这样的东西：

x 0 1 2 3 4 5 6 7 8 9
 _ _ _ _ _ _ _ _ _ _  y
|_|_|_|_|_|_|_|_|_|_| 0
|_|_|_|_|_|_|_|_|_|_| 1
|_|_|_|_|_|_|_|_|_|_| 2
|_|_|_|_|_|_|_|_|_|_| 3
|_|_|_|_|_|_|_|_|_|_| 4
|_|_|_|_|_|_|_|_|_|_| 5

现在，我想计算每一个鼠标点击，其中有fields个（我不会添加任何实际的HTML元素）点击。结果，我想从网格（x，y）中获取字段x&y position。

注意：我不不想添加 html元素并监听其点击事件，我想计算结果

为了使它有点清晰，我创建了以下代码片段以可视化坐标的开始和结束位置：

let sizeY = 6,
    sizeX = 10,
    fieldWidth = 40,
    fieldHeight = 40,
    paddingLeft = 60,
    paddingTop = 80;
    
for (let y=0; y<sizeY; y++) {
  for (let x=0; x<sizeX; x++) {
    let posX = x*fieldWidth + paddingLeft,
        posY = y*fieldHeight + paddingTop
    $(`<div class="field"></div>`).css({
      top: posY,
      left: posX,
      width: fieldWidth,
      height: fieldHeight,
      position: "absolute",
      background: `rgb(${parseInt(Math.random()*255)},
                      ${parseInt(Math.random()*255)},
                      ${parseInt(Math.random()*255)})`
    }).appendTo(document.body)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我的问题：不添加任何HTML“字段”，如何获取坐标？：

let calculateField = function(event) {
  let sizeY = 6,
      sizeX = 10,
      fieldWidth = 40,
      fieldHeight = 40,
      paddingLeft = 60,
      paddingTop = 80,
      clickedX = event.clientX,
      clickedY = event.clientY;

   // ?
   console.log(clickedX, clickedY)
}

$(window).click(function(e) {
  calculateField(e)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意：我很确定这是模运算符的任务，但是我不知道如何实现代码。

Answer 1

只需像这样计算伪坐标：

osascript -e 'tell application "Google Chrome" to 
    open location "file:///Users/fabrice/Kantu/demoautofill.html?direct=1&close=1&savelog=demotestlog.txt"'

let calculateField = function(event) {
  let sizeY = 6,
      sizeX = 10,
      fieldWidth = 40,
      fieldHeight = 40,
      paddingLeft = 60,
      paddingTop = 80,
      clickedX = event.clientX,
      clickedY = event.clientY;

   const x = Math.floor((clickedX - paddingLeft) / fieldWidth);
   const y = Math.floor((clickedY - paddingTop) / fieldHeight);
   console.log("Coordinates clicked:", x, y)
}

$(window).click(function(e) {
  calculateField(e)
})

这是带有“ demo”元素的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

let sizeY = 6,
  sizeX = 10,
  fieldWidth = 40,
  fieldHeight = 40,
  paddingLeft = 60,
  paddingTop = 80;

for (let y = 0; y < sizeY; y++) {
  for (let x = 0; x < sizeX; x++) {
    let posX = x * fieldWidth + paddingLeft,
      posY = y * fieldHeight + paddingTop
    $(`<div class="field"></div>`).css({
      top: posY,
      left: posX,
      width: fieldWidth,
      height: fieldHeight,
      position: "absolute",
      background: `rgb(${parseInt(Math.random()*255)},
                      ${parseInt(Math.random()*255)},
                      ${parseInt(Math.random()*255)})`
    }).appendTo(document.body)
  }
}
let calculateField = function(event) {
  clickedX = event.clientX,
    clickedY = event.clientY;

  const x = Math.floor((clickedX - paddingLeft) / fieldWidth);
  const y = Math.floor((clickedY - paddingTop) / fieldHeight);
  console.log("Coordinates clicked:", x, y)
}

$(window).click(function(e) {
  calculateField(e)
})

获取点击位置

1 个答案: