问题描述:

I'm trying to make a custom imageview which cuts the image like below.

I checked many solutions but the nearest answer I saw is this link. But its slanting to opposite side and that too from corner. How can I cut the image with other side slanting and starting a little below.

// Custom View

public class SlantView extends View {

private Context mContext;

Paint paint ;

Path path;

public SlantView(Context ctx, AttributeSet attrs) {

super(ctx, attrs);

mContext = ctx;

setWillNotDraw(false);

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

}

@Override

protected void onDraw(Canvas canvas) {

int w = getWidth(), h = getHeight();

paint.setStrokeWidth(2);

paint.setColor(Color.WHITE);

paint.setStyle(Paint.Style.FILL_AND_STROKE);

paint.setAntiAlias(true);

path = new Path();

path.setFillType(Path.FillType.EVEN_ODD);

path.moveTo(0,0);

path.lineTo(0,h);

path.lineTo(w,h);

path.close();

canvas.drawPath(path, paint);

}

}

网友答案:

Here i extended the RelativeLayout. (create a java file named cutLayout)

package com.blin.sharedelementtransition;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;

/**
 * Created by wituser on 12/12/16.
 */
public class cutLayout extends RelativeLayout {
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
    private Path path = new Path();

    public cutLayout(Context context) {
        super(context);
    }

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public cutLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    @Override
    protected void dispatchDraw(Canvas canvas) {
        int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        super.dispatchDraw(canvas);
        paint.setXfermode(pdMode);
        path.reset();
//        path.moveTo(0, getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()));
        path.moveTo(0, getHeight());
        path.lineTo(getWidth(), getHeight());
        path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()));

//  change value (50) to change the the slope.50 means 50dp.
//        path.lineTo(getWidth()/2, getHeight());


//        path.moveTo(0,0);                               //  (0,0)
//        path.lineTo(getPx(50),0);                       //  (50,0)
//        path.lineTo(0,getPx(50));                       //  (0,50)
//
//        path.lineTo(0,getHeight()-getPx(50));           //  (0,H-50)
//        path.lineTo(getPx(50),getHeight());             //  (50,H)
//        path.lineTo(0,getHeight());                     //  (0,H)
//
//        path.lineTo(0,0);                               //  (0,0)
//        path.lineTo(getWidth()-getPx(50),0);            //  (W-50,0)
//        path.lineTo(getWidth(),getPx(50));              //  (W,50)
//        path.lineTo(getWidth(),0);                      //  (W,0)
//
//        path.lineTo(getWidth(),getHeight()-getPx(50));  //  (W,H-50)
//        path.lineTo(getWidth()-getPx(50),getHeight());  //  (W-50,H)
//        path.lineTo(getWidth(),getHeight());            //  (W,H)
//        path.lineTo(getWidth(),0);                      //  (W,0)


        path.close();
        canvas.drawPath(path, paint);
        canvas.restoreToCount(saveCount);
        paint.setXfermode(null);
    }

    private float getPx(int i) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, i, getResources().getDisplayMetrics());
    }

}

and in xml, <your.package.name.cutLayout . cutLayout is the name of the javafile.

<com.blin.sharedelementtransition.cutLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_margin="8dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg2"
        android:layout_marginBottom="0.5dp"/>

</com.blin.sharedelementtransition.cutLayout>

相关阅读:
Top