fabricjs 在使用 clipto 方法裁剪对象后将 boundingrect 设置为新对象

Question

我使用 fabricjs 的 clipto 方法剪辑了一张图像，效果很好。但问题是 boudingrect 仍然是实际图像区域。有什么方法可以重置与新裁剪图像相同的 boundingrect 吗？我尝试了 setCoords 但这不起作用。

Answer 1

FabricJS 有两种方法可用于 "crop" 对象，您正在使用的是 clipTo(), and a toDataURL() 方法。使用 toDataURL() 创建一个新图像，其重置 boundingrect 与新裁剪图像相同。

fabric.Image.fromURL('data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACa0lEQVRYhbVXMW7bQBAcMgRTWCJdC+qFOLAaudFDnEKdYL1AfoCRB8gvkJJUAQw/RI3cSIBg13ZShzxWBEK6sEjf7e3dkYC8Fckhduf2doZHryzLEpY4e/mp3M+jEW7TB/bdq+457rMnpGVeP9v3p7b08K0oE7NoiHk0Yotfxxdt07UnsEy3Gomq+F32qKy+SQRtCVTtn0VDAEBS5nXx7//WbdPpBOQ9/3YywDwaYRYNsUy3dfHksMquHwLF27uieF+53JFFssFK7Gps3Zsg9j+bCcjFb07H+PrnFwD3ik14NYQyCWsH5OKe5wHQ206Lu/BqODkSGgFanBbp+iG71y7cpBDvy/MPxQeozmUdL9Nt3WIuOFyeKc4ntA5UbaRmIw8htyIXXg3mffakPNd8gNM5Tb4SOyySTWPc5hNaB+hA0eRyEQCIvdCKy8W52fDn0Qj7/lRZsazzxOJsosideOyF9XUVV91z7PtT3JyOEbiczaRjqhYT7vKRAGivY1rchdvy1zPQVMeiyFmfcOGm/MoQJmVeezsXsRcCPrTkTXEuf02Afs8/ygdo/kAG77JHiCLXzIjTuVzEhdvyByadfrQPVPmDldhpEpJ94OV/piWvQhS59Uwlihz9T533dw9xmz6oWyAHZXxsH6Dd0ghw7TqmDyzFzv41NHn2sXyAhkf/CxbJxvo9Nw2dCafnicvOwH4mpBKSk9t8oqmPXHYGynP2TNhGx01wk5SNBGQSLh27Tsm24iyBdW+i3I///rb6BPdfIOt83ZsobY8O5wMjAXlAuHB1hK7Wla/1rxlX3KZzV7QmYPIJ2z7b4hVhK2M6UYICmwAAAABJRU5ErkJggg==', function(origImage) {
  var origBoundingRect = origImage.getBoundingRect();
  fabric.Image.fromURL(origImage.toDataURL({
    width: origImage.width - 5,
    height: origImage.height - 5
  }), function(newImage) {
    var newBoundingRect = newImage.getBoundingRect();
    console.log('origBoundingRect:\r\n' + JSON.stringify(origBoundingRect) + '\r\n\r\n' + 'newBoundingRect:\r\n' + JSON.stringify(newBoundingRect));
  });
});

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.min.js"></script>

如果您运行截取上面的代码，它会在边界矩形拍摄前后记录到控制台。

伙计，希望这对您有所帮助。如果您还有其他问题，请告诉我。

fabricjs 在使用 clipto 方法裁剪对象后将 boundingrect 设置为新对象

fabricjs set boundingrect to the new object after cropping object using clipto method

fabricjs