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/