用aCoords tl，br角而不是顶部绘制矩形，留在fabric.js中？

Question

所以我想根据从外部系统接收到的坐标在画布上绘制矩形，外部系统使用 (x1,y1)（左上角）和 (x2,y2)（右下角）坐标来绘制矩形，而在 Fabric 中.js 有点不同，例如使用 top 和 left 属性，我尝试使用 aCoords 并编写以下代码：

  addRect() {
    let square = new fabric.Rect({
      stroke: 'yellow',
      noScaleCache: false,
      strokeWidth: 10,
      strokeUniform: true,
      fill: 'rgba(0,0,0,0.2)',
      flipX: true,
    });
    console.log(square.getCoords());

    square.set("aCoords", { tl: new fabric.Point(100, 2), br: new fabric.Point(1, 2), tr: new fabric.Point(1, 2), bl: new fabric.Point(1, 2) });

  
    this.canvas.add(square);
  }

这似乎不起作用，我错过了什么？

Answer 1

虽然通过阅读fabricjs.com 的 API 参考并不确定，但在稍微挖掘代码之后，我几乎可以肯定 aCoords 只是作为一个吸气剂。所以你不能使用这个属性来修改形状的外观。

您需要单独更新top、left、width 和height 属性。

这是一个例子：

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;
  let square = new fabric.Rect({
    stroke: 'yellow',
    noScaleCache: false,
    strokeWidth: 10,
    strokeUniform: true,
    fill: 'rgba(0,0,0,0.2)',
    flipX: true,
  });

  canvas.add(square);

  let x1 = 5;
  let y1 = 25;
  let x2 = 105;
  let y2 = 55;

  square.set("top", y1);
  square.set("left", x1);
  square.set("width", (x2 - x1));
  square.set("height", (y2 - y1));

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js "></script>
<canvas id="c"></canvas>