Как программно соединить объекты Fabric.js с помощью соединителя - PullRequest
Новая
       31

Как программно соединить объекты Fabric.js с помощью соединителя

0 голосов
/ 15 декабря 2018

Я хочу соединить два объекта fabric.js с соединителями.Как я могу достичь этого?Например, у меня есть два объекта ткани, подобные этому: 

var canvas = new fabric.Canvas("c");

$("#rect").on("click", function (e) {
    rect = new fabric.Rect({
        left: 40,
        top: 40,
        width: 50,
        height: 50,
        fill: "cornflowerblue",
        stroke: "cornflowerblue",

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

$("#rect").on("click", function (e) {
    rect = new fabric.Rect({
        left: 40,
        top: 40,
        width: 50,
        height: 50,
        fill: "cornflowerblue",
        stroke: "cornflowerblue",

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

У меня есть кнопка с именем «Соединитель», когда я нажимаю кнопку, она должна позволять мне нажимать на любой объект, чтобы начать создание линии от выбранного объекта додругой объект.

Я не использую угловой или реагирую.Я делаю это на JQuery.Я погуглил, но сыт по горло.Здесь я ищу пошаговое руководство.

1 Ответ

0 голосов
/ 26 июня 2019 
  const rectz = rect.getPointByOrigin('center')
  const recty = rect1.getPointByOrigin('center')
  const connector = new fabric.Line(
    [rectz.x, rectz.y, recty.x, recty.y],
    {
      stroke: '#8470ff',
      strokeWidth: 3,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: false,
      hasControls: false,
      hasBorders: false,
      lockMovementX: true,
      lockMovementY: true
    }
  )



  rect.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center')
     console.log(connectPoint,"centerpoint");
    connector.set({
      x1: connectPoint.x,
      y1: connectPoint.y
    })
  })

  rect1.on('moving', function() {
    const connectPoint1 = this.getPointByOrigin('center')
    connector.set({
      x2: connectPoint1.x,
      y2: connectPoint1.y
    })
  })

  canvas.add(connector,rect, rect1);

1. при определении секунды задайте прямоугольник как rect1. jsfiddle link

...