Fabricjs 之后的线坐标（移动、缩放、旋转） - canvas.on('object:modified'...

Posted 2023-03-25

【中文标题】Fabricjs 之后的线坐标（移动、缩放、旋转） - canvas.on(\'object:modified\'...

【英文标题】：Fabricjs line coordinates after (moved, scaled, rotated) - canvas.on('object:modified'…Fabricjs 之后的线坐标（移动、缩放、旋转） - canvas.on('object:modified'...

【发布时间】：2016-09-21 05:21:18

【问题描述】：

我需要在对象被修改后找到线坐标(x1,y1,x2,y2)。 （移动、缩放、旋转）

本来想用oCoords信息，根据角度和翻转信息来决定哪些角是线端，但好像不会太准确……

有什么帮助吗？

示例：

x1：164，

y1：295.78334045410156，

x2：451，

y2: 162.78334045410156

x：163，y：161.78334045410156 - 左上角

x：452，y：161.78334045410156 - 右上角

x：163，y：296.78334045410156 - 左下角

x: 452, y: 296.78334045410156 - 右下角

【问题讨论】：

在检索 oCoords 值之前，您是否在 line 对象上调用 setCoords() 方法？

我没用过，但即使有它仍然有 1 个像素的差异。我有所有具有原点的对象 - “中心”。你知道角落是否有这个属性，这就是原因（如果没有设置），或者默认情况下它们会稍微移出真实的末端？

织物线对象具有以下属性：x1,y1,x2,y2。执行该转换后，值不会更新为真实值吗？

不，它们与 originalState

保持一致

无论如何感谢您的帮助，我决定忽略差异并使用它们。

【参考方案1】：

当 Fabric.js 计算 oCoords（即对象的角坐标）时，它会考虑对象的 strokeWidth：

// fabric.Object.prototype
_getNonTransformedDimensions: function() 
  var strokeWidth = this.strokeWidth,
      w = this.width + strokeWidth,
      h = this.height + strokeWidth;
  return  x: w, y: h ;
,

对于大多数对象，stroke 是一种勾勒外边缘的边框，因此在计算角坐标时考虑strokeWidth 是非常有意义的。

在fabric.Line 中，stroke 用于绘制线条的主体。问题中没有示例，但我认为这是实际终点坐标与oCoords 中的坐标之间存在差异的原因。

所以，如果您真的想使用oCoords 来检测端点的坐标，则必须针对strokeWidth / 2 进行调整，例如

const realx1 = line.oCoords.tl.x + line.strokeWidth / 2
const realy1 = line.oCoords.tl.y + line.strokeWidth / 2

请记住，fabric.Line 自己的 _getNonTransformedDimensions() 确实会针对 strokeWidth 进行调整，但仅当行的 width 或 height 等于 0 时：

// fabric.Line.prototype
_getNonTransformedDimensions: function() 
  var dim = this.callSuper('_getNonTransformedDimensions');
  if (this.strokeLineCap === 'butt') 
    if (this.width === 0) 
      dim.y -= this.strokeWidth;
    
    if (this.height === 0) 
      dim.x -= this.strokeWidth;
    
  
  return dim;
,