Question

我试图制作一个自定义的图像视图，它会像下面一样剪切图像。

我检查了很多解决方案，但我看到的最接近的答案是link。但它倾斜到对面，而且从角落也是如此。如何用其他侧面倾斜切割图像并从下面开始。

＆＃13;

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

＆＃13;

Answer 1

这里我扩展了RelativeLayout。（创建一个名为cutLayout的java文件）

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

}

和xml，<your.package.name.cutLayout。 cutLayout是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>

倾斜自定义imageview

1 个答案: