使用fabricjs在旋轉圖像上未更新左上角座標

在fabricjs中旋轉圖像時，不更新左上角的座標意味着即使在旋轉後，圖像的左上角仍然指向同一個角點。但是，它應該根據圖像的當前位置重新計算左上角。總之，我可以實現這一目標嗎？使用fabricjs在旋轉圖像上未更新左上角座標

以下是圖像旋轉代碼：

function rotate(){  
    activeCanvas.forEachObject(function(obj){ 
     if(obj instanceof fabric.Image){ 
      curAngle = obj.getAngle(); 
      obj.setAngle(curAngle-90);    
     } 
    }); 
    activeCanvas.renderAll(); 
}

現在旋轉後，我想新的旋轉圖像的左上角座標，但它仍然返回頂部和左側WRT舊圖像狀態。

例如，假設圖像的左上角最初位於（100,200），圖像的尺寸是500x600。如果旋轉圖像，圖像的尺寸變爲600x500，左上角也會變化。但是， fabricjs圖像仍然指舊的左上角。那麼有沒有像setCoords（）那樣的方法，使用哪個圖像將左上角的新點指向左上角？

來源

2016-11-28 Ashish

我們缺少代碼 – InferOn

@Inferon編輯。 – Ashish

@jansuz感謝您的答覆。請參閱編輯的問題描述以更好地理解需求。 – Ashish

正如你可以從下面的代碼片段看到的那樣，如果你只旋轉你的對象，只有邊界框會被更新，你必須移動你的對象來更新對象的位置。

var canvas = this.__canvas = new fabric.Canvas('c'); 
 
var rect = new fabric.Rect({ 
 
    left: 120, 
 
    top: 30, 
 
    width: 100, 
 
    height: 100, 
 
    fill: 'green', 
 
    angle: 20 
 
}); 
 
canvas.on("object:rotating", function() { 
 
    var ao = canvas.getActiveObject(); 
 
    if(ao){ 
 
    console.log('top and left are the same after rotation'); 
 
    console.log('top:' + ao.top); 
 
    console.log('left:' + ao.left); 
 
    
 
    console.log('but not the bounding box'); 
 
    var bound = ao.getBoundingRect(); 
 
    console.log('bounding box - top:' + bound.top); 
 
    console.log('bounding box - left:' + bound.left); 
 

 
    } 
 
}) 
 
canvas.add(rect); 
 
canvas.renderAll();

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script> 
 
<canvas id="c" style="border:1px solid black"></canvas>

來源

2016-11-28 12:26:36 InferOn

我猜你正在尋找的東西是這樣的：

canvas.on('object:rotating', function(options) { 
    options.target.setCoords(); 
    var left = options.target.oCoords.tl.x, 
     top = options.target.oCoords.tl.y; 
    console.log(left, top); 
});

來源

2016-11-28 13:41:33 janusz

感謝您的答覆@ janusz.But實際上我不想要新的左上角座標，我希望fabricjs圖像的頂部和左側指向當前左上角的點而不是始終指向同一個角點。，如果我使用這些新座標並將它們設置爲圖像的頂部和左側，那麼圖像會被轉換爲該點。 – Ashish

@jansuz參考編輯的問題描述以更好地理解需求。 – Ashish

我想我現在知道你在找什麼。據我所知在FabricJS中沒有這樣的功能，但我認爲你應該檢查任何結構對象的'oCoords'對象。它包含所有的角點座標（'tl' - 左上角，'br'-右下角等）。您正在查找的座標將取決於對象的旋轉，即四個角中的一個（tl，tr，br，bl）的座標。如果角度在0到90之間，則取'tl'的值，在90到180之間取'bl'等等。這是你想要的？ – janusz

使用fabricjs在旋轉圖像上未更新左上角座標

回答

相關問題