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

我正在尝试创建一个匹配游戏。我创建了一个包含要匹配的元素的左右td。中间的td包含一个画布。在表格单元中查找每个图片的X和Y坐标

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

红色表示TD 绿色代表谨

线没有与多大问题的x坐标，因为我只取宽度（300像素）的画布（从0到300），但它是y坐标是问题。

的想法我已经是

查找y坐标图片1的
，以便它添加图片1的一半的像素在该Picture1中的 '中心'
待办事项图2相同
使用这些坐标绘制线

是否有任何方法可以在表格中找到图片的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; 
}

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();

来源

2016-02-11 CHEWWWWWWWWWW

您应该为您的游戏“梨花赛”，得到它？ ; D –

HAHA。我原来是这样命名的。我想知道为什么我改变了它：D – CHEWWWWWWWWWW

如果你能得到所有图像（或所有单元格）的大小，你可以通过知道你在哪个单元格来计算y坐标。例如：如果单元格A高100px ，下面的单元格B是100px，假设画布的顶部与表格的顶部相同，单元格B的y坐标将是（A + B） - （B/2）或150px。 – fredrover

下面是一个过于繁琐，没有精简BLO ck代码强制清晰。它也只是做了左侧，但很明显，你会改变取名字的功能和位置数组作为参数，以支持左，右等

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]; 
};

来源

2016-02-11 22:12:01

过分详细确实 – CHEWWWWWWWWWW

谢谢队友这个想法的工作！ – CHEWWWWWWWWWW

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

回答

相关问题