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

Question

所以我想根据从外部系统接收到的坐标在 canvas 上绘制矩形，该坐标使用 (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 只是作为 [=31] =].所以您不能使用此属性.

修改形状外观

相反，您已经分别更新了 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>

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

Draw rectangle with aCoords tl, br corners instead of top, left in fabric.js?

javascript

canvas

html5-canvas

fabricjs