fabricjs - Zoom Leinwand im Ansichtsfenster (möglich?)

Question

im Moment versuche ich eine Zoom-Funktionalität zu einem visuellen Editor basierend auf der fabricjs-framework zu implementieren.

Ich habe mich umgesehen, wurde aber immer verwirrter, als ich erkannte, dass die Entwicklung dieses Features/Funktion ein langer und steiniger Weg für die Community und Entwickler war.

Aus diesem Grund scheinen viele Lösungen bereits veraltet zu sein.

Aber im Moment habe ich fabric-viewport developed by the RTSGroup on Github gefunden.

Die Implementierung war einfach, aber es kann nur die Objekte in (der Innenseite) der Leinwand zoomen/steuern. Nicht die Leinwand auch. Aber ich möchte auch die Leinwand zoomen. (Innen des Darstellungs)

Zum besseren Verständnis, was ich suche ich eine einfache Erklärung-Bild gemacht:

Gibt es eine Möglichkeit, dies zu tun mit dem fabricjs-Ansichtsfenster Plugin oder eine andere nicht veraltete Lösung?

Ich habe schon einige Seiten gesehen, die eine solche Ansichtsfenster-Zoom-Funktion mit Scroll-Unterstützung verwenden. Aber da war ich mir nicht sicher ob sie zum fabricjs-framework gehören.

Danke schon für jeden Hinweis und Tipp, der mich in die richtige Richtung führen könnte.

Grüße, Sascha

Answer 1

Sie zoomIn & zoomOut Funktionalität mit den feabricjs entweder auf die Objekte, die sie auf der Leinwand und auch auf der Leinwand selbst

um erstellen zoomIn und zoomOut die Leinwand selbst, sollten Sie ändern Sie ihre Höhe und Breite Parameter, in t er zoomIn/zoomOut Funktionen, so dass, wenn es um die Objekte zu ändern geht, wird es auch die Größe Leinwand ändern:

für zoomIn:

canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); 
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); 

für zoomOut:

canvas.setHeight(canvas.getHeight() * (1/SCALE_FACTOR)); 
canvas.setWidth(canvas.getWidth() * (1/SCALE_FACTOR)); 

Bitte werfen Sie einen Blick auf die Live-Geige Beispiel, die ich gemacht habe, die es zoomt Objekte und Leinwand, die.

Live-Geige Beispiel: http://jsfiddle.net/tornado1979/39up3jcm/

Hoffnung hilft, Glück

Answer 2

@Theo Lösung groß ist, aber eine Sache: Statt object.scaleX und object.scaleY unter Verwendung jedes Objekt in der Leinwand zu skalieren, können Sie rufen Sie einfach einmal an canvas.setZoom(ZOOM_INDEX). (nur ab Version 1.4.13 von fabricjs)

Ein Beispiel habe ich ist Here