Posiadam bogatą aplikację interfejsu użytkownika, w której chcę wyświetlać obraz o tak złożonym kształcie
Teraz chcę przyciąć mój obraz zgodnie z obrazem maski, Właściwie obraz jest dynamiczny i można go zaimportować z aparatu lub galerii (kształt kwadratowy lub prostokątny) i chcę, aby ten obraz pasował do mojej ramki układu, jak powyżej
Więc po prostu zastanawiam się, jak to osiągnąć? Każdy pomysł / wskazówka mile widziana
Maska ramki tła
Korzystanie z biblioteki Picassa i niestandardowej transformacji jest jeszcze łatwiejsze:
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; } }
Następnie po prostu zdefiniuj go w linii:
Picasso.with(context) .load(imageUrl) .transform(new MaskTransformation(context, _maskDrawableId)) .placeholder(R.drawable.drawableId) .into(imageView);
źródło
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; } } });
źródło
W tym przykładzie jego element podrzędny (widok obrazu) maskuje maskę „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"/>
sprawdź ten link do gita
źródło