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

Question

我想设置图像的 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()
    }

Answer 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" >

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

How to set the 4 corners X, Y coordinates value of a FabricJS image

javascript

reactjs

fabricjs