jQuery - 使用画布在 div 之间画线 [英] jQuery - use canvas to draw lines between divs

问题描述

我有 n 个

> ，每个都有 > 标题和 > 项目列表.

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

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

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

解决方案

我会将 div 的定位设为绝对，然后将它们设置在您想要的位置.然后用这个函数获取他们的位置:

//获取DOM对象在页面上的绝对位置函数 findPos(obj) {var curLeft = curTop = 0;如果(obj.offsetParent){做 {curLeft += obj.offsetLeft;curTop += obj.offsetTop;} while (obj = obj.offsetParent);}返回 {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;//现在您已经获得了参考页面的两个中心var canvasPos = findPos(document.getElementById('canvas'));centerX.x -= canvasPos.x;centerX.y -= canvasPos.y;centerZ.x -= canvasPos.x;centerZ.y -= canvasPos.y;//现在两个点都参考画布var ctx = document.getElementById('canvas').getContext('2d');ctx.beginPath();ctx.moveTo(centerX.x, centerX.y);ctx.lineTo(centerZ.x, centerZ.y);ctx.stroke();//现在你应该在两个div之间有一条线.每次位置更改时都应调用此代码

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

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

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.

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.

[edit]

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

解决方案

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

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 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 - 使用画布在 div 之间画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！