Redimensionner et mettre à l'échelle HTML5 Toile et contenu

Question

Je travaille sur une application qui incorpore une interface de dessin (comme Paint ou Photoshop) en tant qu'élément de canevas HTML5. Je voudrais pouvoir redimensionner dynamiquement l'élément de canevas et les données de pixel sur celui-ci pour simuler la fonctionnalité de zoom. Mes pensées ont une sorte de fenêtre qui contient l'élément canvas. Je pourrais alors redimensionner la toile et son contenu à l'intérieur de la fenêtre d'affichage (qui reste de la même taille).

Comment est-ce que je ferais mieux de mettre en application cette fonctionnalité?

Answer 1

Vous pouvez le faire très facilement en séparant l'affichage de la surface de dessin en introduisant un autre canevas. Créez un canevas masqué à l'aide de

var canvas = document.createElement('canvas'); 

Dessinez ensuite la totalité de votre scène sur ce canevas. Dessinez ensuite le contenu de ce canevas sur un autre canevas qui est réellement visible à l'utilisateur en utilisant la méthode drawImage (qui peut également recevoir un canevas au lieu d'une image). Si vous voulez dessiner votre scène zoomée, vous pouvez le faire en faisant le rectangle source (les paramètres sy, sx, sw et sh sur drawImage) sur la toile cachée plus petit, lorsque vous le dessinez sur le canevas visuel. Cela vous donnera l'effet de zoom.

Cependant, si vous avez complètement redessiné chaque image sur votre canevas, vous pouvez également simplement regarder le scale method de l'objet canevas.

Answer 2

J'ai du succès en utilisant transform: scale() sur un élément canvas et son contenu. Cependant, dans les situations où l'élément canvas doit être importé avec un iframe et la transformation: scale se produit sur l'iframe, il fonctionne sur safari mais pas sur safari mobile. lien correspondant ci-dessous

https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas