jQuery - 使用canvas在div之间绘制线条

I have n <div>s, each with <h1> title and <ul> list of items in.

我有n

s,每个都有

标题和

项目列表。

I would like to float these over a canvas and draw lines from <div id="x"> list item y to <div id="z">. I am using jQuery UI to make the <div>s draggable.

我想在画布上浮动它们并从

列表项y到

绘制线条。我正在使用jQuery UI来使

s可拖动。

The canvas element is part way down the page (a paragraph of text and some form elements precede it) but I can change this if necessary.

canvas元素位于页面的下方(文本段落和一些表单元素在它之前)但是如果需要我可以更改它。

[edit]

I tagged the question with graph, but let me add this link: Graph_(mathematics) :-)

我用图表标记了问题,但是让我添加这个链接:Graph_(数学):-)

1 个解决方案

#1

I would make the div's positioning to absolute and then set them where you want. Then get their position with this function:

我会将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};
}

When you have their position, add it to half their width/height, and you will have the position of their center on the page. Now find the position of the canvas and substract it from the previously found numbers. If you draw a line between those two points, it should link the two divs. In case it's not clear, here's how I would code it:

当你有他们的位置时,将它加到他们的宽度/高度的一半,你将在页面上有他们的中心位置。现在找到画布的位置,并从之前找到的数字中减去它。如果你在这两个点之间画一条线,它应该链接两个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 By the way, using the findPos function you can also set the initial position of the divs relatively to the canvas (here at (30; 40)):

编辑顺便说一下,使用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";