Comment tracer une ligne entre deux éléments en utilisant JQuery et en rafraîchissant cette ligne?

J'ai maintenant ce travail.

Dans mon expérience, ne pas utiliser jquery.svg, il peut avoir été la pression de le résoudre sans avoir à apprendre mon chemin autour d'un autre plugin, mais je l'ai trouvé plus de tracas que ce qu'il valait et causé des problèmes de compatibilité.

Il est possible de résoudre en utilisant le HTML5 canvas et excanvas script de compatibilitéet un grand html5 procédure pas à pasMAIS à cause de la façon dont le HTML5 canvas fonctionne, il faut que tous les linse sur la toile sont détruits et redessiné si une ligne doit être supprimé ou sa position doit être mis à jour.

Les éléments que j'ai tracer des lignes entre sont à l'intérieur d'un élément parent qui représente une relation. L'enfant les éléments représentent un début et une fin, donc je peux redessiner l'ensemble de ces relations par l'obtention d'une collection des parents par exemple à l'aide $('.relationshipClass') et l'interrogation de l'ensemble des éléments enfants à obtenir les points de la ligne.

Pour utiliser ce code, vous aurez à venir avec une approche pour obtenir plus facilement la ligne de points disponibles pour les redessiner.

Balisage:

Belle et simple, un html <div> afin de conserver tous les éléments qui sont établis entre (probablement JQuery UI draggables), et un <canvas> qui seront dans la même position

 <div id="divCanvasId" class="divCanvasClass"></div>
 <canvas id="html5CanvasId"></canvas>

CSS:

Ne pas contrôler la <canvas> de l'élément de largeur avec CSS, voir Question sur Toile streching. La Position de la <canvas> dans la même position que le <div> et derrière tout ça (avec le z-index), cela permettra de montrer les lignes de derrière les <div> et de prévenir la <canvas> de blocage de tout faire glisser et déposer des interactions avec les <div>'s enfants.

canvas
{
    background-color: #FFFFFF;
    position: absolute;
    z-index: -10;
    /* control height and width in code to prevent stretching */
}

Javascript approche:

Créer des méthodes de l'utilitaire: le code de l'exemple est à l'intérieur d'un Plugin JQuery qui contient:

• Une fonction d'assistance pour réinitialiser la toile (modification de la largeur de supprimer tous
• Une fonction d'aide à tracer des lignes entre deux éléments
• Une fonction qui trace des lignes entre tous les éléments qui nécessitent un

Lorsque vous ajoutez une nouvelle ligne ou d'ajuster la position d'une ligne, vous détruisez les lignes existantes et à en tirer toutes les lignes.
Vous pouvez mettre le code ci-dessous dans les fonctions ou laisser comme un plugin.

Code Javascript:

N. B. pas testé après 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);
});
}

Vous pouvez maintenant appeler ces fonctions de gestionnaires d'événements (par exemple,JQuery UI événement glisser) pour dessiner des lignes.