Fabricjs линии координат после того, как движение

Question

Фидл - jsfiddle

секвенирование:

1. нарисовать линию в точке с координатами (x1 = 50, y1 = 50, x2 = 450, у2 = 50)
2. Проверка координат y1. y1 = 50
3. Переместите линию по оси Y на 50 пикселей.
4. Проверка координаты y1. LEFT y1 = 50 ??? Почему? И как получить истинные координаты?

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

 
     var line = new fabric.Line([50, 50, 450, 50], {    
 
      stroke: 'blue', 
 
      strokeWidth : 10, 
 
      hasControls: false, 
 
      hasBorders: false, 
 
      lockMovementX: true, 
 
      lockMovementY: true, 
 
      hoverCursor: 'default' 
 

 
     }); 
 

 

 

 
canvas.add(line); 
 

 

 
document.querySelector('#getLineY').onclick=function(e) { 
 
    alert(line.get('y1')); 
 
} 
 

 
document.querySelector('#movedown').onclick=function(e) { 
 
    line.top=line.top+50; 
 
    canvas.renderAll(); 
 

 
}

canvas { 
 
    border: solid 1px black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script> 
 
<button id="getLineY">getLineY</button> 
 
<button id="movedown">movedown</button> 
 

 
     <canvas id="c" width="500" height="500" ></canvas>

Answer 1

Как меняются line.top с

line.top=line.top+50; 

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

alert(line.get('y1') + '..' + line.get('top')); 

' y1 'будет 50, «верх» будет 100.

Answer 2

Мне также интересно, как получить правильные координаты конечной точки линии после перемещения линии.

startAnchor.set({ 
    left: line.x1 + line.left, 
    top: line.y1 + line.top 
}); 

endAnchor.set({ 
    left: line.x2 + line.left, 
    top: line.y2 + line.top 
}); 

не кажется, чтобы установить правильные координаты, когда я пытаюсь добавить перетаскивать якоря (fabric.Circle) на концах линии.

Каков правильный подход для установки якорей, которые следуют за конечными точками линии при перемещении строки?

Answer 3

К сожалению, нет никаких путей от существующих атрибутов линии ткани. ткань не обновляет свои координаты или ширину объекта линии при перемещении. но они обновили верхнее и левое значения.

Что я сделал, чтобы решить мою проблему был, я вычислил текущую ширину и высоту линии ограничительной рамки, используя метод getBoundingRect(), верхнее и левые значения могут быть использованы для построения первой точки (x1, y1), а затем добавили слева к ширине и вершине к высоте, чтобы получить вторую точку (x2, y2).

let lineObj - ваш текущий объект линии ткани. затем

var boundingRect = lineObj.getBoundingRect(); 

lineObj.x1 = boundingRect.left; 
lineObj.y1 = boundingRect.top; 
lineObj.x2 = boundingRect.left + boundingRect.width; 
lineObj.y2 = boundingRect.top + boundingRect.height; 

надеюсь, что это поможет кому-то.