在表格單元中查找每個圖片的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座標

回答

相關問題