lienzo de tamaño variable (jQuery UI)

Question

cualquier elemento DOM se puede hacer de tamaño variable de acuerdo a esta página: http://jqueryui.com/demos/resizable/

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

Answer 1

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

• Cambio de tamaño, donde el contenido se estiran para adaptarse a las nuevas dimensiones de la lona
• Cambio de tamaño, donde el contenido permanece estática mientras que la tela crece o se reduce

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 cambiar el tamaño (estirar el contenido) a continuación, coloque el lienzo en un contenedor div y establecer el width y height del lienzo al 100% con CSS. Esto es lo que el código podría ser:

/* 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 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 algo 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 re-dibujan el contenido de la tela cuando el usuario deja de cambiar el tamaño del widget. Es posible volver a dibujar el lienzo en resize, sin embargo, los eventos de redimensionamiento se producen con bastante frecuencia y los redibujados son operaciones caras: acérquese con precaución.

Answer 2

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

Answer 3

Hay un poco de un capricho divertido en el sistema de lona de coordenadas, en lo que respecta a la utilización de este:

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

(en el ejemplo anterior)

Usted tiene que usar estas reglas CSS PORQUE no puede especificar% en los atributos del 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á la CSS anterior, con un borde de la lona ...

/* 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 línea de borde se implementa correctamente.El rectángulo azul, añadido en el código otra parte, se supone que llenar el lienzo con un relleno de 20 píxeles por todas partes, pero esto no ha sucedido:

Para solucionar este problema, asegúrese de que también especificar un ancho y la altura 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 actualice la página me sale lo que esperaba:

Esta 'doble-check' se asegurará de que el lienzo se dibuja usando el sistema de coordenadas correctas y todavía permita que se puede cambiar el 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.

Esto se trata sólo de proporcionar una solución, pero se puede leer más en que se here