Question

小提琴 - jsfiddle

测序：

在坐标处画线（x1 = 50，y1 = 50，x2 = 450，y2 = 50）
检查坐标y1。 y1 = 50
将y轴上的线移动50像素。
检查坐标y1。左边y1 = 50 ??? 这是为什么？以及如何获得真正的坐标？

＆＃13;

  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();

}

＆＃13;

canvas {
    border: solid 1px black;
}

＆＃13;

<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>

＆＃13;

Answer 1

遗憾的是，现有的面料线属性没有办法。在移动时，fabric不会更新线对象的坐标或宽度。但他们确实更新了顶部和左侧的值。

我为解决问题所做的是，我使用方法getBoundingRect()从边界框计算了当前行的宽度和高度，顶部和左边的值可用于绘制第一个点（x1，y1），然后从左边添加到宽度和顶部到高度获得第二个点（x2，y2）。

让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;

希望这会对某人有所帮助。

Answer 2

我为此编写了一个函数

SELECT a.EmployeeID, a.LastName, a.FirstName, a.EmailAddress, ac.duplicateCount
FROM [Users].[dbo].[Known_Dupes_4] a
INNER JOIN (
SELECT
LEFT(FirstName,3) as firstNameShort, COUNT(*) AS duplicateCount, LastName
FROM [Users].[dbo].[Known_Dupes_4]
GROUP BY
LastName, LEFT(FirstName,3)
HAVING 
COUNT(*) > 1
) ac ON (a.LastName) = ac.LastName AND LEFT (a.FirstName,3) LIKE LEFT (ac.firstNameShort,3)
ORDER BY a.LastName, a.FirstName

Answer 3

正在使用

更改line.top

line.top=line.top+50;

为什么不将它用于您的查询，例如..

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

＆＃39; Y1＆＃39;将是50，＆＃39; top＆＃39;将是100。

Answer 4

我也想知道如何在移动线后获得正确的线端点坐标。

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 5

x1，x2，y1，y2是缓存的值，并且始终引用初始起点和终点。因此，您必须自己计算移动或缩放的线对象的坐标。

直到今天我还没有弄清楚如何计算旋转度，因为这涉及一些具有三角学的高级数学以及基于象限和翻转的多个if / else场景。

此外，@ Andrey的答案仅部分正确。只要沿任意方向（x或y）翻转直线，该功能就会出错。

一种更好的方法是使用top和left值（幸运的是，它们在移动过程中没有被缓存和更新），然后使用line.calcLinePoints()来请求开始和结束坐标<相对于顶部和左侧的值是strong>相对。

通过使用scaleX和scaleY值来完成缩放。

这是一个例子

/**
 * Works with moving, scaling and flipping BUT NOT rotation
 */
function calcLineCoords(line){
  const linePoints = line.calcLinePoints();
  const scaleX = line.scaleX || 1;
  const scaleY = line.scaleY || 1;

  let startCoords, endCoords;
  if ((line.flipY && line.flipX) || (!line.flipY && !line.flipX)) {
    startCoords = {
      x: line.left + linePoints.x1 * scaleX,
      y: line.top + linePoints.y1 * scaleY,
    };
    endCoords = {
      x: line.left + linePoints.x2 * scaleX,
      y: line.top + linePoints.y2 * scaleY,
    };
  } else {
    startCoords = {
      x: line.left + linePoints.x1 * scaleX,
      y: line.top + linePoints.y2 * scaleY,
    };
    endCoords = {
      x: line.left + linePoints.x2 * scaleX,
      y: line.top + linePoints.y1 * scaleY,
    };
  }
}

Fabricjs移动后的线坐标

5 个答案: