2016-12-20 17 views
1

私は以下のようにイメージをカットするカスタムイメージビューを作成しようとしています。カスタムイメージビューを傾斜させる

enter image description here多くのソリューションを確認しましたが、私が見た最も近い答えはlinkです。しかし、それは反対側に傾いていて、それもコーナーからです。もう片方の斜めに傾けて、少し下から始めると、どうやってイメージをカットできますか?ここで

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

+0

試し 'path.moveTo(0,0); path.lineTo(0、h); path.lineTo(w、h-h/3); path.lineTo(w、0); path.close(); ' –

+0

ここでどの画像が「カット」されていますか?あなたは青い台形を意味しますか?もしあなたがカスタムビューを必要としないなら、カスタム[Drawable]が必要です。[this](http://stackoverflow.com/a/41211322/2252830) – pskink

答えて

1

私はRelativeLayoutを拡張しました。

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という名前のJavaファイルを作成します)。 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> 

enter image description here

+0

私は同じ結果を得ていません。カスタムレイアウトをxmlに追加し、そのレイアウトの背景としてイメージを追加しましたが、同じ結果は得られませんでした。だから、私は何か間違っているかもしれない?私に正しい方法を教えてもらえますか? @B Lin –

+0

更新された答えを確認してください。テスト済みで動作しています。それがうまく動作しない場合は、code.iを教えてください。 –

+0

ありがとうございます。あなたは私の一日を作った!今は正しく動作しています。 –

関連する問題