example - Lienzo redimensionable(JQuery UI)

jquery ui collapsible

Question

CUALQUIER elemento DOM se puede cambiar de tamaño según esta página: http://jqueryui.com/demos/resizable/

Sin embargo, parece que esto no funciona para el elemento CANVAS. ¿Posible?

Answer 1

Bien, ¿por qué no aplicar un div antes del elemento de lienzo y cambiar el tamaño de ese elemento, y cuando se detiene, aplicar ancho y alto en el lienzo y luego volver a dibujar el lienzo.

Answer 2

Canvas tiene dos tipos de comportamiento de cambio de tamaño:

• Cambiar el tamaño de los contenidos que se estiran para adaptarse a las nuevas dimensiones del lienzo
• Cambiar el tamaño donde el contenido permanece estático mientras el lienzo crece o se encoge

Aquí hay una página que muestra los dos tipos de "cambio de tamaño": http://xavi.co/static/so-resizable-canvas.html

Si desea el primer tipo de redimensionamiento (estirar el contenido), coloque el lienzo en un contenedor div y configure el width y height del lienzo al 100% con CSS. Esto es lo que podría parecer ese código:

/* 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();

El segundo tipo de cambio de tamaño (contenido estático) es un proceso de dos pasos. Primero debe ajustar los atributos de width y height del elemento canvas. Desafortunadamente, al hacer esto se borra el lienzo, por lo que debe volver a dibujar todo su contenido. Aquí hay un poco de código que hace esto:

/* 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);
    });
} });

Actualmente, el código anterior vuelve a dibujar el contenido del lienzo cuando el usuario deja de cambiar el tamaño del widget. Es posible volver a dibujar el lienzo en el cambio de resize , sin embargo, cambiar el tamaño de los eventos se producen con bastante frecuencia y los sorteos son operaciones caras: acérquese con precaución.

Answer 3

Hay un poco de una peculiaridad graciosa en el sistema de coordenadas del lienzo, con respecto al uso de esto:

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

(del ejemplo anterior)

Debe usar estas reglas de CSS porque no puede especificar% en los atributos de ancho / alto del lienzo. Pero descubrirá que obtiene resultados inesperados cuando intenta dibujar objetos usando solo estas reglas: los objetos dibujados aparecen aplastados. Aquí está el CSS anterior, con un borde de lienzo ...

    /* The CSS */
    #stretch {
        width: 200px;
        height: 100px;          
    }
    #stretch canvas {
        border:1px solid red;
        width: 100%;
        height: 100%;
    }

El lienzo se dibuja con el tamaño correcto y la regla de borde se implementa correctamente. Se supone que el rectángulo azul, agregado en el código en cualquier otro lugar, llena el lienzo con un relleno de 20 píxeles por todas partes, pero esto no ha sucedido:

Para solucionar esto, asegúrese de especificar también un ancho y alto para el elemento canvas (ya sea en el HTML o en javascript con setAttribute):

canvas.setAttribute(''width'', ''200'');
canvas.setAttribute(''height'', ''100'');

o

<canvas width=200 height=100></canvas>

Ahora cuando actualizo la página obtengo lo que esperaba:

Esta ''doble verificación'' asegurará que el lienzo se dibuje utilizando el sistema de coordenadas correcto y aún permita que se cambie de tamaño, a través de las reglas de CSS. Si esto es un error, estoy seguro de que se solucionará a su debido tiempo.

Solo se trata de proporcionar una solución, pero puede leer más here