Создайте прямую линию в mxGraph с событиями касания

MXGraph — это библиотека JavaScript для создания приложений для построения диаграмм, которая предоставляет множество функций для создания и управления графическими объектами, включая прямые линии. Вот пример того, как вы можете использовать MXGraph для создания прямой линии при касании пальцем в качестве начала и отпускании в качестве конца:

Настройка контейнера MXGraph

Создайте элемент контейнера в своем HTML-коде и инициализируйте экземпляр класса mxGraph в своем коде JavaScript.

<div id="graphContainer"></div>
var container = document.getElementById(“graphContainer”); var graph = new mxGraph(container);

Теперь вы можете настроить прослушиватель событий для событий touchstart и touchend в контейнере.

Когда срабатывает событие touchstart, вы можете создать новый объект mxCell для представления начала строки, а когда срабатывает событие touchend, вы можете создать новый объект mxCell для представления конца строки и соединить его с началом. клетка

var graph = new mxGraph(container);

graph.setPanning(true);
graph.setTooltips(false);

Реализуйте обработчики событий mouseup и mousedown для обновления геометрии линии на основе событий касания и отпускания пальца.

var edge = null;
var mouseListener =
{
    mouseDown: function(sender, evt)
    {
        // Check if the event is on a cell or not
        var cell = evt.getProperty('cell');
        if (!cell)
        {
            // Create a new edge starting at the mouse's current location
            edge = graph.insertEdge(parent, null, '', evt.getGraphX(), evt.getGraphY(), 0, 0);
        }
    },

    mouseMove: function(sender, evt)
    {
        if (edge != null)
        {
            // Update the end point of the edge as the mouse moves
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), false);
            graph.getModel().endUpdate();
        }
    },

    mouseUp: function(sender, evt)
    {
        if (edge != null)
        {
            // Finalize the edge by setting its end point and removing the mouse listener
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), true);
            edge = null;
            mxEvent.removeMouseListener(mouseListener);
        }
    }
};

mxEvent.addListener(container, 'mousedown', mouseListener.mouseDown);
mxEvent.addListener(container, 'mousemove', mouseListener.mouseMove);
mxEvent.addListener(container, 'mouseup', mouseListener.mouseUp);

Вот окончательный код

Вам нужно будет добавить необходимые библиотеки для работы mxGraph, такие как файлы JavaScript mxGraph и библиотеку jQuery. Кроме того, замените идентификатор элемента контейнера HTML в приведенном выше коде фактическим идентификатором элемента контейнера.

// Initialize mxGraph instance
var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);

graph.setPanning(true);
graph.setTooltips(false);

var model = graph.getModel();
var parent = graph.getDefaultParent();

// Create mouse listener
var edge = null;
var mouseListener =
{
    mouseDown: function(sender, evt)
    {
        // Check if the event is on a cell or not
        var cell = evt.getProperty('cell');
        if (!cell)
        {
            // Create a new edge starting at the mouse's current location
            edge = graph.insertEdge(parent, null, '', evt.getGraphX(), evt.getGraphY(), 0, 0);
        }
    },

    mouseMove: function(sender, evt)
    {
        if (edge != null)
        {
            // Update the end point of the edge as the mouse moves
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), false);
            graph.getModel().endUpdate();
        }
    },

    mouseUp: function(sender, evt)
    {
        if (edge != null)
        {
            // Finalize the edge by setting its end point and removing the mouse listener
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), true);
            edge = null;
            mxEvent.removeMouseListener(mouseListener);
        }
    }
};

// Add mouse listener to container
mxEvent.addListener(container, 'mousedown', mouseListener.mouseDown);
mxEvent.addListener(container, 'mousemove', mouseListener.mouseMove);
mxEvent.addListener(container, 'mouseup', mouseListener.mouseUp);

mxEvent.addGestureListeners(container, function(evt)
{
    // Prevent default gesture behavior (e.g. scrolling)
    evt.preventDefault();
});