Foros del Web » Diseño web » HTML »

Borrar imagenes canvas

Estas en el tema de Borrar imagenes canvas en el foro de HTML en Foros del Web. hola, espero que alguien tenga solucion a este problema, tengo un lineso canvas donde por defecto pinto un mapa y luego adiciono le adiciono iconos, ...
  #1 (permalink)  
Antiguo 02/05/2012, 10:44
Avatar de refielt  
Fecha de Ingreso: mayo-2011
Mensajes: 36
Antigüedad: 3 años, 2 meses
Puntos: 0
Mensaje Borrar imagenes canvas

hola, espero que alguien tenga solucion a este problema,
tengo un lineso canvas donde por defecto pinto un mapa y luego adiciono le adiciono iconos, hasta ahi todo bien pero luego como hago para desactivar o borrar los iconos sin tener que borrar todo el mapa (tengamos en cuenta que todo se dibujar un mismo lienso canvas).

hay una forma para trabajar mediante capas o algo por el estilo en canvas?

ojo: no me vale borrar todo el mapa y pintarlo nuevamente, gracias.
  #2 (permalink)  
Antiguo 02/05/2012, 10:53
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 6 años
Puntos: 103
Respuesta: Borrar imagenes canvas

esa misma pregunta tengo yo tambien. como se puede guardar en una variable una imagen y luego aplicarla ??
  #3 (permalink)  
Antiguo 02/05/2012, 12:28
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 351
Antigüedad: 5 años, 10 meses
Puntos: 186
Respuesta: Borrar imagenes canvas

El concepto de capas o objetos dentro de un canvas no existe.

Entonces, si redibujar todo el fondo no es una opcion. Me inclinaria por crear dos canvas, uno con el fondo y otro con los objetos delantes de el. Uno sobre el otro.

Prepare este ejemplo para que vean el concepto. http://jsfiddle.net/VBfty/

En el pueden ver un fondo invariable de color rojo, que no se redibuja. Y un cuadrado gris, que se va redibujando cada 1 segundo.
  #4 (permalink)  
Antiguo 02/05/2012, 12:58
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.932
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Borrar imagenes canvas

Bueno, no sé muy bien a qué llamamos redibujado. Fijate si esto te sirve aunque sea de mal ejemplo
http://jsfiddle.net/panino/by3NG/1/
  #5 (permalink)  
Antiguo 02/05/2012, 13:25
Avatar de refielt  
Fecha de Ingreso: mayo-2011
Mensajes: 36
Antigüedad: 3 años, 2 meses
Puntos: 0
Respuesta: Borrar imagenes canvas

ryugen, gracias pero si creo otro canvas sobre el canvas del mapa, blokeare los eventos de este, ejemplo: arrastre, zoom, consulta, etc.

Panino5001, se ve interesante tu ejemplo, pero tengo que verificar si borra tambien parte del fondo (que seria otra imagen), la idea es que no lo haga.
  #6 (permalink)  
Antiguo 02/05/2012, 13:30
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 351
Antigüedad: 5 años, 10 meses
Puntos: 186
Respuesta: Borrar imagenes canvas

Cita:
Iniciado por refielt Ver Mensaje
ryugen, gracias pero si creo otro canvas sobre el canvas del mapa, blokeare los eventos de este, ejemplo: arrastre, zoom, consulta, etc.

Panino5001, se ve interesante tu ejemplo, pero tengo que verificar si borra tambien parte del fondo (que seria otra imagen), la idea es que no lo haga.
El ejemplo de Panino no borra el fondo, porque sobre cada acción guarda un snapshot de todo el lienzo del canvas, entonces al momento de deshacer no es que borra la imagen que se insertó sino que vuelve al estado anterior del canvas.

En cuanto a mi ejemplo puedes bindear los eventos sobre el foreground y si alguno de ellos tiene impacto en el fondo, simplemente los modificas con los datos del evento de foreground.

Sobre el ejemplo de Panino (del cual no se me habia ocurrido así) habría que chequear el rendimiento de guardar tantas instantaneas del lienzo cuando este esté cambiando muchas veces en el tiempo, o hasta cuando mantener el historial.
Sin embargo, es un concepto que abre todo otro abanico de posibilidades para investigar
  #7 (permalink)  
Antiguo 02/05/2012, 13:32
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.932
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Borrar imagenes canvas

En realidad no la borraría. Verás, lo que hace el ejemplo es tomar una "fotografía" del canvas cada vez que hay un cambio de estado para poder, con esa fotografía, volver al estado anterior. Cuando hablo de fotografía en realidad a lo que me refiero es a guardar, con el método toDataURL, el estado actual del canvas como imagen
Edito: me ganó ryugen y encima lo explicó meor
  #8 (permalink)  
Antiguo 02/05/2012, 15:03
Avatar de refielt  
Fecha de Ingreso: mayo-2011
Mensajes: 36
Antigüedad: 3 años, 2 meses
Puntos: 0
Respuesta: Borrar imagenes canvas

buena idea la de guardar una captura, pero ahora el problema es que el metodo toDataURL no me reconoce en ie8 (estoy haciendo un proyecto conpatible con canvas tambien para ie8)
  #9 (permalink)  
Antiguo 02/05/2012, 16:00
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.932
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Borrar imagenes canvas

Esta es otra manera de hacer lo mismo, sólo que tampoco funcionará en explorer 8:
Código PHP:
<script type="text/javascript">
var 
c,ctx,cero,uno,dos,historial=[];
function 
_(x){return document.getElementById(x);}
function 
inicio(){
    
c=document.getElementById('c');
    
ctx=c.getContext('2d');
    
ctx.fillStyle ="#F00";
    
ctx.fillRect(0,0,300,300);
    
    
cero=ctx.getImageData(00300300);
    
historial.push(cero);
}
function 
addSmile1(){
    
ctx.drawImage(_('im1'),5,10);
    
    
uno=ctx.getImageData(00300300);
    
historial.push(uno);
}
function 
addSmile2(){
    
ctx.drawImage(_('im2'),100,100);
    
    
dos=ctx.getImageData(00300300);;
    
historial.push(dos);
}
function 
revert(){
    
historial.pop();
    if(
historial.length){
        
        
ctx.putImageData(historial.pop(), 00);
        
    }else{
        
inicio();
    }
}
onload=inicio;
</script> 
Para explorer 8 hay que seguir pensando...
  #10 (permalink)  
Antiguo 02/05/2012, 21:06
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.932
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Borrar imagenes canvas

Con http://code.google.com/p/flashcanvas/ parece funcionar en Explorer <9 la primera opción ;)

Etiquetas: canvas, html5, mapa
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




La zona horaria es GMT -6. Ahora son las 10:47.
SEO by vBSEO 3.3.2