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中，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或{{1 }}等于0：

height

Fabricjs线后坐标（移动，缩放，旋转） - canvas.on（'object：modified'...

1 个答案: