Имея приложение с богатым пользовательским интерфейсом, в котором я хочу показать изображение сложной формы, подобное этой
Теперь я хочу обрезать свое изображение в соответствии с изображением маски, на самом деле изображение становится динамическим и может быть импортировано из камеры или галереи (квадратная или прямоугольная форма), и я хочу, чтобы это изображение поместилось в моем фрейме макета, как показано выше.
Так что просто интересно, как мне этого добиться? Любая идея / подсказка приветствуются
Фон кадра
Маска
Как это
Еще проще использовать библиотеку Пикассо и настраиваемое преобразование:
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);
источник
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; } } });
источник
В этом примере его дочерний элемент (Imageview) маскируется с помощью маски 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"/>
проверьте эту ссылку git
источник