Questa domanda riguarda l'approccio all'architettura. Come farebbe qualcuno a creare lo stato immutabile per un editor di grafica che alla fine fornirebbe una funzionalità "annulla / ripristina", considerando che la libreria per le manipolazioni di canvas ha già una propria gestione dello stato.
Non sono sicuro che farei la cosa giusta. Forse è solo stupido prendere qualcosa che già ha la sua gestione dello stato e cercare di astrarci sopra. Qualsiasi opinione sarebbe grandiosa! Se mai, ne creerò un esempio una volta fatto.
EaselJS (una libreria di manipolazione su tela) è piuttosto semplice da usare.
Memorizza il suo stato nell'oggetto che puoi ottenere da nuovo createjs.Stage ("canvasId"); e di solito è assegnato a una variabile chiamata < em> fase .
Crei oggetti canvas con costruttori come lascia circle = new createjs.Shape (); , che puoi colorare o modellare con metodi come circle.graphics.beginFill ("rosso"). drawCircle (0, 0, 50); , quindi li aggiungi allo stage con stage.addChild (cerchia) ; , e infine devi chiamare manualmente stage.update ();
Lo stato e la rappresentazione di quegli oggetti su tela è direttamente modificabile e l'unico modo per modificare le posizioni degli elementi su tela è quello di cambiare le loro posizioni X e Y nell'oggetto stage (stato), e quindi chiamare lo stage.update ( );
Ad esempio, per creare una funzionalità di drag'n'drop, tutto ciò che serve è associare una funzione di callback a un evento personalizzato chiamato "pressmove". Questo evento esiste su tutti gli oggetti dello stage. Nella funzione di callback è possibile ottenere la posizione corrente del mouse su tela da un riferimento evento passato - event.stageX e event.stageY, che si utilizza per modificare lo stato con event.currentTarget.x = event.stageX ed event.currentTarget.y = event.stageY e, naturalmente, chiama stage.update () ;. Dai un'occhiata al codice:
circle.on("pressmove", evt => {
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
stage.update();
})
Ora, quello che sto pensando è creare la mia rappresentazione dello stato nel mio immutabile archivio dati che tracciasse la creazione e la rimozione di quegli oggetti. Fondamentalmente vorrei rispecchiare tutti i dati importanti dall'oggetto Stage. Per essere ancora più precisi, mi piacerebbe rispecchiare la sua proprietà chiamata children , che è una matrice che ha tutti gli oggetti resi sulla tela e che anche questi oggetti possono avere i loro figli. L'esempio è l'oggetto contenitore, che di solito viene utilizzato per raggruppare oggetti di testo e immagine e userò sicuramente quelli per le descrizioni dei comandi sulle immagini, per funzionalità come il ridimensionamento e la rotazione.
Quindi sto pensando di memorizzare ogni cambiamento di Stage - la creazione / rimozione di oggetti, le posizioni di inizio / fine sul trascinamento, ecc. Fondamentalmente tutto tranne i cambiamenti delle posizioni degli elementi che si verificano durante gli eventi come il trascinamento, il ridimensionamento e la rotazione (Conserverei solo le posizioni di inizio e fine), perché renderebbe l'operazione di annullamento / ripetizione complicata e probabilmente sovraccaricherebbe le istantanee del negozio.
Il mio modo di pensare è corretto e qualcuno dovrebbe avere qualche consiglio? Qualcuno ha creato o fatto qualcosa di simile a questo?