Tener una rica interfaz de usuario de la aplicación en la que quiero mostrar la imagen con forma compleja como esta

Enmascaramiento(cultivos) de la imagen en el fotograma

Ahora lo que yo quiero es cosecha de mi imagen por imagen de la Máscara, en Realidad imagen viene dinámico y que puede ser importado desde la Cámara o Galería(forma de cuadrado o rectángulo) y quiero que la imagen para que quepa en mi marco de presentación de arriba

Tan sólo me preguntaba que ¿cómo he de lograr esto? Cualquier idea /sugerencia bienvenida

Marco de fondo

Enmascaramiento(cultivos) de la imagen en el fotograma

Máscara

Enmascaramiento(cultivos) de la imagen en el fotograma

Como este

InformationsquelleAutor Azhar Shaikh | 2012-09-27

3 Comentarios

  1. 141

    Finalmente tienes la solución, mientras que el cambio de imagen de la máscara y el uso de Xfermode con Bitmap

    Máscara

    Enmascaramiento(cultivos) de la imagen en el fotograma

     ImageView mImageView= (ImageView)findViewById(R.id.imageview_id);
     Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.content_image);
     Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask);
     Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
     Canvas mCanvas = new Canvas(result);
     Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
     paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
     mCanvas.drawBitmap(original, 0, 0, null);
     mCanvas.drawBitmap(mask, 0, 0, paint);
     paint.setXfermode(null);
     mImageView.setImageBitmap(result);
     mImageView.setScaleType(ScaleType.CENTER);
     mImageView.setBackgroundResource(R.drawable.background_frame);

    ver la salida

    Enmascaramiento(cultivos) de la imagen en el fotograma

    Fuente se puede encontrar aquí

    • Buen trabajo, Gracias por el GIT de código.
    • hola @hotveryspicy,gracias por código de ejemplo,ayudó mucho. Estoy frente a algún problema,alguna pequeña pista harán mucho para mí. Me quiero cortar el mapa de bits en alguna forma de polígono dibujado. Mi mapa de bits cortes en forma de polígono, pero el contenido de la recortada de mapa de bits se toma de la parte superior izquierda, es decir 0,0 de mapa de bits original. Y quiero que el contenido que aparece a continuación, donde el polígono se dibuja.
    • usted puede crear a escala de mapa de bits para el mismo.
    • gracias por la respuesta. En realidad quiero hacer la misma cosa dada en aquí. stackoverflow.com/questions/15969028/…. Mi problema es recortada de mapa de bits es el cultivo de arriba a la izquierda.e 0,0. No forma el camino que he especificado. También he puesto el código. Por favor me guía a donde estoy yendo mal.
    • gracias @hotveryspicy, para cualquier persona que la necesite, he hecho una simple horquilla que puede ayudar a la escala de la imagen de la máscara del tamaño: github.com/worker8/MaskImage/tree/master
    • A escala de la máscara para ajustarse a la imagen, yo uso esta línea: cambia el tamaño de mapa de bits = mapa de bits.createScaledBitmap(máscara original.getWidth(), original.getHeight(), true); Y el uso de la mCanvas.drawBitmap(original, 0, 0, null); mCanvas.drawBitmap(tamaño, 0, 0, pintura);
    • muy gracias por el código. Quiero saber cómo hacer esto (los enmascarar la imagen) con la animación.
    • ¿Esta causa OOM?
    • Mapa de bits seleccionado no se ajusta a imageview altura y la anchura del
    • Yo estoy usando el mismo código pero no puede enfocar los objetos en la imagen, por favor ayuda
    • ¿cómo puedo hacer esto con la cámara?

  2. 5

    Es incluso más fácil de usar el Picasso de la biblioteca y una Transformación personalizada:

    MaskTransformation.java:

     * ORIGINAL:
    * Copyright (C) 2015 Wasabeef
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */
    package me.monori.example.utilities;
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.graphics.drawable.Drawable;
    import android.support.v4.content.ContextCompat;
    import com.squareup.picasso.Transformation;
    public class MaskTransformation implements Transformation {
    private static Paint mMaskingPaint = new Paint();
    private Context mContext;
    private int mMaskId;
    static {
    mMaskingPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    }
    /**
    * @param maskId If you change the mask file, please also rename the mask file, or Glide will get
    * the cache with the old mask. Because getId() return the same values if using the
    * same make file name. If you have a good idea please tell us, thanks.
    */
    public MaskTransformation(Context context, int maskId) {
    mContext = context.getApplicationContext();
    mMaskId = maskId;
    }
    @Override public Bitmap transform(Bitmap source) {
    int width = source.getWidth();
    int height = source.getHeight();
    Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Drawable mask = getMaskDrawable(mContext, mMaskId);
    Canvas canvas = new Canvas(result);
    mask.setBounds(0, 0, width, height);
    mask.draw(canvas);
    canvas.drawBitmap(source, 0, 0, mMaskingPaint);
    source.recycle();
    return result;
    }
    @Override public String key() {
    return "MaskTransformation(maskId=" + mContext.getResources().getResourceEntryName(mMaskId)
    + ")";
    }
    public Drawable getMaskDrawable(Context context, int maskId) {
    Drawable drawable = ContextCompat.getDrawable(context, maskId);
    if (drawable == null) {
    throw new IllegalArgumentException("maskId is invalid");
    }
    return drawable;
    }
    }

    A continuación, basta con definir en una línea:

    Picasso.with(context)
    .load(imageUrl)
    .transform(new MaskTransformation(context, _maskDrawableId))
    .placeholder(R.drawable.drawableId)
    .into(imageView);
    • Este funcionaba a la perfección. Saludos!
  3. 1
         final ImageView mImageView = (ImageView) findViewById(R.id.image);
    mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);
    mImageView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    if(b){
    mImageView.setBackgroundResource(R.drawable.profil_circle);
    Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.doge);
    Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask_white);
    Bitmap mask1 = BitmapFactory.decodeResource(getResources(),R.drawable.pencil_bg);
    original = Bitmap.createScaledBitmap(original, mask.getWidth(),mask.getHeight(), true);
    Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),Config.ARGB_8888);
    Canvas mCanvas = new Canvas(result);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    mCanvas.drawBitmap(original, 0, 0, null);
    mCanvas.drawBitmap(mask, 0, 0, paint);
    mCanvas.drawBitmap(mask1, 0, 0, null);
    Bitmap mask2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_pencil);
    mCanvas.drawBitmap(mask2, 0, 0, null);
    mImageView.setImageBitmap(result);
    mImageView.setScaleType(ScaleType.FIT_XY);
    b=false;
    }else{
    ImageView mImageView = (ImageView) findViewById(R.id.image);
    Bitmap original = BitmapFactory.decodeResource(getResources(),
    R.drawable.doge);
    Bitmap mask = BitmapFactory.decodeResource(getResources(),
    R.drawable.mask_white);
    original = Bitmap.createScaledBitmap(original, mask.getWidth(),
    mask.getHeight(), true);
    Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),
    Config.ARGB_8888);
    Canvas mCanvas = new Canvas(result);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    mCanvas.drawBitmap(original, 0, 0, null);
    mCanvas.drawBitmap(mask, 0, 0, paint);
    paint.setXfermode(null);
    mImageView.setImageBitmap(result);
    mImageView.setScaleType(ScaleType.FIT_XY);
    //mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);
    b= true;
    }
    }
    });
    • Por favor, añadir un poco de explicación a su código.

Dejar respuesta

Please enter your comment!
Please enter your name here