Как нарисовать линию между двумя элементами, используя JQuery и обновив эту линию? - PullRequest
Новая
       12

Как нарисовать линию между двумя элементами, используя JQuery и обновив эту линию?

15 голосов
/ 17 января 2011

Я использую перетаскиваемые и сбрасываемые объекты JQuery-UI для клонирования элементов в div. Как лучше всего провести линию между элементами на странице, используя JQuery.

Каков наилучший способ обновления строк на странице? У меня будет несколько строк на странице, и я хочу обновить только конкретную строку, а не обновлять каждую строку.

Ответы [ 2 ]

14 голосов
/ 08 февраля 2011

У меня теперь это работает.

По моему опыту, не используйте jquery.svg, возможно, это было давление, чтобы решить его, не изучая мой путь вокруг другого плагина, но я нашел это более труднымчем это стоило и вызвало проблемы с совместимостью.

Это можно решить, используя холст HTML5 и сценарий совместимости excanvas , и отличный обзор html5 , НО из-за того, какхолст HTML5 работает, он требует, чтобы все линзы на холсте были уничтожены и перерисованы, если необходимо удалить линию или обновить ее положение.

Элементы, между которыми я рисую линии, находятся внутри родительского элемента.элемент, который представляет отношения.Дочерние элементы представляют начало и конец, поэтому я могу перерисовать все эти отношения, получив коллекцию родителей, используя, например, $('.relationshipClass') и опросив дочерние элементы набора, чтобы получить точки линии.
Чтобы использовать этокод, который вы должны будете придумать, чтобы легко получить точки линии, доступные для перерисовки.

Разметка:
Хорошо и просто, HTML <div> для хранения любых элементовкоторые рисуются между (наиболее вероятно, перетаскиваемыми элементами JQuery UI) и <canvas>, который будет находиться в той же позиции 

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

CSS:
Не контролируйте <canvas> ширина элемента с помощью CSS, см. Вопрос по растяжке холста .Расположите <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:
Создание служебных методов: пример кода находится внутри плагина JQuery , который содержит:

  • Вспомогательная функция для сброса холста (изменение ширины удалит все из
  • Вспомогательная функция для рисования линий между двумя элементами
  • Функция, которая рисует линиимежду всеми элементами, которым требуется один

Когда вы добавляете новую линию или корректируете положение линии, вы уничтожаете существующие линии и рисуете все линии. Вы можете поместить приведенный ниже код в обычныйфункции или оставить как плагин.

код Javascript:
NB не проверен после анонимизации. 

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

Теперь вы можете вызывать эти функции из обработчиков событий (например Событие перетаскивания пользовательского интерфейса JQuery ) для рисования линий.

0 голосов
/ 17 января 2011

Создайте час или дел с фоном, установленным высотой 1px, и анимируйте его ширину, используя jquery, когда это необходимо.

...