 |
|
||
|
|
|
|||||||
| Programación y Desarrollo para Android Subforo exclusivo para temas de programación de software para PDAs y desarrollo de aplicaciones, interfaces, etc bajo Android |
 |
|
|
Herramientas |
|
#1
20/04/13, 21:09:23
|
||||
|
||||
|
marco en un imageview
Hola, tengo una imagen muy chula en plan negavtivo fotografico y me gustaría añadir un imageview dentro de una de las imagenes del negativo, hay alguna manera de conseguir ese efecto?
un s2
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack 
|
|
|
|
#2
20/04/13, 21:24:59
|
||||
|
||||
|
Piensa en capas, una encima de otra. Debajo la imagen del negativo y encima la imagen en cuestión.
Para superponer capas puedes usar una RelativeLayout o un FrameLayout, y dentro las dos imageview, primero el marco y luego la imagen (o viceversa solo si el marco es un png con el interior transparente). Lo siguiente es ajustar con código las posiciones concretas, más concretamente el margen de la "foto" para que coincida con los bordes del marco. Ahí no te queda otra que echar cuentas sabiendo las proporciones del marco y el tamaño actual que tiene la vista. Otra opción es crearte una vista propia que herede de imageview y a la que le puedas pasar una segunda imagen. En el método onDraw el imageview haría su trabajo normal con super (pintaría el marco) y tú además dibujarías en el canvas la foto escalada y posicionada convenientemente (= con las operaciones matemáticas de las que no te libras).
__________________
El mejor Cuatro en Raya de Android (Hilo en HTCMania, Play Store) ¡Un millón de descargas!
|
| Gracias de parte de: | ||
|
#3
20/04/13, 22:58:14
|
||||
|
||||
 Cita: Originalmente Escrito por mocelet
