Toile Resizable (jQuery UI)

Toile a deux types de comportement de redimensionnement:

• redimensionnement où le contenu est étiré pour s'adapter aux nouvelles dimensions de la toile
• redimensionnement où le contenu reste statique pendant que la toile croît ou rétrécit

Voici une page qui montre les deux types de "redimensionnement": http://xavi.co/static/so-resizable-canvas.html

Si vous voulez le le premier type de redimensionnement (étirer le contenu) place ensuite la toile dans un contenant div et place les width et height de la toile à 100% en utilisant CSS. Voici à quoi pourrait ressembler ce code:

/* The CSS */
#stretch {
    height: 100px;
    width: 200px;
}

#stretch canvas {
    width: 100%;
    height: 100%;
}

<!-- The markup -->
<div id="stretch"><canvas></canvas></div>

// The JavaScript
$("#stretch").resizable();

Le deuxième type de redimensionnement (contenu statique) est un processus en deux étapes. Vous devez d'abord ajuster les attributs width et height de l'élément canvas. Malheureusement, faire cela efface la toile, donc vous devez re-tirer tous ses contenu. Voici un peu de code qui fait ceci:

/* The CSS */
#resize {
    height: 100px;
    width: 200px;
}

<!-- The markup -->
<div id="resize"><canvas></canvas></div>

// The JavaScript
$("#resize").resizable({ stop: function(event, ui) {
    $("canvas", this).each(function() { 
        $(this).attr({ width: ui.size.width, height: ui.size.height });

        // Adjusting the width or height attribute clears the canvas of
        // its contents, so you are forced to redraw.
        reDraw(this);
    });
} });

actuellement, le code ci-dessus renvoie le contenu du canvas lorsque l'utilisateur cesse de redimensionner le widget. Il est possible de re-dessiner la toile sur redimensionner , cependant les événements redimensionner se produisent assez souvent et les re-tirages sont des opérations coûteuses -- approche avec prudence.