Stoff js drehen Sie ein Bild, nachdem es geladen wurde mit Stoff.Bild.fromURL

Habe ich ein Bild geladen mit Stoffen Stoff.Bild.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();
            });

Was ich jetzt machen möchte ist, ich habe ein rotation-Taste auf der Seite, wo Sie können, drehen Sie das Bild. allerdings kann ich nicht ändern, das Bild-Objekt, nachdem es geladen wurde, bereits. Ich habe versucht:

 oImg.rotate(90)

aber oImg undefiniert ist jetzt. Hat jemand hatte kein Glück mit diesem?

InformationsquelleAutor Yeak | 2014-10-08
  1. 3

    Zunächst, ich würde vorschlagen, mit der .setAngle Methode im Gegensatz zu der .drehen.

    Aber die Wurzel des Problems ist, wie Sie das Ziel, das spezifische Objekt.

    Ihre oImg variable lokalisiert ist die Funktion, die das erstellen des Objekts auf der Leinwand. Also einfach Einstellung oImg in einer globalen Variablen können Sie gezielt das Objekt über eine variable name.

    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 */

    Hier ist ein Beispiel:
    http://jsfiddle.net/PromInc/h9kL5bs0/

    Ein weiterer Ansatz ist, um zu drehen, nur das aktive Objekt auf der Leinwand. Damit dies aber funktioniert, wäre das Objekt müssen ausgewählt werden, und Sie müssten, um Ihren auswählbar:falsche Attribut.

    canvas._activeObject

    Leinwand ist der name der variable für die Leinwand selbst, und _activeObject ist alles, was Objekt ausgewählt ist, auf die Leinwand.

    Hier ist ein Beispiel - beachten Sie, dass Sie wählen Sie das Objekt, bevor es werde drehen.
    http://jsfiddle.net/PromInc/ckqk2Lzs/

    Noch eine andere Methode, die erlauben würde, Sie zu halten wählbar:false " - Attribut, um das Objekt auszuwählen, indem es die Objekt-id auf der Leinwand.

    canvas.item(0)

    Element 0 ist der erste Punkt auf der Leinwand, die ist die niedrigste in der schichtreihenfolge befindet. Wenn Sie 5 Objekte auf der Leinwand, die meisten top-Objekt, Punkt 4, wie die Indizierung bei 0 beginnt.

    Hier ist ein Beispiel für diese Methode:
    http://jsfiddle.net/PromInc/3efe2x9j/

    • danke ich eigentlich gelandet Einstellung rotateThisImage = oImg, so dass ich zugreifen kann rotateThisImage in einer anderen Funktion
    • die JS-Fiddle hat einen Fehler: rotateThisImage.getAngle is not a function
    InformationsquelleAutor PromInc
Schreibe einen Kommentar