Javascript 如何使用 JQuery 在 2 个元素之间画一条线并刷新那条线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4712189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a line between 2 elements using JQuery and refreshing that line?
提问by StuperUser
I am using JQuery-UI draggables and droppables to clone elements onto a div. What is the best way to draw a line between elements on a page using JQuery.
我正在使用 JQuery-UI draggables 和 droppables 将元素克隆到 div 上。使用 JQuery 在页面上的元素之间绘制一条线的最佳方法是什么。
What is the best way to refresh lines on the page? I will have multiple lines on the page and only want to update a particular line rather than refresh every line.
刷新页面上的行的最佳方法是什么？我将在页面上有多行，只想更新特定行而不是刷新每一行。
采纳答案by StuperUser
I now have this working.
我现在有这个工作。
In my experience, don't use jquery.svg, it may have been the pressure to solve it without learning my way around another plugin, but I found it more hassle than it was worth and caused compatibilty issues.
根据我的经验，不要使用 jquery.svg，在不学习其他插件的情况下解决它可能是一种压力，但我发现它比它的价值更麻烦并导致兼容性问题。
It's possible to solve using the HTML5 canvas and excanvas compatibility script, and a great html5 walkthrough, BUT because of how the HTML5 canvas works, it requires that all the linse on the canvas are destroyed and redrawn if a line needs to be removed or its position needs to be updated.
可以使用 HTML5 画布和excanvas 兼容性脚本以及一个很棒的 html5 演练来解决，但是由于 HTML5 画布的工作方式，如果需要删除一行或其位置需要更新。
The elements that I draw lines between are inside a parent element that represents a relationship. The child elements represent a start and end, so I can redraw all of these relationships by getting a collection of the parents using e.g. $('.relationshipClass')and interrogating the set's elements' children to get the points of the line.
To use this code you will have to come up with an approach to easily get the line points available to redraw.
我在其间画线的元素位于表示关系的父元素内。子元素表示开始和结束，因此我可以通过使用 eg 获取父项的集合$('.relationshipClass')并询问集合的元素的子项以获取线的点来重绘所有这些关系。
要使用此代码，您必须想出一种方法来轻松获取可用于重绘的线点。
Markup:
Nice and simple, a html <div>to hold any elements that are drawn between (most probably JQuery UI draggables), and a <canvas>that will be in the same position
标记：
漂亮而简单，一个 html<div>来保存在（很可能是 JQuery UI 可拖动的）之间绘制的任何元素，以及一个<canvas>将在相同位置的元素
<div id="divCanvasId" class="divCanvasClass"></div>
<canvas id="html5CanvasId"></canvas>
CSS:
Don't control the <canvas>element's width with CSS, see Question on Canvas streching. Position the <canvas>in the same position as the <div>and behind it (with the z-index), this will show the lines up behind the <div>and prevent the <canvas>from blocking any drag and drop interactions with the <div>'s children.
CSS：
不要<canvas>使用 CSS控制元素的宽度，请参阅有关 Canvas 拉伸的问题。将 放置<canvas>在与<div>和 后面相同的位置（使用 z 索引），这将显示 后面的线<div>并防止<canvas>阻止与<div>的孩子的任何拖放交互。
canvas
{
background-color: #FFFFFF;
position: absolute;
z-index: -10;
/* control height and width in code to prevent stretching */
}
Javascript approach:
Create utility methods: the example code is inside a JQuery pluginthat contains:
Javascript 方法：
创建实用程序方法：示例代码位于JQuery 插件中，其中包含：
- A helper function to reset the canvas (changing the width will delete all of
- A helper function to draw lines between two elements
- A function that draws lines between all the elements that require one
- 重置画布的辅助函数（更改宽度将删除所有
- 在两个元素之间画线的辅助函数
- 在所有需要一个元素之间画线的函数
When you add a new line or adjust the position of a line, you destroy the existing lines and draw all of the lines. You can put the code below into conventional functions or leave as a plugin.
添加新线或调整线的位置时，会破坏现有线并绘制所有线。您可以将下面的代码放入常规函数或作为插件保留。
Javascript code:
N.B. not tested after anonymisation.
Javascript 代码：
匿名后未测试。
$(document).ready(function () {
$.fn.yourExt = {
_readjustHTML5CanvasHeight: function () {
//clear the canvas by readjusting the width/height
var html5Canvas = $('#html5CanvasId');
var canvasDiv = $('#divCanvasId');
if (html5Canvas.length > 0) {
html5Canvas[0].width = canvasDiv.width();
html5Canvas[0].height = canvasDiv.height();
}
}
,
//uses HTML5 <canvas> to draw line representing relationship
//IE support with excanvas.js
_drawLineBetweenElements: function (sourceElement, targetElement) {
//draw from/to the centre, not the top left
//don't use .position()
//that will be relative to the parent div and not the page
var sourceX = sourceElement.offset().left + sourceElement.width() / 2;
var sourceY = sourceElement.offset().top + sourceElement.height() / 2;
var targetX = targetElement.offset().left + sourceElement.width() / 2;
var targetY = targetElement.offset().top + sourceElement.height() / 2;
var canvas = $('#html5CanvasId');
//you need to draw relative to the canvas not the page
var canvasOffsetX = canvas.offset().left;
var canvasOffsetY = canvas.offset().top;
var context = canvas[0].getContext('2d');
//draw line
context.beginPath();
context.moveTo(sourceX - canvasOffsetX, sourceY - canvasOffsetY);
context.lineTo(targetX - canvasOffsetX, targetY - canvasOffsetY);
context.closePath();
//ink line
context.lineWidth = 2;
context.strokeStyle = "#000"; //black
context.stroke();
}
,
drawLines: function () {
//reset the canvas
$().yourExt._readjustHTML5CanvasHeight();
var elementsToDrawLinesBetween;
//you must create an object that holds the start and end of the line
//and populate a collection of them to iterate through
elementsToDrawLinesBetween.each(function (i, startEndPair) {
//dot notation used, you will probably have a different method
//to access these elements
var start = startEndPair.start;
var end = startEndPair.end;
$().yourExt._drawLineBetweenElements(start, end);
});
}
You can now call these functions from event handlers (e.g. JQuery UI's drag event) to draw lines.
您现在可以从事件处理程序（例如JQuery UI 的拖动事件）调用这些函数来绘制线条。
回答by hungryMind
Make a hr or div with 1px height set background, and animate its width using jquery when needed.
使用 1px 高度设置背景制作 hr 或 div，并在需要时使用 jquery 为其宽度设置动画。
