Question

这是键盘图像。我可以找出数字的坐标。但是我在点击图像中的特定坐标时遇到问题。所以任何人都可以帮我点击javascript中图像的特定坐标。提前谢谢。

Answer 1

如何使用<map> <area>每个按钮现在都是一个锚点。添加了一个小JS，它会警告它的id被点击了哪个按钮。

var map = document.getElementById('Map');
map.addEventListener('click', eXFunction, false);

function eXFunction(e) {
  if (e.target !== e.currentTarget) {
    var clickedBtn = e.target.id;
    alert("Button: " + clickedBtn);
  }
  e.stopPropagation();
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ImageMap NumberPad</title>
</head>

<body>
  <section>
    <img src="http://i.stack.imgur.com/gTiMi.png" alt="" usemap="#Map" />
    <map name="Map" id="Map">
      <area id="a1" title="1" href="#" shape="poly" coords="6,4,6,36,34,34,36,4" />
      <area id="a2" title="2" href="#" shape="poly" coords="44,3,77,3,76,36,43,36" />
      <area id="a9" title="9" href="#" shape="poly" coords="82,7,115,5,117,36,82,37" />
      <area id="a7" title="7" href="#" shape="poly" coords="124,2,157,3,157,36,124,37" />
      <area id="a3" title="3" href="#" shape="poly" coords="164,5,197,3,198,37,162,37" />
      <area id="a0" title="0" href="#" shape="poly" coords="4,43,37,43,37,76,3,76" />
      <area id="a5" title="5" href="#" shape="poly" coords="44,43,77,43,76,76,44,76" />
      <area id="a4" title="4" href="#" shape="poly" coords="83,44,117,43,116,75,82,75" />
      <area id="a8" title="8" href="#" shape="poly" coords="123,44,157,42,158,76,123,76" />
      <area id="a6" title="6" href="#" shape="poly" coords="198,43,197,76,163,76,165,43" />
    </map>
  </section>
</body>

</html>

Answer 2

您可以使用html地图标记refer here作为文档。基本上，您需要定义键盘的形状区域。然后你可以使用它与JavaScript。您还可以使用工具来映射键盘图像，即this tool。

Answer 3

您可以使用Event Object的clientX和clientY来获取点击的坐标，然后减去图像角的坐标。

<强> HTML

<img id="keys" src="http://i.stack.imgur.com/gTiMi.png">
<div>
Spot is: <span id="spot"></span>
</div>

<强>的JavaScript

var keys = document.getElementById("keys");
var keysTop = keys.offsetTop;
var keysLeft = keys.offsetLeft;
var spot = document.getElementById("spot");
document.getElementById("keys").onclick = function (event) {
   spot.innerHTML = "(" + (event.clientX - keysLeft) + " , " + (event.clientY - keysTop) + ")";

// now you can ask if spot is between (0,0) and (38,38) to refer to 1 button for instance
}

<强>样本

这是JSFiddle。

Answer 4

您必须将图片设置为div背景，然后您必须在点击div时将鼠标坐标置于其中（有关div内鼠标坐标的信息，请参阅Get mouse position within div?）。鉴于您的图像宽度为200px并且您有5列数字，这意味着键“0”介于0px和40px之间，键1介于40px和80px之间，等等（行相同）。现在，您拥有每个数字的顶部，右侧，左侧和下限，因此，了解鼠标的坐标，您应该能够识别特定的键。

Answer 5

一种简单而恰当的方法是使用图像map

所以你可以这样做：

＆＃13;

[TestMethod]
public void TestMethod()
{
    // arrange
    var app = Application.Launch(@"c:\ApplicationPath.exe");
    var targetWindow = app.GetWindow("Window1");
    Button button = targetWindow.Get<Button>("Button");

    // act
    button.Click();        

    var actual = GetMessageBox(targetWindow, "Application Error", 1000L);

    // assert
    Assert.IsNotNull(actual); // I want to see the messagebox appears.
    // Assert.IsNull(actual); // I don't want to see the messagebox apears.
}

private void GetMessageBox(Window targetWindow, string title, long timeOutInMillisecond)
{
    Window window = null ;

    Thread t = new Thread(delegate()
    {
        window = targetWindow.MessageBox(title);
    });
    t.Start();

    long l = CurrentTimeMillis();
    while (CurrentTimeMillis() - l <= timeOutInMillsecond) { }

    if (window == null)
        t.Abort();

    return window;
}

public static class DateTimeUtil
{
    private static DateTime Jan1st1970 = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
    public static long currentTimeMillis()
    {
        return (long)((DateTime.UtcNow - Jan1st1970).TotalMilliseconds);
    }
}

＆＃13;

$(document).ready(function() {
$(".area").click(function(e){
  e.preventDefault();
 alert("You clicked :"+$(this).data("number"));
});
});

＆＃13;

如何使用javascript点击图像的特定坐标

5 个答案: