Foros del Web » Programando para Internet » Javascript »

cambiar vista de canvas

Estas en el tema de cambiar vista de canvas en el foro de Javascript en Foros del Web. si tengo una figura en un canvas(height = "100" width "100") y su posición en el canvas es(0, 100) , luego, después de hacer canvas.scale ...
  #1 (permalink)  
Antiguo 15/03/2011, 21:08
 
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 10 años, 3 meses
Puntos: 0
Pregunta cambiar vista de canvas

si tengo una figura en un canvas(height = "100" width "100") y su posición en el canvas es(0, 100) , luego, después de hacer canvas.scale (2,2). no veo la figura, porque el zoom se hace en la posicion (0,0)
cómo hago para ver la figura en la posición (0, 100) ???
Gracias amigos
  #2 (permalink)  
Antiguo 15/03/2011, 21:33
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años
Puntos: 831
Respuesta: cambiar vista de canvas

Si la idea es que la figura permanezca en el mismo lugar podés usar el método translate aplicando una traslación horizontal igual canvas.width/escalado horizontal*-1, y lo mismo para la traslación vertical con canvas.height. Ejemplo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin t&#237;tulo</title>
</head>

<
body>
<
canvas width="100" height="100" id="pp"></canvas>
<
script type="text/javascript">
function $(
x){return document.getElementById(x);}
var 
ctx=$('pp').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
<canvas width="100" height="100" id="pp2"></canvas>
<script type="text/javascript">
ctx=$('pp2').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.scale (2,2);
ctx.translate(-50,-50);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
</body>
</html> 
PD: Ojo con el orden. Si cambiamos el orden escalado/traslado, la traslación a aplicar debe cambiar para lograr lo mismo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin t&#237;tulo</title>
</head>

<
body>
<
canvas width="100" height="100" id="pp"></canvas>
<
script type="text/javascript">
function $(
x){return document.getElementById(x);}
var 
ctx=$('pp').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
<canvas width="100" height="100" id="pp2"></canvas>
<script type="text/javascript">
ctx=$('pp2').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.translate(-100,-100);
ctx.scale (2,2);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
</body>
</html> 

Última edición por Panino5001; 15/03/2011 a las 22:10

Etiquetas: canvas, vistas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:30.