Fabricjs线后坐标(移动,缩放,旋转) - canvas.on('object:modified'...

Question

我需要在修改对象后找到线坐标(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 - 右下角

Answer 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不过，Instroke用于绘制线的主体。问题中没有示例，但我认为这是真实端点坐标与 中的端点坐标之间存在差异的原因oCoords。

因此，如果您确实想用来oCoords检测端点的坐标，则必须调整strokeWidth / 2，例如

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

请记住fabric.Line's own确实_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;
},