如何使用JQuery在2个元素之间画一条线和刷新那行？ [英] How to draw a line between 2 elements using JQuery and refreshing that line?
问题描述
我使用JQuery-UI draggables和droppables将元素克隆到div。
在页面上使用JQuery在元素之间绘制一条线的最好方法。
在页面上刷新行的最好方法是什么？我将在页面上有多行，只想更新特定的行，而不是刷新每行。
这个工作。
在我的经验，不要使用jquery.svg，它可能是解决它的压力，没有学习我的方式围绕另一个插件，但我发现
可以使用HTML5画布和 excanvas兼容性脚本和伟大的html5演练，但因为HTML5画布的工作原理，所以如果一行需要被删除或者它的位置需要被更新，它需要在canvas上的所有linse被销毁和重画。
我画的线之间的元素在代表关系的父元素内。子元素代表一个开始和结束，所以我可以重画所有这些关系，得到一个父母的集合使用例如。 $（'。relationshipClass'）并询问集合的元素的子元素以获得行的点。
要使用此代码，
标记：
很简单，一个html < div> 来保存绘制在（很可能是JQuery UI拖拽元素）和< canvas> 将位于相同位置
< div id =divCanvasIdclass =divCanvasClass> < / div>
< canvas id =html5CanvasId>< / canvas>
CSS：
< canvas> 元素的宽度与CSS，请参阅帆布拉伸问题。将< canvas> 置于与< div> index），这将显示< div> 后面的行，并阻止< canvas> 与< div> 的孩子的任何拖放交互。
canvas
{
background-color：#FFFFFF;
position：absolute;
z-index：-10;
/ *控制代码中的高度和宽度以防止伸展* /
}
Javascript方法：
创建实用程序方法：示例代码位于 JQuery插件，其中包含：
- 一个帮助函数重置画布（更改宽度将删除所有
- 用于在两个元素之间绘制线条的辅助函数
- 在需要一个元素的所有元素之间绘制线条的函数
添加新行或调整行的位置时，将销毁现有行并绘制所有行
您可以将代码
NB匿名后未经测试。 p>
$（document）.ready（function（）{
$ .fn.yourExt = {
_readjustHTML5CanvasHeight：function（）{
//通过重新调整宽度/高度来清除画布
var html5Canvas = $（'＃html5CanvasId'）;
var canvasDiv = $（'＃divCanvasId'）;
if（html5Canvas.length> 0）{
html5Canvas [0] .width = canvasDiv.width（）;
html5Canvas [0] .height = canvasDiv.height（）;
}
}
，
//使用HTML5< canvas>绘制线代表关系
//使用excanvas.js的IE支持
_drawLineBetweenElements：function（sourceElement，targetElement）{
//从中心绘制/ left
//不使用.position（）
//将相对于父div而不是页面
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'）;
//你需要相对于画布而不是页面绘制
var canvasOffsetX = canvas.offset（）。left;
var canvasOffsetY = canvas.offset（）。top;
var context = canvas [0] .getContext（'2d'）;
//绘制行
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（）{
//重置画布
$（）。yourExt._readjustHTML5CanvasHeight（）;
var elementsToDrawLinesBetween;
//你必须创建一个包含行开始和结束的对象
//并填充它们的集合以遍历
elementsToDrawLinesBetween.each（function（i，startEndPair）{
//使用点符号，你可能有不同的方法
//来访问这些元素
var start = startEndPair.start;
var end = startEndPair.end;
$（）。yourExt._drawLineBetweenElements（start，end）;
}）;
}
现在可以从事件处理程序调用这些函数（例如 JQuery UI的拖动事件）来绘制线条。
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.
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.
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.
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.
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.
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
<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.
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 plugin that contains:
- 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.
$(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在2个元素之间画一条线和刷新那行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
