jQuery - 使用canvas在div之间绘制线条 [英] jQuery - use canvas to draw lines between divs

问题描述

我有n < div > s，每个都有< h1 > title和< ul >项目列表。

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

我想将这些浮动在画布上，并从< div id =x>列表项y到< div id =z>。我使用jQuery UI来使< div > s draggable。

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.

[edit]

我用图表标记了问题，但我要添加以下链接： Graph_ （数学）： - ）

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

推荐答案

我会将div的位置设置为absolute， 。然后使用此函数获取它们的位置：

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

//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。如果不清楚，我将如何编码：

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:

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相对于canvas的初始位置（这里是（30; 40））：

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)):

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";

这篇关于jQuery - 使用canvas在div之间绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！