从html元素id到另一个具有jquery和canvas的html元素的线 [英] Draw line from html element id to another html element with jquery and canvas

问题描述

是否可以通过引用元素id来绘制一条带有html和jquery的线？我在一个文本中有一个重要的词，想在这个词和描述它的图像之间画一条线。我已经看到，有可能在画布之间绘制元素，但他们有风格位置设置为绝对。因为我的元素是一个文字中的单词，我不能将其设置为绝对。
例子

 < p>这是我的文本，带有这个< span id =important_word>重要< / span>字< / p> 
 ... 
< img src =important.jpgid =important_img/> 
  

现在我想在span和img之间画一条线。是否有可能？

提前感谢！

解决方案

一个非常粗糙的例子我如何去。它应该设置你在正确的轨道，虽然：

我使用类线为悬停元素和相应的元素的数据ID属性。

HTML ：

 < p& span class =linedata-id =important_img> text< / span>与此非常< span class =linedata-id =important_img2> important< / span>字< / p> ... 
 
< img src =important.jpgid =important_img/> 
< br> 
< br> o asf isj biojso jo f ad f 
< img src =important.jpgid =important_img2/> 
   
 
 
 
  jQuery ：
  $（'。line'）。hover（function（）{
 var $ t = $（this）; 
 var $ i = ＃'+ $ t.data（'id'））; 
 
 //找到单词（t = this）和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 =左上角
 // x1，y1 =右下角
 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 
}; 
 
 / /在这些点之间创建画布
 var c = $（'< canvas />'）。attr（{
'width'：p.x1  -  px，
'height' p.y1  -  py 
}）。css（{
'position'：'absolute'，
'left'：px，
'top'：py，
'z-index'：1 
}）。appendTo（$（'body'））[0] .getContext（'2d'）; 
 
 //绘制线条
 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（）; 
}）; 
  
 演示：
 
 
 
  http://jsfiddle.net/v8pbc/  
 
Is it possible to draw a line with html and jquery just by refering to the element id? I have an important word in a text and want to draw a line between this word and an image that describes it. I have seen that that it is possible to draw between elements with canvas but they have style position set to absolute. Since my element is a word in a text I can't set it to absolute. 
Example
<p>This is my text with this very <span id="important_word">important</span> word</p>
...
<img src="important.jpg" id="important_img"/>
Now I want a line drawn between the span and the img. Is it possible?

Thanks in advance!
解决方案
I made a very crude example of how i'd go about it. It should set you on the right track though:

I used class line for hoverable elements and a data-id attribute for the corresponding element.

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" />
jQuery:
$('.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();
});
Demo:

http://jsfiddle.net/v8pbc/

                        
这篇关于从html元素id到另一个具有jquery和canvas的html元素的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！