javascript - 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 变量被本地化为在 Canvas 上创建对象的函数。因此，只需将 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/

另一种方法是仅旋转 Canvas 上的事件对象。不过，要使其正常工作，对象需要是可选择的，并且您必须删除 selectable:false 属性。

canvas._activeObject

Canvas 是 Canvas 本身的变量名，_activeObject 是在 Canvas 上选择的任何对象。

这是一个例子 - 请注意，您必须先选择对象，然后它才会旋转。 http://jsfiddle.net/PromInc/ckqk2Lzs/

另一种允许您保留 selectable:false 属性的方法是通过 Canvas 上的对象 ID 选择对象。

canvas.item(0)

项目 0 是 Canvas 上的第一个项目，在分层顺序中是最低的。如果 Canvas 上有 5 个对象，则最上面的对象将是项目 4，因为索引从 0 开始。

下面是这个方法的一个例子: http://jsfiddle.net/PromInc/3efe2x9j/