<

Divisione immagine in 2 canvas

Ultima modifica: 27 Settembre 2025

Questo snippet serve ad animare un'immagine dividendola in due pezzi, permettendo di animarli separatamente ma soprattutto semplicemente. Il vantaggio è che non c'è alcun bisogno di creare immagini separate ma si utilizza soltanto l'immagine originale. Per questo snippet utilizzeremo la spada excalibur e la infrangeremo in 2:

Requisiti

Scelta immagine e misurazioni

La prima cosa che faremo sarà scegliere un'immagine (excalibur) e fare le giuste misurazioni; utilizzeremo quindi il blocco wordpress immagine ed aggiungeremo, utilizzando il controllo javascript, uno snippet:

//Misurazione immagine
let imageElement = GetCurrentBlockFromCurrentScript().querySelector( 'img' );
imageElement.addEventListener( 'mousemove', function(event){
  let x = event.offsetX;
  let y = event.offsetY;    
  let WidthPercentage = ( x/imageElement.width ) * 100;
  let HeightPercentage = ( y/imageElement.height ) * 100;
    
  console.log( 'X:'+x+' px, Y:'+y+' px, '+'Width:'+WidthPercentage.toFixed(2)+'%, Height:'+HeightPercentage.toFixed(2)+'%' );
    
  imageElement.style.opacity = '0.7';
  imageElement.style.border = '1px solid red';
} );

imageElement.addEventListener( 'mouseout', function(){
  imageElement.style.opacity = '1';
  imageElement.style.border = 'none';
} );

A questo punto nel frontend muovendoci con il mouse sull'immagine vedremo, in console sviluppatori, le posizioni X e Y che sceglieremo per decidere i punti di rottura (ricordando che i canvas saranno 2 quadrati o rettangoli):

excalibur-nera

Ho deciso che manterrò tutta la larghezza ma dividerò la spada a 400px dall'alto.

Creazione dei canvas

Ora che lo script di prima ha già fatto la sua utilità può essere cancellato e al suo posto utilizzeremo:

//Crea i 2 canvas ed elimina l'immagine
let FigureElement = GetCurrentBlockFromCurrentScript();
let ImageElement = FigureElement.querySelector('img');

let CanvasElement1 = document.createElement( 'canvas' );
CanvasElement1.id = Canvas1Id = 'canvas-1';
CanvasElement1.width = ImageElement.width;
CanvasElement1.height = 400;

let CanvasElement2 = document.createElement( 'canvas' );
CanvasElement2.id = Canvas2Id = 'canvas-2';	
CanvasElement2.width = ImageElement.width;
CanvasElement2.height = ImageElement.height-400;

FigureElement.after( CanvasElement2 );
FigureElement.after( CanvasElement1 );

CanvasElement1 = document.getElementById( Canvas1Id );
CanvasElement2 = document.getElementById( Canvas2Id );

ImageElement.onload = function(){
	CanvasElement1.getContext('2d').drawImage( ImageElement, SourceX=0, SourceY=0, SourceWidth=ImageElement.width, SourceHeight=CanvasElement1.height, DestinationX=0, DestinationY=0,	DestinationWidth=SourceWidth, DestinationHeight=SourceHeight );
	CanvasElement2.getContext('2d').drawImage( ImageElement, SourceX=0, SourceY=CanvasElement1.height, SourceWidth=ImageElement.width, SourceHeight=CanvasElement2.height, DestinationX=0, DestinationY=0,	DestinationWidth=SourceWidth, DestinationHeight=SourceHeight );
	FigureElement.remove();	
}

Dato che voglio che i pezzi della spada siano interi e in verticale prima di romperla assegno alla colonna contenitore, utilizzando il controllo di posizionamento, display:flex e flex-direction:columns

Per questa animazione userò gsap (solo la libreria base) e applico al pulsante spezza spada (attributo onclick):

gsap.to('#canvas-1', { duration:1.5, rotation:900, x:'100vw', y:'100vh', ease: 'power1.inOut' } );

e al pulsante per riassemblarla:

gsap.to('#canvas-1', { duration:1.5, rotation:0, x:'0vw', y:'0vh', ease: 'power1.inOut' } );

A questo punto possiamo distruggere e riassemblare laspada nella roccia utilizzando i 2 pulsanti, l'animazione non sarà niente di che ma dovrebbe rendere l'idea del pattern. Buon divertimento!

excalibur-nera

Documentazione rilevante aggiuntiva