在框架中遮蔽(裁剪)图像
有一个丰富的UI应用程序,我想用这种复杂的形状来显示图像
现在我想要的是根据Mask图像裁剪我的图像,实际上图像是dynamic的,可以从Camera或Gallery(正方形或长方形形状)导入 ,我希望该图像适合我的布局框架
所以只是想知道如何实现这一目标? 任何想法/提示欢迎
背景框架
面具
像这样
最后在改变蒙板图像和使用Xfermode
和Bitmap
得到了解决scheme
面具
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);
看输出
来源可以在这里find
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; } } });
使用毕加索图书馆和自定义转换更容易:
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; } }
然后简单地将其定义在一行中:
Picasso.with(context) .load(imageUrl) .transform(new MaskTransformation(context, _maskDrawableId)) .placeholder(R.drawable.drawableId) .into(imageView);