Ter um aplicativo de IU rico em que desejo mostrar imagens com formas complexas como esta
Agora o que eu quero é recortar minha imagem conforme a imagem de máscara. Na verdade, a imagem está se tornando dinâmica e pode ser importada da câmera ou galeria (formato quadrado ou retângulo) e eu quero que a imagem caiba no meu quadro de layout como acima
Então, estou pensando como faço para conseguir isso? Qualquer ideia / sugestão bem-vinda
Máscara de quadro de fundo
como este
Respostas:
Finalmente consegui a solução ao mudar a imagem da máscara e usar XfermodecomBitmap
mascarar
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 saída
A fonte pode ser encontrada aqui
É ainda mais fácil usar a biblioteca do Picasso e uma transformação 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;
}
}
Em seguida, basta defini-lo em uma linha:
Picasso.with(context)
.load(imageUrl)
.transform(new MaskTransformation(context, _maskDrawableId))
.placeholder(R.drawable.drawableId)
.into(imageView);
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;
}
}
});
Este exemplo mascara seu elemento filho (Imageview) com a máscara "animation_mask"
<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
android:id="@+id/frm_mask_animated"
android:layout_width="100dp"
app:porterduffxfermode="DST_IN"
app:mask="@drawable/animation_mask"
android:layout_height="100dp">
<ImageView android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/unicorn"/>