fabricjs使用clipto方法在裁剪對象後將boundingrect設置爲新對象

我已經使用clipj方法裁剪了一個圖像，並且此工作正常。但問題仍在於實際圖像區域。是否有任何方法來重新設置新的裁剪圖像相同的邊界？我嘗試setCoords但這不起作用。fabricjs使用clipto方法在裁剪對象後將boundingrect設置爲新對象

來源

2017-03-24 Dhiraj Minocha

我的答案在下面有幫助嗎？如果您有其他問題，請告訴我。 –

FabricJS有兩種方法可用於「裁剪」一個對象，即使用clipTo()和toDataURL()方法。使用toDataURL()創建一個與新裁剪圖像相同的重新設置邊界的新圖像。

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>

如果您運行的代碼剪斷，上面之前和boundingrect的拍攝後登錄到控制檯上。

希望這有助於matey。如果您還有其他問題，請告訴我。

來源

2017-03-27 17:10:11

對不起，我過去兩週不在。這是我正在尋找的。它對礦工的改變完美地適用於我！非常感謝。 :-) –

很高興幫助。如果您不介意點擊勾號將其標記爲「已接受」的答案，它可以幫助其他人搜索類似的東西。 –

fabricjs使用clipto方法在裁剪對象後將boundingrect設置爲新對象

回答

相關問題