在表格单元格中查找每张图片的X和Y坐标

Question

我正试图创建一个匹配的游戏。我创建了一个左右td，其中包含要匹配的元素。中间的td包含一个画布。

如果匹配正确，我想在画布上画线以匹配项目。为此，我需要每张图片的坐标，然后在画布中相应地绘制它。以下是插图

红色代表td 绿色代表我想画的线

x坐标没有太大问题，因为我只取画布的宽度（300px）（从0到300绘制），但它是y坐标，这就是问题。

我的想法是

1. 找到picture1的y坐标

2. 添加图片1的px的一半，使其位于＆＃39; center＆＃39; of picture1

3. 对pict​​ure2

执行相同的操作

4. 使用这些坐标绘制线

有没有办法在表格中找到图片的y坐标，因为它与画布的y坐标一致？

HTML

<table class="first">
  <tr>
    <td>
      <ul class="firstleft"></ul>
    </td>
    <td>
      <canvas id="myCanvas" resize></canvas>
    </td>
    <td>
      <ul class="firstright"></ul>
    </td>
  </tr>
</table>

CSS

table {
  margin-left: auto;
  margin-right: auto;
}
table ul {
  list-style-type: none;
  margin-left: 50px;
  padding: 0;
  padding-left: 5px;
  width: 200px;
}

JS

var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
/* Drawing part using an example*/
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();

Answer 1

这是一个过于冗长，不简化的代码块，可以强制清晰。它也只是左侧，但显然你会改变函数来取名字和数组作为参数，支持左右等。

var yPositionForMiddleOfEachImage = [];
var myImageNames = ['leftImage0', 'leftImage1', 'leftImage2']; //etc

var calculateYValuesForLeftSide = function () {
  var thisImagesHeight = 0, halfOfImageHeight = 0, totalOfAllPreviousImagesHeight = 0;
  for (var i = 0; i < myImageNames.length; i++) {
    thisImagesHeight = document.getElementById(myImageNames[i]).clientHeight;
    halfOfImageHeight = thisImagesHeight / 2;

    yPositionForMiddleOfEachImage.push(totalOfAllPreviousImagesHeight + halfOfImageHeight);
    totalOfAllPreviousImagesHeight += thisImagesHeight;
  }
};

var getCanvasLeftSideYPosition = function (imgPosition) {
  return yPositionForMiddleOfEachImage[imgPosition];
};