Piensa en capas, una encima de otra. Debajo la imagen del negativo y encima la imagen en cuestión.
Para superponer capas puedes usar una RelativeLayout o un FrameLayout, y dentro las dos imageview, primero el marco y luego la imagen (o viceversa solo si el marco es un png con el interior transparente). Lo siguiente es ajustar con código las posiciones concretas, más concretamente el margen de la "foto" para que coincida con los bordes del marco. Ahí no te queda otra que echar cuentas sabiendo las proporciones del marco y el tamaño actual que tiene la vista. Otra opción es crearte una vista propia que herede de imageview y a la que le puedas pasar una segunda imagen. En el método onDraw el imageview haría su trabajo normal con super (pintaría el marco) y tú además dibujarías en el canvas la foto escalada y posicionada convenientemente (= con las operaciones matemáticas de las que no te libras).  eaaaa lo de las capas es loq tenia pensado pero claro... cuando me puse a ello dependiendo del dispositivo se le iba la olla... era lo q queria evitar las matematicas  DD bueno habrá q intentarloun saludo
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#4
21/04/13, 11:40:37
|
||||
|
||||
|
Yo tengo una clase que hace eso.
Código:
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;
public class MaskedImageView extends ImageView{
Resources resources;
public MaskedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
resources = context.getResources();
}
@Override
public void setImageBitmap(Bitmap original) {
if (original==null)
return;
Bitmap mask = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotomask);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Bitmap back = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotoback);
Canvas c = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
c.drawBitmap(original, new Rect(0, 0, original.getWidth(), original.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), null);
c.drawBitmap(mask, new Rect(0, 0, mask.getWidth(), mask.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), paint);
c.drawBitmap(back, new Rect(0, 0, back.getWidth(), back.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), null);
paint.setXfermode(null);
super.setImageBitmap(result);
}
}
Vas a necesitar 2 imágenes: - Back: Una imagen normal y corriente, será la imagen que se verá de fondo en las zonas que la imagen original no se dibuje. - Mask: Es una imagen negativa de las zonas que quieres que sean transparentes en la imagen original, es decir, esta imagen tendrá 2 colores (puede tener más, pero al final será como si fuesen 2). Color blanco para las zonas que quieres que se dibuje Back, color distinto de blanco (por ejemplo negro) para las zonas donde quieres que se dibuje Original. Por ejemplo, tienes una imagen Original cualquiera, y tienes una imagen Back cualquiera. Y la imagen Mask es un fondo blanco con un cuadrado de 10x10 en el centro. Pues el resultado será una imagen que se verá la imagen Back, menos un cuadrado de 10x10 en el centro que se verá ESA ZONA de la imagen Original. Espero haberte ayudado.
|
| Gracias de parte de: | ||
|
#5
21/04/13, 15:29:31
|
||||
|
||||
|
Cita: Originalmente Escrito por kriogeN
Yo tengo una clase que hace eso.
Código:
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;
public class MaskedImageView extends ImageView{
Resources resources;
public MaskedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
resources = context.getResources();
}
@Override
public void setImageBitmap(Bitmap original) {
if (original==null)
return;
Bitmap mask = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotomask);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Bitmap back = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotoback);
Canvas c = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
c.drawBitmap(original, new Rect(0, 0, original.getWidth(), original.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), null);
c.drawBitmap(mask, new Rect(0, 0, mask.getWidth(), mask.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), paint);
c.drawBitmap(back, new Rect(0, 0, back.getWidth(), back.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getWidth()), null);
paint.setXfermode(null);
super.setImageBitmap(result);
}
}
Vas a necesitar 2 imágenes: - Back: Una imagen normal y corriente, será la imagen que se verá de fondo en las zonas que la imagen original no se dibuje. - Mask: Es una imagen negativa de las zonas que quieres que sean transparentes en la imagen original, es decir, esta imagen tendrá 2 colores (puede tener más, pero al final será como si fuesen 2). Color blanco para las zonas que quieres que se dibuje Back, color distinto de blanco (por ejemplo negro) para las zonas donde quieres que se dibuje Original. Por ejemplo, tienes una imagen Original cualquiera, y tienes una imagen Back cualquiera. Y la imagen Mask es un fondo blanco con un cuadrado de 10x10 en el centro. Pues el resultado será una imagen que se verá la imagen Back, menos un cuadrado de 10x10 en el centro que se verá ESA ZONA de la imagen Original. Espero haberte ayudado. Voy a probar, de momento estaba haciendolo de la manera que me comento mocelet, extendiendo de imageview y modificando el ondraw con super, y la cosa va bien salvo por las puñeteras matematicas, las densidades de pantalla me estan volviendo loco... jjeje ya os comentare, gracias sl2
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#6
21/04/13, 16:01:37
|
||||
|
||||
|
Una pregunta...
Por mucho que busco en r.drawable no aparece mis imagenes, las tengo metidas en sus correspondientes carpetas pero no salen... que puede pasar? R.drawable.MIIMAGEN EDIT, solucionado
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack Última edición por Dild0 Día 21/04/13 a las 16:06:17.
|
|
#7
21/04/13, 22:09:26
|
||||
|
||||
|
Hola, pues he intentado con tu clase kriogen y la verdad que esta muy bien pero no llega a funcionarme correctamente, pongo en back la foto marco y en mask me hice una foto BN del mismo tamaño que el back con fondo negro donde deberia ir la foto original y lo demas en blanco, y el resultado esta bien a medias, me pinta mi foto original redimensionada en la zona negra pero el marco lo pinta mal, ampliado de tamaño con muy baja calidad y cortandome cierto trozo de imagen...
como no esntiendo muy bien lo que hace no se decirte, seguire inrtentado el metodo matematico  Graciasssssssssssssssss
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#8
22/04/13, 08:50:42
|
||||
|
||||
|
Me acabo de dar cuenta que la clase tiene un pequeño fallo, y que me estaba dando a mi también problemas y no sabía de donde venía.
Ahora cuando llegue a la oficina lo soluciono y lo vuelvo a postear, a ver si así te funciona bien.
|
|
#9
22/04/13, 09:34:14
|
||||
|
||||
|
Cita: Originalmente Escrito por kriogeN
Me acabo de dar cuenta que la clase tiene un pequeño fallo, y que me estaba dando a mi también problemas y no sabía de donde venía.
Ahora cuando llegue a la oficina lo soluciono y lo vuelvo a postear, a ver si así te funciona bien.
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#10
22/04/13, 09:53:39
|
||||
|
||||
|
Prueba así:
Código:
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;
public class MaskedImageView extends ImageView{
Resources resources;
public MaskedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
resources = context.getResources();
}
@Override
public void setImageBitmap(Bitmap original) {
if (original==null)
return;
Bitmap mask = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotomask);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Bitmap back = BitmapFactory.decodeResource(resources,R.drawable.item_usuario_fotoback);
Canvas c = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
c.drawBitmap(original, new Rect(0, 0, original.getWidth(), original.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getHeight()), null);
c.drawBitmap(mask, new Rect(0, 0, mask.getWidth(), mask.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getHeight()), paint);
c.drawBitmap(back, new Rect(0, 0, back.getWidth(), back.getHeight()),
new Rect(0, 0, mask.getWidth(), mask.getHeight()), null);
paint.setXfermode(null);
super.setImageBitmap(result);
}
}
|
| Gracias de parte de: | ||
|
#11
22/04/13, 11:13:13
|
||||
|
||||
|
Funciona genial kriogeN eres una machine.
ahora tengo tu método y el que me he creado yo con la forma de actuar que me dijo mocelet que ya he conseguido ajustar los margenes dependiendo de la densidad de la pantalla... Si algún día saco dinero con alguna apli os tendre que pasar un porcentaje jejejje  
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#12
22/04/13, 11:36:52
|
||||
|
||||
|
Por cierto, para toquetear yo....
Tu clase pinta un canvas a pantalla completa y sobre el ya va pintando lo demás??? Me he fijado que me desaparece el fondo de pantalla y pinta blanco EDIT: Me acabo de dar cuenta que lo mismo no funciona, nose ya me esta liando.... yo tengo un back transparente y por eso salia la imagen de fondo pero si pongo un back completamente solido no borra la parte de la mascara... quiza mis imagenes estén mal nose además me sale este warning Bitmap too large to be uploaded into a texture (1600x2560, max=2048x2048) pero me fijado y yo no tengo ninguna imagen de ese tamaño...
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack Última edición por Dild0 Día 22/04/13 a las 12:30:56.
|
|
#13
22/04/13, 12:45:37
|
||||
|
||||
|
El Back es lo último que se dibuja, así que obviamente si no tiene zonas transparentes sólo vas a ver el Back.
La clase lo que hace es pintar la imagen que le pasas mediante el setImageBitmap (por ahora no puedes usarlo mediante el src del XML porque no tiene implementado el método setImageDrawable ni setImageResource), y el orden es el siguiente: Pinta la imagen que le pasas, como si fuese un ImageView normal, pero con la imagen reescalada al tamaño del Mask. Después sobre esa la imagen pinta el Mask, que lo que hace es hacer transparentes las imágenes que en el Mask sean de color distinto de blanco, y dejar de la imagen original las zonas que en el Mask sean blancas. El Mask puede ser todo lo complicado que quieras, no sólo tiene porque ser un marco, imagina que quieres dejar transparente la imagen de tal forma que parezca que un tigre ha desgarrado la foto. Pues pintas un zarpazo de color amarillo (por ejemplo,distinto de blanco) sobre un fondo blanco. Y por último lo que hace es pintar el Back, de forma normal y corriente, sobre la imagen generada después de pintar el Mask. Obviamente esta imagen tendrá que tener zonas transparentes para las partes que quieres que se vean de la imagen que se ha generado previamente. Espero que ya lo tengas claro, no se como explicarlo mejor. Un saludo.
|
|
#14
22/04/13, 13:15:19
|
||||
|
||||
|
Cita: Originalmente Escrito por kriogeN
El Back es lo último que se dibuja, así que obviamente si no tiene zonas transparentes sólo vas a ver el Back.
La clase lo que hace es pintar la imagen que le pasas mediante el setImageBitmap (por ahora no puedes usarlo mediante el src del XML porque no tiene implementado el método setImageDrawable ni setImageResource), y el orden es el siguiente: Pinta la imagen que le pasas, como si fuese un ImageView normal, pero con la imagen reescalada al tamaño del Mask. Después sobre esa la imagen pinta el Mask, que lo que hace es hacer transparentes las imágenes que en el Mask sean de color distinto de blanco, y dejar de la imagen original las zonas que en el Mask sean blancas. El Mask puede ser todo lo complicado que quieras, no sólo tiene porque ser un marco, imagina que quieres dejar transparente la imagen de tal forma que parezca que un tigre ha desgarrado la foto. Pues pintas un zarpazo de color amarillo (por ejemplo,distinto de blanco) sobre un fondo blanco. Y por último lo que hace es pintar el Back, de forma normal y corriente, sobre la imagen generada después de pintar el Mask. Obviamente esta imagen tendrá que tener zonas transparentes para las partes que quieres que se vean de la imagen que se ha generado previamente. Espero que ya lo tengas claro, no se como explicarlo mejor. Un saludo. Ya lo he pillado,,, pues entoces no funciona.
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
|
#15
22/04/13, 14:02:20
|
||||
|
||||
|
Vale, llevas razón, no es blanco, es transparente.
La imagen de la H, que supongo que es la que quieres que actúe de máscara, tiene que ser fondo transparente y la H de un color distinto de transparente (por ejemplo negro, que es el que tienes). Prueba así y me cuentas.
|
|
#16
22/04/13, 14:13:58
|
||||
|
||||
|
Correcto, así si, le puse el paint a mi marco q tenia cosas transparanete y vi q si funcionaba pero no cai que era por el transparente..
gracias por tu tiempo,
__________________
Prueba mis aplicaciones para android:
Signature Maker - Código en GitHub Pain Log - Código en GitHub Square attack
|
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar134847_1.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar510787_1.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/unknown.gif)
