Wie zu zeichnen eine Linie zwischen 2 Elementen mit JQuery und erfrischend?

Ich jetzt diese Arbeit.

Meiner Erfahrung, nicht mit jquery.svg kann es haben, war der Druck, es zu lösen, ohne zu lernen, meinen Weg in einem anderen plugin, aber ich fand es mehr ärger als es Wert war und verursachte Kompatibilitätsprobleme.

Ist es möglich, die Lösung mit dem HTML5-canvas und excanvas-Kompatibilität-Skriptund eine großartige html5-DurchlaufSONDERN weil, wie die HTML5-canvas arbeitet, ist es erforderlich, dass alle, die linse auf die Leinwand zerstört sind und neu gezeichnet, wenn in einer Zeile muss entfernt werden, oder seine position aktualisiert werden muss.

Elemente, die ich zeichnen von Linien zwischen sind in einem übergeordneten element, der für eine Beziehung. Die untergeordneten Elemente repräsentieren Anfang und Ende, so kann ich das Neuzeichnen alle diese Beziehungen, indem Sie eine Sammlung der Eltern mit z.B. $('.relationshipClass') und verhören Sie die set-Elemente' Kinder bekommen die Punkte der Linie.

Um diesen code zu verwenden, die Sie haben zu kommen mit einem Ansatz zu leicht für die Linie-Punkte neu zu zeichnen.

Markup:

Schön und einfach, eine html - <div> zu halten-Elemente, die gezogen werden zwischen (wahrscheinlich JQuery UI draggables), und eine <canvas> werden in der gleichen position

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

CSS:

Keine Kontrolle über die <canvas> element Breite mit CSS, siehe Frage auf Leinwand Stretching. Position der <canvas> in der gleichen position wie die <div> und dahinter (mit dem z-index), wird dies zeigen die Linien bis hinter die <div> und verhindern, dass die <canvas> blockieren jede drag-and-drop-Interaktionen mit der <div>'s Kinder.

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

Javascript:

Erstellen Methoden: das Beispiel-code in einem JQuery-plugin enthält:

• Eine helper-Funktion zum zurücksetzen der Leinwand (ändern der Breite wird löschen Sie alle von
• Eine helper-Funktion zum zeichnen von Linien zwischen zwei Elementen
• Eine Funktion, zieht Linien zwischen allen Elementen, die erfordern, dass man

Beim hinzufügen einer neuen Zeile oder passen Sie die position einer Linie, Sie zu zerstören, die bestehenden Linien und das zeichnen der Linien.
Sie können den code unten in den konventionellen Funktionen oder verlassen wie ein plugin.

Javascript-code:

N. B. nicht getestet nach Anonymisierung.

$(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);
        });
    }

Nun können Sie diese Funktionen aufrufen von Ereignis-Handlern (z.B. JQuery UI drag event), um Linien zu zeichnen.

InformationsquelleAutor der Antwort StuperUser