Lazy Brush è unico dei classici esempi delle incredibili a motivo di JavaScript. Questa scaffale permette a motivo di valersi una risma a motivo di “pennello”, nella sua tipo centro similare a come i quali possiamo stimare con software per dovere la grafica come mai Adobe Photoshop, i quali va “trascinato” a motivo di un “”: a motivo di ora il pseudonimo, Lazy Brush. script fornisce la calcolo necessaria a questa implementazione: richiede il sprazzo e le coordinate (x, y) del mouse/puntatore e calcola la grado del pennello.
Il pennello si muove isolato nel momento in cui il puntatore è all’fuori della sua “lazy luogo”. Per mezzo di questo figura a motivo di implementazione è attuabile determinarsi sia linee i quali curve con sistema considerevolmente delicato e gracile.
la grado del puntatore viene aggiornata, la divario confronto al pennello viene calcolata dallo script: come la divario è superiore confronto al sprazzo preciso , il pennello si muoverà a motivo di “divario – sprazzo” pixel nella dirigenza del puntatore.
Enormemente sommato probabile a osservarsi i quali a dirsi: in questa pagina possiamo invero rispettare Lazy Brush con opera.
Il è unico snippet i quali una innocente implementazione della scaffale all’nazionale a motivo di unico script:
const lazy = new LazyBrush() // default
lazy.update()
.(lazy.getBrushCoordinates()) //
lazy.update()
.(lazy.getBrushCoordinates()) //
Esistono svariate funzioni utili nella API a motivo di Lazy Brush, come mai LazyBrush.update() i quali permette a motivo di rinnovare la grado del puntatore, nel momento in cui il mouse si muove, LazyBrush.getBrushCoordinates() e LazyBrush.getPointerCoordinates() per dovere ritrarre le coordinate a motivo di pennello e puntatore, e LazyBrush.brushHasMoved() i quali restituisce un booleano indicante la riforma della grado del puntatore.
Come mai indica lecitamente l’artista, per dovere questioni a motivo di manifestazione è abilmente disaccoppiare i processi a motivo di valutazione e a motivo di rendering del canvas dagli eventi mousemove/touchmove. Occorre aiutare le coordinate correnti con una incerto, e conseguentemente, utilizzando un periodo (caratteristicamente un requestAnimationFrame) far venire la vece LazyBrush.update() su tutti i dell’calore utilizzando le ultime coordinate memorizzate nella passato incerto. La scaffale esegue calcoli isolato come il puntatore oppure il pennello cambiano grado.
Passaggio Lazy Brush