Fabric js在將圖像加載到fabric.Image.fromURL后旋轉圖像

Question

我有使用面料fabric.Image.fromURL加載的圖像

 fabric.Image.fromURL($scope.image, function(oImg)
            {
                oImg.set({width: $scope.imageWidth, height: $scope.imageHeight, originX:  'left', originY: 'top', selectable: false});
                canvas.add(oImg);
                canvas.centerObject(oImg);
                canvas.renderAll();
                oImg.sendToBack();
            });

我現在想做的是頁面上有一個旋轉按鈕，他們可以在其中旋轉此圖像。 但是，在已加載圖像對象之后，我無法對其進行修改。 我試過了：

 oImg.rotate(90) 

但是oImg現在尚未定義。 有人有運氣嗎？

Answer 1

首先，我建議使用.setAngle方法而不是.rotate方法。

但是，問題的根源是如何針對特定對象。

您的oImg變量已本地化到在畫布上創建對象的函數。 因此，只需將oImg設置為全局變量，就可以通過變量名稱定位該對象。

var rotateThisImage;  /* Set this on a global scope outside of a function */
...
rotateThisImage = oImg;  /* Set oImg to your new global variable */
...
rotateThisImage.setAngle(curAngle+15);  /* Elsewhere in your code, on button click, set angle */

這是一個示例： http : //jsfiddle.net/PromInc/h9kL5bs0/

另一種方法是僅旋轉畫布上的活動對象。 為了使它起作用，該對象將需要是可選的，並且您必須刪除selectable：false屬性。

canvas._activeObject

Canvas是其自身畫布的變量名，_activeObject是在畫布上選擇的任何對象。

這是一個示例-請注意，您必須先選擇對象才能旋轉它。 http://jsfiddle.net/PromInc/ckqk2Lzs/

允許您保留selectable：false屬性的另一種方法是通過畫布上的對象ID選擇對象。

canvas.item(0)

項目0是畫布上的第一項，在分層順序中是最低的。 如果您在畫布上有5個對象，則最上面的對象將是項4，因為索引從0開始。

這是此方法的示例： http : //jsfiddle.net/PromInc/3efe2x9j/