Fabric.js: части Line не отображаются после программного обновления размеров

Question

Я рисую линию, затем пытаюсь изменить ее, оставляя ту же начальную точку с x1 (слева) и x1 (вверху) и перемещая конечную точку, изменяя width (x2-x1 - отрицательно)при перемещении влево от исходной точки) и height (определяется y2-y1).

Линия рисуется многократно с положительным значением width, но в 90% случаев она имеет разрывы в обводке, как если былиния не полностью вытянута от границы к границе.

Ниже я определяю линию, она хорошо работает и соединяет мои 2 точки.Затем я изменяю строку при перемещении одного из объектов потока.Когда я перемещаю нижний объект вправо (положительная ширина), он работает нормально, когда я перемещаюсь влево (отрицательная ширина), линия не достигает своих границ.Линия имеет borders: true, поэтому я вижу, что границы идеально выровнены с объектами потока, которые они пытаются соединить (видно на изображениях).

//[startleft, starttop, endleft, endtop] 
canvas.add(new fabric.Line(
  [globalConnect[0], globalConnect[1], globalConnect[2], globalConnect[3]], {
      stroke:'black', 
      strokeWidth:3,  
      lockScalingX:true, 
      lockScalingY:true, 
      lockRotation:true, 
      hasControls:true, 
      hasBorders:true, 
      lockMovementX:true, 
      lockMovementY:true
    })
);


canvas.item(tempObjectIdx + 1).left = tempX1;
canvas.item(tempObjectIdx + 1).top = tempY1;
canvas.item(tempObjectIdx + 1).width = tempX2-tempX1;
canvas.item(tempObjectIdx + 1).height = tempY2-tempY1;

Пример линии, когда она не полностьюDraw: снимок экрана

Пример того, как выглядит линия с положительной или отрицательной шириной, когда она работает нормально: снимок экрана

У кого-то есть подобные проблемыотрицательные ширины при перерисовке линии?Есть ли какое-то отношение к точке происхождения - или пересчет координат, я перерисовываю холст после установки этих значений - отлично работает для положительного значения, но линия не охватывает границы, когда width отрицательно (я пробовал перерисовать линию изнижнее начало с положительной шириной и отрицательной высотой - не лучше?)

Answer 1

Если вам просто нужна линия, чтобы соединить две точки и обновлять ее всякий раз, когда обновляются эти две точки, вам нужно только установить значения x1, y1 и x2, y2 линии для каждого соответствующего события.Вот пример, где такая строка обновляется, когда блоки запускают события moving:

const canvas = new fabric.Canvas('c')
const box1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green'
})
const box2 = new fabric.Rect({
  left: 250,
  top: 250,
  width: 100,
  height: 100,
  fill: 'red'
})
const box1point = box1.getPointByOrigin('center', 'bottom')
const box2point = box2.getPointByOrigin('center', 'top')
const connector = new fabric.Line(
    [box1point.x, box1point.y, box2point.x, box2point.y],
    {
      stroke: "black",
      strokeWidth: 3,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: true,
      hasControls: true,
      hasBorders: true,
      lockMovementX: true,
      lockMovementY: true
    }
  )
box1.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center', 'bottom')
  connector.set({
    x1: connectPoint.x,
    y1: connectPoint.y
  })
})
box2.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center', 'top')
  connector.set({
    x2: connectPoint.x,
    y2: connectPoint.y
  })
})
canvas.add(box1, box2, connector)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>