jQuery - 使用画布在 div 之间画线答案

【问题标题】：jQuery - use canvas to draw lines between divsjQuery - 使用画布在 div 之间画线
【发布时间】：2009-07-09 14:37:39
【问题描述】：

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

我想将它们漂浮在画布上并从<div id="x"> 列表项y 到<div id="z"> 画线。我正在使用 jQuery UI 使 <div>s 可拖动。

canvas 元素位于页面下方（一段文本和一些表单元素在其前面），但如有必要，我可以更改它。

[编辑]

我用图表标记了这个问题，但让我添加这个链接：Graph_(mathematics) :-)

【问题讨论】：

标签： javascript jquery graph canvas

【解决方案1】：

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

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

【讨论】：