fabricjs - Ingrandisci area di lavoro nella vista (possibile?)

Question

al momento tento di implementare una funzione di zoom in un editor di immagini basato sullo fabricjs-framework.

Mi sono guardato attorno ma sono diventato sempre più confuso quando ho riconosciuto che lo sviluppo di questa funzione/funzione era una strada lunga e difficile per la comunità e gli sviluppatori.

Per questo motivo, molte soluzioni sembrano già obsolete.

Ma al momento ho trovato fabric-viewport developed by the RTSGroup on Github.

L'implementazione è stata semplice, ma è possibile solo ingrandire/controllare gli oggetti nella parte interna della tela. Non anche la tela. Ma vorrei ingrandire anche la tela. (Interno della finestra)

Per una migliore comprensione di ciò che sto cercando ho fatto una semplice spiegazione-immagine:

C'è un modo per farlo con il plugin fabricjs-viewport o un'altra soluzione non obsoleta?

Ho visto già alcune pagine che utilizzano tale visualizzazione come la funzione di zoom con supporto di scorrimento. Ma non ero sicuro di appartenere al fabricjs-framework .

Grazie già per ogni suggerimento e suggerimento che potrebbe portarmi nella giusta direzione.

Saluti, Sascha

Answer 1

è possibile creare funzionalità zoomIn & zoomOut con i feabricjs sia sugli oggetti che sono sulla tela e, anche, sulla tela stessa

al fine di zoomIn e zoomOut il canvas stesso, si dovrebbe cambiare il suo altezza e larghezza parameti, in t funzioni che zoomIn/ZoomOut, in modo che quando si va a modificare gli oggetti, sarà anche modificare le dimensioni della tela:

per zoomIn:

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

per zoomOut:

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

si prega di dare un'occhiata all'esempio di fiddle dal vivo che ho fatto, che zoomaIn e Out oggetti e tela, il.

vivo esempio violino: http://jsfiddle.net/tornado1979/39up3jcm/

speranza aiuta, buona fortuna

Answer 2

@Theo soluzione è grande, ma una cosa: Invece di utilizzare object.scaleX e object.scaleY per scalare ogni oggetto nella tela, è possibile basta chiamare una volta a canvas.setZoom(ZOOM_INDEX). (solo a partire dalla versione 1.4.13 di fabricjs)

Un esempio che ho fatto è Here