如何设置 FabricJS 图像的 4 个角 X、Y 坐标值答案

【问题标题】：How to set the 4 corners X, Y coordinates value of a FabricJS image如何设置 FabricJS 图像的 4 个角 X、Y 坐标值
【发布时间】：2021-05-14 15:14:30
【问题描述】：

我想设置图像的 aCoords 值。 （角坐标） 通过 setCoords 它会更新值，但不会改变图像的位置。

        image?.set({
    'aCoords': {
        tl: new fabric.Point(0, 100),
        tr: new fabric.Point(0, 200),
        br: new fabric.Point(100, 200),
        bl: new fabric.Point(100, 200)
    }
})

     if(canvas) {
        console.log('render')
        image.setCoords()
        canvas.renderAll();
        canvas.requestRenderAll()
    }

【问题讨论】：

嗨，Elvin，我想你也加入了问题跟踪器。您不能设置 aCoords 那些是私有的，供织物设置，供您阅读。你到底想做什么？
我有动态角点，我想根据这些角点定位图像。如果我无法设置 aCords，我该如何设置准确的位置？我看过一个文档，里面有left、top、angleX、angleY、width、height等等，属性。有什么方法可以从 aCoord 值中获取（可设置的）属性？
我想我在小提琴中的问题跟踪器中解决了这个确切的问题。是你吗？

标签： javascript reactjs fabricjs

【解决方案1】：

这是一个例子，你也可以在 repo 的讨论区找到：

https://github.com/fabricjs/fabric.js/discussions/6834

解决方案只是几何问题，没有特别针对 fabric.JS

// Canvas 2
var canvas2 = new fabric.Canvas('c2');

  const aCoords = {
      tl: new fabric.Point(0, 100),
      tr: new fabric.Point(0, 200),
      br: new fabric.Point(100, 200),
      bl: new fabric.Point(100, 100)
  }
  
  fabric.Image.fromURL('https://weeblytutorials.com/wp-content/uploads/2017/04/Weebly-blogs-example.png', img => {
    const width = img.width;
    const height = img.height;
    img.set({
      left: aCoords.tl.lerp(aCoords.br).x,
      top: aCoords.tl.lerp(aCoords.br).y,
      scaleX: (aCoords.tl.distanceFrom(aCoords.tr)) / width,
      scaleY: (aCoords.tl.distanceFrom(aCoords.bl)) / height,
      angle: fabric.util.radiansToDegrees(Math.atan2(aCoords.tr.y - aCoords.tl.y, aCoords.tr.x - aCoords.tl.x)),
      originX: 'center',
      originY: 'center',
    })
    canvas2.add(img);
  });

<script src="https://cdn.jsdelivr.net/npm/fabric@4.3.0/dist/fabric.min.js"></script>
<canvas id="c2" width="400" height="400" >

【讨论】：