Skalierung Bild von der Mitte (fabricjs)

Ich versuche zur Skalierung eines Bildes mit der centeredScaling: true option beim einrichten der Image-Instanz. Ich habe Circle-Objekt, das eine "auf" ein regler, der soll die Waage.

Hier ist das Beispiel: http://jsfiddle.net/hellatan/tk1qs8ty/

Ein paar Dinge:
1. es nicht von der Mitte aus skalieren
2. der Ausgangspunkt, der das Circle-Objekt nicht korrelieren richtig skalieren das Bild richtig (ich vermute, ich werde anpassen müssen einige mathematische für diese ein, obwohl)

Jemand irgendwelche Hinweise, was ich falsch mache (vor allem #1, #2 wäre ein bonus, um zu wissen,).

Nicht Sinn der Schlamperei der code =)

InformationsquelleAutor hellatan | 2015-01-05
  1. 7

    Versuchen Sie, den Ursprung für x und y zu zentrieren, und stellen Sie die anfangs-x-und y des Bildes

    imgInstance.set({
        scaleY: imgH / origH,
        scaleX: imgW / origW,
        originX: "center", 
        originY: "center"
    });
    • ah, danke ben. Das schien, den trick zu tun. Ich denke, ich hatte gehofft, dass würde ich nicht zurücksetzen, Links/top Koords, aber das scheint nicht der Fall zu sein. ich werde markieren Sie diese als Antwort, da war das primäre Ziel für das, was ich suchte.
    InformationsquelleAutor Ben Martin
  2. 0

    Ersten Schritt sind wir der Skalierung nach dem aufrufen der Mitte des Bildes.
    Und dann die Skala wird von der Mitte:

    imgInstance.scale(my_value).center().setCoords()
    InformationsquelleAutor ilgam
  3. 0

    Gibt es einen hack ich habe gesehen, im Grunde ist es übersetzt Punkte zu und von der Mitte in ein wrapper für das skalieren/drehen.

    Fiddle: http://jsfiddle.net/ywu45fpd/

    Funktionen zu übersetzen, Punkte

    fabric.Object.prototype.setOriginToCenter = function () {
    this._originalOriginX = this.originX;
    this._originalOriginY = this.originY;

    var center = this.getCenterPoint();

    this.set({
        originX: 'center',
        originY: 'center',
        left: center.x,
        top: center.y
    });
};

fabric.Object.prototype.setCenterToOrigin = function () {
    var originPoint = this.translateToOriginPoint(
    this.getCenterPoint(),
    this._originalOriginX,
    this._originalOriginY);

    this.set({
        originX: this._originalOriginX,
        originY: this._originalOriginY,
        left: originPoint.x,
        top: originPoint.y
    });
};

    Neuen Methode auf canvas:

    fabric.util.object.extend(fabric.Canvas.prototype, {

  _scale: function(e, target, value) {
    var scale = value,
        needsOriginRestore = false;

    if ((target.originX !== 'center' || target.originY !== 'center') && target.centeredRotation) {
      target.setOriginToCenter(target);
      needsOriginRestore = true;
    }

    target.animate({ scaleX: scale, scaleY: scale }, {
      onChange: canvas.renderAll.bind(canvas),
      easing: fabric.util.ease.easeOutQuad,
      onComplete: function() {
        if (needsOriginRestore) {
          target.setCenterToOrigin(target);
        }

        target.setCoords();

      },
    })

    canvas.renderAll();
  },

});

    Sehen mouse:up auf der fiddle für die Nutzung (im Grunde canvas._scale(e, target, 2))

    Den gleichen wrapper angewendet werden können, zum drehen.

    InformationsquelleAutor BrunoLM
Schreibe einen Kommentar