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

Question

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

我想用 o坐标信息并根据角度和翻转信息来决定哪些角是线端，但似乎不会太准确……

有什么帮助吗？

示例:

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或 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;
},