帧中掩蔽(作物)图像

拥有一个丰富的 UI 应用程序,我想在其中显示具有这样复杂形状的图像

enter image description here

现在我想要的是裁剪我的图像作为每个蒙版图像,实际上 图像是动态的,可以从照相机或画廊(方形或矩形形状)导入和我想要的图像,以适应我的布局框架,如上所述

所以只是想知道我是如何做到这一点的? 任何想法/提示欢迎

背景框
enter image description here
面具
enter image description here

就像 这个

50127 次浏览

最后通过改变掩模图像和 XfermodeBitmap的混合使用,得到了解决方案

面具

enter image description here

 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);

看输出

enter image description here

源可以找到 译自: 美国《每日邮报》网站(https://github.com/hotverypepper/MaskImage)原著: http://www.github.com/

     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);

此示例使用掩码“ Animation _ ask”掩码他的子元素(Imageview)

<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"/>

看看这个 Git 链接