मैं पूर्ण करने के लिए div की स्थिति बनाने के लिए और फिर उन्हें सेट अपने इच्छित स्थान पर होगा। ,
//Get the absolute position of a DOM object on a page
function findPos(obj) {
var curLeft = curTop = 0;
if (obj.offsetParent) {
do {
curLeft += obj.offsetLeft;
curTop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {x:curLeft, y:curTop};
}
आप उनकी स्थिति है जब यह उनके आधे चौड़ाई/ऊंचाई को जोड़ने के लिए, और आप पृष्ठ पर अपने केंद्र की स्थिति होगा: तो फिर इस समारोह के साथ अपनी स्थिति मिलता है। अब कैनवास की स्थिति पाएं और पहले पाए गए नंबरों से इसे घटाएं। यदि आप उन दो बिंदुओं के बीच एक रेखा खींचते हैं, तो इसे दो divs को जोड़ना चाहिए। मामले में यह स्पष्ट नहीं है, यहाँ मैं इसे कैसे कोड होता है: findPos ढंग से काम आप भी (यहाँ पर अपेक्षाकृत कैनवास को divs की प्रारंभिक स्थिति निर्धारित कर सकते हैं
var centerX = findPos(document.getElementById('x'));
centerX.x += document.getElementById('x').style.width;
centerX.y += document.getElementById('x').style.height;
var centerZ = findPos(document.getElementById('Z'));
centerZ.x += document.getElementById('z').style.width;
centerZ.y += document.getElementById('z').style.height;
//Now you've got both centers in reference to the page
var canvasPos = findPos(document.getElementById('canvas'));
centerX.x -= canvasPos.x;
centerX.y -= canvasPos.y;
centerZ.x -= canvasPos.x;
centerZ.y -= canvasPos.y;
//Now both points are in reference to the canvas
var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(centerX.x, centerX.y);
ctx.lineTo(centerZ.x, centerZ.y);
ctx.stroke();
//Now you should have a line between both divs. You should call this code each time the position changes
संपादित वैसे, का उपयोग करते हुए (30; 40)):
var position = {x: 30, y: 40};
var canvasPos = findPos(document.getElementById('canvas'));
var xPos = canvasPos.x + position.x;
var yPos = canvasPos.y + position.y;
document.getElementById('x').style.left = xPos+"px";
document.getElementById('x').style.top = yPos+"px";