如何在ImageView中遮罩/裁剪一個矩形

Question

我已經創建了一個自定義ImageView在圖像中創建一個透明的矩形，以使其後面的ImageView可見。但是，我無法做到。我已經看了很多其他的答案，這就是我想出了：

public class MaskImageView extends ImageView { 
    private Paint maskPaint; 

    public MaskImageView(Context context) { 
     super(context); 
     init(); 
    } 

    public MaskImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 

    public MaskImageView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(); 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    public MaskImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
     init(); 
    } 

    public void init() { 
     maskPaint = new Paint(); 
     maskPaint.setColor(Color.TRANSPARENT); 
     maskPaint.setAntiAlias(true); 
     maskPaint.setStyle(Paint.Style.FILL); 
     maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     canvas.drawRect(100, 400, 900, 900, maskPaint); 
    } 

    public void setMaskWidth(int width) { 
     maskWidth = width; 
    } 
} 

這是XML佈局：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/holo_red_dark" 
     android:scaleType="centerCrop" 
     android:src="@drawable/blackwhite" /> 


    <io.example.test.MaskImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/holo_red_dark" 
     android:scaleType="centerCrop" 
     android:src="@drawable/color" /> 
</RelativeLayout> 

我上留下的照片，但我想它看起來像右邊的照片。請注意，正常的ImageView drawable是MaskImageView照片的灰度版本。

Answer 1

我寫了一個簡單View延伸ImageView這確實你想要做什麼。要使用它，你需要做的就是給它一個Rect，它將你想要的區域定義爲灰度。

下面的代碼：

public class MaskImageView extends ImageView 
{ 
    private Rect mMaskRect; 

    public MaskImageView(Context context) 
    { 
     super(context); 
     init(); 
    } 

    public MaskImageView(Context context, AttributeSet attrs) 
    { 
     super(context, attrs); 
     init(); 
    } 

    public MaskImageView(Context context, AttributeSet attrs, int defStyleAttr) 
    { 
     super(context, attrs, defStyleAttr); 
     init(); 
    } 

    private void init() 
    { 
     mMaskRect = new Rect();  
    } 

    // Use this to define the area which should be masked. 
    public void setRect(Rect rect) 
    { 
     mMaskRect.set(rect); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) 
    { 
     canvas.clipRect(mMaskRect, Region.Op.DIFFERENCE); 
     super.onDraw(canvas); 
    } 
} 

我測試過它，它似乎運作良好。這應該讓你開始。

Answer 2

我不認爲你能真正做到這一點。什麼我會建議，而不是越來越接近底部的ImageView位圖和繪圖從位圖區域到您的頂部ImageView的。您可以獲得相同的效果，但不需要使ImageView變得透明。

取決於你如何得到原始圖像插入的ImageView您可以用它來得到你想要繪製位圖：

https://stackoverflow.com/a/8306683/3760854

那麼你就必須爲正方形從位圖複製，你可以做到使用此代碼：

https://stackoverflow.com/a/8180576/3760854