Javascript 使用jquery和canvas从html元素id到另一个html元素绘制线

仅仅通过引用元素id就可以用html和jquery划一条线吗？我在文本中有一个重要的词，我想在这个词和描述它的图像之间画一条线。我已经看到，可以使用画布在元素之间绘制，但它们的样式位置设置为绝对。因为我的元素是文本中的一个单词，所以我不能将其设置为绝对值。 范例

这是我的文本，其中有一个非常重要的词

...

现在我想在跨度和img之间画一条线。可能吗

---

提前谢谢

我举了一个非常粗糙的例子来说明我将如何去做。不过，这应该会让你走上正确的道路：

我为可悬停元素使用了类行，并为相应的元素使用了数据id属性

HTML:

<p>This is my <span class="line" data-id="important_img">text</span> with this very <span class="line" data-id="important_img2">important</span> word</p>...

<img src="important.jpg" id="important_img" />
<br>
<br>o asf isj biojso jo f ad f
<img src="important.jpg" id="important_img2" />

$('.line').hover(function () {
    var $t = $(this);
    var $i = $('#' + $t.data('id'));

    // find offset positions for the word (t = this) and image (i)
    var ot = {
        x: $t.offset().left + $t.width() / 2,
        y: $t.offset().top + $t.height() / 2
    };
    var oi = {
        x: $i.offset().left + $i.width() / 2,
        y: $i.offset().top + $i.height() / 2
    };

    // x,y = top left corner
    // x1,y1 = bottom right corner
    var p = {
        x: ot.x < oi.x ? ot.x : oi.x,
        x1: ot.x > oi.x ? ot.x : oi.x,
        y: ot.y < oi.y ? ot.y : oi.y,
        y1: ot.y > oi.y ? ot.y : oi.y
    };

    // create canvas between those points
    var c = $('<canvas/>').attr({
        'width': p.x1 - p.x,
        'height': p.y1 - p.y
    }).css({
        'position': 'absolute',
        'left': p.x,
        'top': p.y,
        'z-index': 1
    }).appendTo($('body'))[0].getContext('2d');

    // draw line
    c.strokeStyle = '#f00';
    c.lineWidth = 2;
    c.beginPath();
    c.moveTo(ot.x - p.x, ot.y - p.y);
    c.lineTo(oi.x - p.x, oi.y - p.y);
    c.stroke();
}, function () {
    $('canvas').remove();
});

这是我用这个非常重要的词写的文本
。。。



o asf isj biojso jo f ad f

jQuery:

<p>This is my <span class="line" data-id="important_img">text</span> with this very <span class="line" data-id="important_img2">important</span> word</p>...

<img src="important.jpg" id="important_img" />
<br>
<br>o asf isj biojso jo f ad f
<img src="important.jpg" id="important_img2" />

$('.line').hover(function () {
    var $t = $(this);
    var $i = $('#' + $t.data('id'));

    // find offset positions for the word (t = this) and image (i)
    var ot = {
        x: $t.offset().left + $t.width() / 2,
        y: $t.offset().top + $t.height() / 2
    };
    var oi = {
        x: $i.offset().left + $i.width() / 2,
        y: $i.offset().top + $i.height() / 2
    };

    // x,y = top left corner
    // x1,y1 = bottom right corner
    var p = {
        x: ot.x < oi.x ? ot.x : oi.x,
        x1: ot.x > oi.x ? ot.x : oi.x,
        y: ot.y < oi.y ? ot.y : oi.y,
        y1: ot.y > oi.y ? ot.y : oi.y
    };

    // create canvas between those points
    var c = $('<canvas/>').attr({
        'width': p.x1 - p.x,
        'height': p.y1 - p.y
    }).css({
        'position': 'absolute',
        'left': p.x,
        'top': p.y,
        'z-index': 1
    }).appendTo($('body'))[0].getContext('2d');

    // draw line
    c.strokeStyle = '#f00';
    c.lineWidth = 2;
    c.beginPath();
    c.moveTo(ot.x - p.x, ot.y - p.y);
    c.lineTo(oi.x - p.x, oi.y - p.y);
    c.stroke();
}, function () {
    $('canvas').remove();
});

$（'.line'）。悬停（函数（）{
var$t=$（本）；
var$i=$（“#”+$t.data（'id'）；
//查找单词（t=this）和图像（i）的偏移位置
var ot={
x:$t.offset（）.left+$t.width（）/2，
y:$t.偏移量（）.top+$t.高度（）/2
};
变量oi={
x:$i.offset（）.left+$i.width（）/2，
y:$i.偏移量（）.top+$i.高度（）/2
};
//x，y=左上角
//x1，y1=右下角
var p={
x:ot.xoi.x？ot.x:oi.x，
y:ot.yoi.y？ot.y:oi.y
};
//在这些点之间创建画布
变量c=$（''）.attr({
“宽度”：p.x1-p.x，
“高度”：p.y1-p.y
}).css({
'位置'：'绝对'，
“左”：p.x，
“顶部”：p.y，
“z索引”：1
}).appendTo（$（'body'））[0].getContext（'2d'）；
//划线
c、 strokeStyle='#f00'；
c、 线宽=2；
c、 beginPath（）；
c、 移动到（ot.x-p.x，ot.y-p.y）；
c、 lineTo（oi.x-p.x，oi.y-p.y）；
c、 笔划（）；
}，函数（）{
$（'canvas'）.remove（）；
});

