3

Что хочу получить: введите сюда описание изображения

Картинка для визуализации. Задача состоит в том что бы связывать блоки (динамически протянуть стрелку от одного блок к другому) и в конце получить структуру для дальнейшей работы. Например:

a link to b

b link to c

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

перетаскивания сделал так:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 50px; height: 50px; padding: 0.5em; }
  #draggable1 { width: 50px; height: 50px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });

  $(function() {
    $( "#draggable1" ).draggable();
  });

  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me</p>
</div>

<div id="draggable1" class="ui-widget-content">
  <p>Drag me</p>
</div>

</body>
</html>
1
  • Вас что-то в этом духе интересует? graphonline.ru
    – pank
    26 мая 2016 в 20:45

1 ответ 1

6
+100

Рабочий вариант, но код не в лучшем виде. Ссылка на plunker.

"use strict";

var can = $("#can").get(0), ctx = can.getContext('2d');

var boxes = [];

function get_box(x, y) {
  for (var box of boxes) {
    if (x >= box.x && x < box.x + box.w && y >= box.y && y < box.y + box.h) {
      return box;
    }
  }
  return null;
}

function getxy(e) { return {x:e.clientX, y:e.clientY}; }

class Box {
  constructor(x, y, w, h) {
    this.x = x; this.y = y;
    this.w = w; this.h = h;
    this.drag = null;
    this.name = String.fromCharCode("A".charCodeAt() + boxes.length);
    boxes.push(this);
  }
  on_mouse_down(e) { 
    this.drag = {
      oldx: this.x, oldy: this.y, // old position of box
      msx: e.clientX, msy: e.clientY // mouse start x, y
    };
  }
  on_mouse_move(e) {
    if (!this.drag) return;
    var dx = e.clientX - this.drag.msx, dy = e.clientY - this.drag.msy;
    this.x = this.drag.oldx + dx;
    this.y = this.drag.oldy + dy;
    draw_boxes();
  }
  on_mouse_up(e) {
    this.drag = null;
  }
  draw() {
    ctx.save();
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.font = "30px Georgia";
    ctx.fillStyle = "white";
    ctx.fillText(this.name, this.x + 10, this.y + 30);
    ctx.restore();
  }
  center() {
    return {x: this.x + Math.floor(this.w/2), y: this.y + Math.floor(this.h/2) };
  }
}

var link = null, links = [];

function on_mouse_event(method_name) {
  return function (e) { for (var box of boxes) box[method_name](e); }
}
$("#can").mousedown(function (e) {
  var p = getxy(e), b = get_box(p.x, p.y);
  if (e.shiftKey) {
    new Box(p.x, p.y, 50, 50);
    draw_all();
    return;
  }
  if (!b) return;
  if (e.ctrlKey) {
    link = {b};
    return;
  }
  get_box(p.x, p.y).on_mouse_down(e);
});
$("#can").mousemove((e) => { 
  if (link) {
    link.t = getxy(e);
  } else {
    for (var box of boxes) box.on_mouse_move(e);
  }
  draw_all();
});
$("#can").mouseup((e) => { 
  var x = e.clientX, y = e.clientY, b = get_box(x, y);
  if (link) {
    if (link.b == b || !b) {
      link = null;
      return;
    }
    links.push({from:link.b, to:b});
  } else {
    for (var box of boxes) box.on_mouse_up(e);
  }
  link = null;
});

$("#getlinks").click((e) => {
  var msg = "";
  for (var l of links) {
    msg += `Box "${l.from.name}" свзяан с Box "${l.to.name}"<br>`;
  }
  $("#res").html(msg);
});

new Box(10, 10, 50, 50);
new Box(150, 150, 50, 50);

function draw_boxes() {
  for (var box of boxes) {
    box.draw();
  }
}

function draw_links() {
  for (var l of links) {
    var bc1 = l.from.center(), bc2 = l.to.center();
    ctx.beginPath();
    ctx.moveTo(bc1.x, bc1.y);
    ctx.lineTo(bc2.x, bc2.y);
    ctx.stroke();
  }
}

function draw_link() {
  var bc = link.b.center();
  ctx.beginPath();
  ctx.moveTo(bc.x, bc.y);
  ctx.lineTo(link.t.x, link.t.y);
  ctx.stroke();
}

function draw_all() {
  ctx.clearRect(0, 0, can.width, can.height);
  draw_links();
  draw_boxes();
  if (link) draw_link();
}

draw_all();
html,
body {
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <canvas id="can" width="300" height="300">
    This text is displayed if your browser does not support HTML5 Canvas.
  </canvas>
</div>

<hr>MouseMove -- перемещение коробок.
<br>Shift + Click -- добавить коробку.
<br>Ctrl (на коробке) + MouseMove -- провести линию.
<br>
<hr>
<button id="getlinks">Получить все связи</button>
<p id="res"></p>

5
  • А каким способом в конце можно получить список что с чем связано ? Что-то вроде, а связано с б, б связано с с, с связано с а.
    – santer
    27 мая 2016 в 5:47
  • @santer, все связи находятся в массиве links. Каждая связь это объект вида {from: box1, to: box2}. Можно всем box'ам дать имена и тогда все связи можно получить так: for (var link of links) console.log(link.from.name, link.to.name);
    – pank
    27 мая 2016 в 7:43
  • @santer, объясните для чего вам это.
    – pank
    27 мая 2016 в 7:47
  • Это нужно для фронтенда, т.е пользователь рисует определенную схему, дальше на основание этих связей делаются действия на бэкенде
    – santer
    27 мая 2016 в 12:26
  • @santer, добавил кнопку с получением всех связей. Надеюсь я вам помог.
    – pank
    27 мая 2016 в 22:47

Ваш ответ

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

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