Использование PolyLines для соединения перетаскиваемых фигур с FabricJS - PullRequest
Новая
       14

Использование PolyLines для соединения перетаскиваемых фигур с FabricJS

0 голосов
/ 08 марта 2019

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

Это демонстрирует некоторые проблемы, с которыми я сталкиваюсь: 

var canvas = new fabric.Canvas('c');
rect = null;
line = null;

function addLine(x1, y1, x2, y2) {
  var coords = [{x: x1, y: y1}, {x: x2, y: y2}];
    
  this.line = new fabric.Polyline(coords, {
    stroke: 'green',
    strokeWidth: 5,
    fill: 'rgba(0,0,0,0)',
    selectable: true,
    evented: false
  });

  this.canvas.add(this.line);
}

function addRect(left, top, width, height, line1, line2, line3, line4) {
  this.rect = new fabric.Rect({
    left: left,
    top: top,
    width: width,
    height: height,
    fill: '#9f9',
    originX: 'left',
    originY: 'top',
    centeredRotation: true 
  });

  this.rect.line1 = line1;
  this.rect.line2 = line2;
  this.rect.line3 = line3;
  this.rect.line4 = line4;

  this.canvas.add(this.rect);
}

var r1_left = 10;
var r1_top = 20;
var r1_width = 125;
var r1_height = 150;
var r2_left = 350;
var r2_top = 300;
var r2_width = 125;
var r2_height = 150;

addLine(r1_left + r1_width/2, r1_top + r1_height, r2_left + r2_width/2, r2_top);
addRect(r1_left, r1_top, r1_width, r1_height, null, null, this.line, null);  
addRect(r2_left, r2_top, r2_width, r2_height, this.line, null, null, null);

this.canvas.renderAll();

this.canvas.on('object:moving', function(e) {
  var p = e.target;

  if (p.line1) {
    let x_2_new = p.left + p.width/2; 
    let y_2_new = p.top;
    p.line1.set('points', [p.line1.points[0], {'x': x_2_new, 'y': y_2_new}]);
    p.line1.set('height', y_2_new - p.line1.points[0]['y']);
    p.line1.set('width', x_2_new - p.line1.points[0]['x']);
    p.set('oCoords', p.line1.calcCoords());
  } else if (p.line2) {
    p.line2.set({'points': [{'x': p.left + p.width, 'y': p.top + p.height/2}, p.line2.points[1]]});
  } else if (p.line3) {
    p.line3.set({'points': [{'x': p.left + p.width/2, 'y': p.top + p.height}, p.line3.points[1]]});
  } else if (p.line4) {
    p.line4.set({'points': [p.line4.points[0], {'x': p.left, 'y': p.top + p.height/2}]});
  } 
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  </head>
  <body>
    <canvas id="c" width="700" height="700" style="border:1px solid #ccc"></canvas>
    <script>
    </script>
  </body>
</html>

Для верхнего прямоугольника я попытался просто установить координаты x и y при перемещении объекта.При этом я сталкиваюсь с ошибкой, что x и y, по-видимому, связаны oCoords и aCoords линии.

Для нижнего прямоугольника я попытался установить координаты напрямую.При этом кажется, что вся строка сдвигается по странице.

Любой совет о том, что я мог бы изменить здесь, был бы великолепен.Спасибо!

1 Ответ

1 голос
/ 08 марта 2019

Вот код, что вам нужно, jsfiddle 

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c', { selection: false });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  function makeCircle(left, top, line1, line2) {
    var c = new fabric.Rect({
      top: top,
      left: left,
      width: 30,
      height: 30,
      selection: false,
      fill: '#ccc'
      });
      c.hasControls = c.hasBorders = false;

      c.line1 = line1;
      c.line2 = line2;

      return c;
  }

  function makeLine(coords) {
    return new fabric.Line(coords, {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      selectable: false,
      evented: false,
    });
  }

  var line = makeLine([ 250, 125, 250, 375 ]),
      line2 = makeLine([ 250, 375, 250, 350 ]);

  canvas.add(line);

  canvas.add(
    makeCircle(line.get('x1'), line.get('y1'), null, line),
    makeCircle(line.get('x2'), line.get('y2'), line, line2),
  );

  canvas.on('object:moving', function(e) {
    var p = e.target;
    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
    p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
    canvas.renderAll();
  });
})();
<div>
    <canvas id="c" width="700" height="575" style="border:1px solid #999"></canvas>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
...