演示：

<p>This is my <span class="line" data-id="important_img">text</span> with this very <span class="line" data-id="important_img2">important</span> word</p>...

<img src="important.jpg" id="important_img" />
<br>
<br>o asf isj biojso jo f ad f
<img src="important.jpg" id="important_img2" />

$('.line').hover(function () {
    var $t = $(this);
    var $i = $('#' + $t.data('id'));

    // find offset positions for the word (t = this) and image (i)
    var ot = {
        x: $t.offset().left + $t.width() / 2,
        y: $t.offset().top + $t.height() / 2
    };
    var oi = {
        x: $i.offset().left + $i.width() / 2,
        y: $i.offset().top + $i.height() / 2
    };

    // x,y = top left corner
    // x1,y1 = bottom right corner
    var p = {
        x: ot.x < oi.x ? ot.x : oi.x,
        x1: ot.x > oi.x ? ot.x : oi.x,
        y: ot.y < oi.y ? ot.y : oi.y,
        y1: ot.y > oi.y ? ot.y : oi.y
    };

    // create canvas between those points
    var c = $('<canvas/>').attr({
        'width': p.x1 - p.x,
        'height': p.y1 - p.y
    }).css({
        'position': 'absolute',
        'left': p.x,
        'top': p.y,
        'z-index': 1
    }).appendTo($('body'))[0].getContext('2d');

    // draw line
    c.strokeStyle = '#f00';
    c.lineWidth = 2;
    c.beginPath();
    c.moveTo(ot.x - p.x, ot.y - p.y);
    c.lineTo(oi.x - p.x, oi.y - p.y);
    c.stroke();
}, function () {
    $('canvas').remove();
});

---

由于这一点时不时出现，我已经付出了一些努力。它不是jquery，所以您可能可以简化到某种程度。仅供参考，此答案也发布在中，但请求是相同的。使用该问题的html和CSS，这里有一个jsbin演示

方法是创建一个浮动画布元素（粉色阴影），并将其放置在DOM的其余部分下面（使用z-index）。然后，我计算两个长方体边界上的点，它们与长方体中心之间的直线相对应。红色和蓝色方块实际上是随着线端点移动的div，可用于源、目标等注释

在这个jsbin中，您可以单击一个元素，然后获得一行，以便单击下一个元素。它会检测选定元素的悬停，如果将鼠标悬停在某个元素上，则会捕捉到目标

我不会在这里粘贴所有代码，但在客户端DOM坐标中，我们从一个x，y位置到另一个x，y位置画一条线的位置如下：

var lineElem;
function drawLineXY(fromXY, toXY) {
    if(!lineElem) {
        lineElem = document.createElement('canvas');
        lineElem.style.position = "absolute";
        lineElem.style.zIndex = -100;
        document.body.appendChild(lineElem);
    }
    var leftpoint, rightpoint;
    if(fromXY.x < toXY.x) {
      leftpoint = fromXY;
      rightpoint = toXY;
    } else {
      leftpoint = toXY;
      rightpoint = fromXY;
    }

    var lineWidthPix = 4;
    var gutterPix = 10;
    var origin = {x:leftpoint.x-gutterPix, 
                  y:Math.min(fromXY.y, toXY.y)-gutterPix};
    lineElem.width = Math.max(rightpoint.x - leftpoint.x, lineWidthPix) + 
      2.0*gutterPix;
    lineElem.height = Math.abs(fromXY.y - toXY.y) + 2.0*gutterPix;
    lineElem.style.left = origin.x;
    lineElem.style.top = origin.y;
    var ctx = lineElem.getContext('2d');
    // Use the identity matrix while clearing the canvas
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, lineElem.width, lineElem.height);
    ctx.restore();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#09f';
    ctx.beginPath();
    ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
    ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
    ctx.stroke();
}

θ是到第一个框角的角度，φ是实际的线角

要获得框在客户端坐标中的位置，您需要使用

elem.getBoundingClientRect（）

，这将产生左、顶、宽、高等信息，我使用它们来查找框的中心：

function getCentreOfElement(el) {
    var bounds = el.getBoundingClientRect();
    return {x:bounds.left + bounds.width/2.0,
            y:bounds.top + bounds.height/2.0};
}

---

把所有这些放在一起，你可以从一个元素到另一个元素画一条线

非常感谢你，安迪！我不知道的是offset（）方法，节日快乐：）