我有 n<div
>s,每个都有<h1
> 标题和<ul
> 中的项目列表。
我想将它们漂浮在画布上并从中绘制线条<div id="x"
> 列出项目 y 至<div id="z"
>。我正在使用 jQuery UI 来制作<div
> 可拖动。
canvas 元素位于页面下方的一部分(一段文本和一些表单元素位于其前面),但如果需要,我可以更改它。
[edit]
我用图表标记了问题,但让我添加此链接:图_(数学) :-)
我会将 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};
}
当你知道它们的位置后,将其添加到宽度/高度的一半,你将得到它们在页面上的中心位置。现在找到画布的位置并从之前找到的数字中减去它。如果您在这两点之间画一条线,它应该链接这两个 div。如果不清楚,我将如何编码:
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
EDIT顺便说一句,使用 findPos 函数,您还可以设置 div 相对于画布的初始位置(此处为 (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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)