0

В общем цель, вроде простая, нужно на канвасе нарисовать несколько картинок и соединить их линиям(типа графа). Причем картинки можно было бы таскать по канвасу и, чтобы соответственно соединения тоже двигались. Легче нарисовать...В js вообще не силен, весь мозг сломал. помогите кто чем может.

введите сюда описание изображения

1 ответ 1

3

Общий принцип - задаете модель данных, которая будет содержать координаты узлов и их связи. Затем рисуете на канве по этим данным картинку. Далее, используя события мышки, меняете координаты узлов в модели и перерисовываете.

Рабочий пример в простыне ниже. Под реальное использование надо дорабатывать (например ограничить перетаскивание границами канвы, чтобы узлы не выходили за границы).

window.onload = function() {
  var canvas,
    ctx,
    nodes,
    links,
    render,
    getMousePosFromEvent,
    getNodeByPos,
    dragNode,
    dragPoint;

  canvas = document.getElementById('viewport');
  ctx = canvas.getContext('2d');

  // Массив узлов, каждый узел задается объектом с координатами и id картинки для отображения.
  nodes = [{
    x: 300,
    y: 50,
    id: 'picture_a'
  }, {
    x: 200,
    y: 100,
    id: 'picture_b'
  }, {
    x: 400,
    y: 100,
    id: 'picture_c'
  }];

  // Массив связей между узлами. Каждый элемент это массив из двух элементов - индексов узлов.
  links = [
    [0, 1],
    [0, 2]
  ];

  // Отрисовка канвы.
  render = function() {

    // Очищаем канву.
    ctx.fillStyle = "#f3f3f3";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Рисуем связи между узлами (раньше чем сами узлы, чтобы они отображались позади узлов).
    links.forEach(function(link) {
      var i0 = link[0],
        i1 = link[1];
      ctx.fillStyle = "#000";
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(nodes[i0].x, nodes[i0].y);
      ctx.lineTo(nodes[i1].x, nodes[i1].y);
      ctx.stroke();
    });

    // Рисуем узлы.
    nodes.forEach(function(node) {
      var img = document.getElementById(node.id),
        halfWidth = img.naturalWidth / 2,
        halfHeight = img.naturalHeight / 2;
      ctx.drawImage(img, node.x - halfWidth, node.y - halfHeight);
    });
  };

  // Получает из события мыши координаты, относительно левого верхнего угла канвы.
  getMousePosFromEvent = function(evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  };

  // Находит узел, находящийся по заданой координате на канве.
  getNodeByPos = function(pos) {
    var result;
    nodes.forEach(function(node) {
      var img = document.getElementById(node.id),
        halfWidth = img.naturalWidth / 2,
        halfHeight = img.naturalHeight / 2;
      if ((pos.x >= node.x - halfWidth) && (pos.x < node.x + halfWidth) && (pos.y >= node.y - halfHeight) && (pos.y < node.y + halfHeight)) {
        result = node;
      }
    });
    return result;
  };

  // При нажатии кнопки мыши находим узел по которому было нажатие,
  // запоминаем его в dragNode для дальнейшего использования,
  // в dragPoint запоминаем по какому месту узла была нажата кнопка мыши.
  canvas.addEventListener('mousedown', function(event) {
    var pos = getMousePosFromEvent(event);
    dragNode = getNodeByPos(pos);
    if (dragNode !== undefined) {
      dragPoint = {
        x: pos.x - dragNode.x,
        y: pos.y - dragNode.y
      }
    }
  }, false);

  // При отпускании кпнопки мыши забываем текущий перетаскиваемый узел.
  canvas.addEventListener('mouseup', function() {
    dragNode = undefined;
  }, false);

  // При движении мыши, если есть перетаскиваемый узел, двигаем его и перерисовываем канву.
  canvas.addEventListener('mousemove', function(event) {
    var pos;
    if (dragNode !== undefined) {
      pos = getMousePosFromEvent(event);
      dragNode.x = pos.x - dragPoint.x;
      dragNode.y = pos.y - dragPoint.y;
      render();
    }
  }, false);

  render();
};
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="main.js"></script>
</head>

<body>
  <canvas id="viewport" width="600" height="170">
    <img id="picture_a" src="http://i.imgur.com/Q9fzHk0.png">
    <img id="picture_b" src="http://i.imgur.com/wJAe7OY.png">
    <img id="picture_c" src="http://i.imgur.com/ETsgbhe.png">
  </canvas>
</body>

</html>

4
  • спасибо большое! то что нужно. А еще такой вопрос. Как обработчик события повесить на изображение? Допустим чтоб при клике всплывал див откуда-нибудь справа
    – Финат
    7 мая 2016 в 13:32
  • Вы имеете в виду на картинку, которая на канвасе рисуется (узел графа) ? 7 мая 2016 в 13:55
  • именно, у меня чего-то не получается?
    – Финат
    7 мая 2016 в 14:00
  • Напрямую на картинку обработчик не получится установить. Можно только целиком на canvas, а далее уже по координатам определять, попадает ли клик на картинку. 7 мая 2016 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.