Android ペイント API - PathEffect (パスエフェクト)

このセクションの概要:

このセクションでは、引き続き Paint —— PathEffect (パス効果) の API を学習します。ブラシのスタイルを Stroke に設定し、線で構成されたグラフィックを描画できます。この線が単調に見えることがありますよね。これらを使用するには、最初に点線に変更するか、パスの角を滑らかにしたい場合などに、この PathEffect を使用して実現することを検討できます。

公式 API ドキュメント: PathEffect ドキュメントを参照すると、この PathEffect が以前に学習した MaskFilter (マスク) および ColorFilter (カラー フィルター) と同じであり、使用可能なメソッドがほとんどないことがわかります。

通常、次の 6 つのサブクラスを使用します。

それぞれの機能や施工方法を順番に分析していきましょう!


1. サブクラス関数と構築方法パラメータの分析:


1)コーナーパス効果

CornerPathEffect(浮動半径)

円弧と接線の効果と同様に、パスの接続線セグメント間の角度をより滑らかな方法で接続します。radius は指定された円弧の半径です!


2)ダッシュパス効果

DashPathEffect(float[] 間隔、float フェーズ)

Path の線分を破線にし、interval は破線の ON と OFF の配列、配列の要素数は 2 以上である必要があり、phase は描画時のオフセットです。


3)離散パス効果

DiscretePathEffect(浮動小数点セグメント長、浮動小数点偏差)

パスの線分を分散させて、元のパスに基づいて崩壊効果が発生するようにします。セグメント長はセグメントの最大長を指定し、偏差は描画時の偏差を指定します。


4)パスダッシュパス効果

PathDashPathEffect(パス形状、フロートアドバンス、フロートフェーズ、PathDashPathEffect.Styleスタイル)

この機能は、Path グラフィックスを使用して現在のパスを埋めることです。shape は埋めるグラフィックスを指します。advanced は各グラフィックス間の間隔です。style はこのタイプの自由列挙値です。ROTATE 、MORPH および TRANSLATE の 3 つ状況あります

  • ROTATEの場合:線分の接続部分のグラフィック変形は、次の線分の移動方向と一致する角度に回転して接続されます。
  • MORPHの場合:グラフィックスは伸縮や圧縮などの変形により次のセグメントに接続されます。
  • TRANSLATE の場合: グラフィックスは位置変換によって次のセグメントに接続されます。

5)ComposePathEffect

ComposePathEffect(PathEffect の外側、PathEffect の内側)

その機能は、組み合わせ効果によって最初にインナーペが実現され、次にインナーペに基づいてアウターペの効果が増加します。


6)SumPathEffect

SumPathEffect(最初に PathEffect、2 番目に PathEffect)

その機能は、スーパーインポーズエフェクトはComposePathEffectとは異なり、演奏中に2つのパラメーターのエフェクトを独立して表示し、その後単純に2つのエフェクトを重ねて表示するというものです!


2. コードを記述してそれぞれの効果を検証する

これ以上言っても無駄です。コードを書くのが最も実用的です。コードを書き留めて、これらのサブクラスの効果を試してみましょう。

ランニング効果図

実装コード:

View を自分で書いてみよう、その中での線の動きの効果は、位相が毎回 +2 増加し、再描画が無効になることによって引き起こされるので、驚かないでください。PathEffectView.java :

/** 
 * 2015/10/30 0030 に Jay によって作成されました。 
 */ 
public class PathEffectView extends View { 

    private Paint mPaint; 
    プライベートパス mPath; 
    プライベートフロートフェーズ = 0; 
    private PathEffect[] 効果 = 新しい PathEffect[7]; 
    プライベート int[] カラー; 

    public PathEffectView(Context context) { 
        this(context, null); 
    public 

    PathEffectView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        初期化(); 
    public 

    PathEffectView(Context context, AttributeSet attrs, int defStyleAttr) { 
        super(context, attrs, defStyleAttr); 
    }
 
    //初化画笔
    private void init() { 
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //アンチエイリアス
        mPaint.setStyle(Paint.Style.STROKE); //ペイント スタイル: 中空
        mPaint.setStrokeWidth(5); //ストロークの太さ
        mPath = new Path(); 
        mPath.moveTo(0, 0); 
        for (int i = 1; i <= 15; i++) { 
            // 15 個の点を生成し、それらの座標をランダムに生成し、それらをパスに接続します
            mPath .lineTo (i * 40, (float) Math.random() * 100); 
        } 
        // 7 色を初期化
        color = new int[] { Color.RED, Color.BLUE, Color.GREEN, 
                Color.YELLOW, Color .BLACK, Color.MAGENTA, Color.CYAN }; 
    } 


    @Override 
    protected void onDraw(Canvas Canvas) {
        Canvas.drawColor(Color.WHITE); 
        //初期化その中路径效結果:
        効果[0] = null; // 無効果
        効果[1] = new CornerPathEffect(10); //CornerPathEffect
        効果[2] = new DiscretePathEffect(3.0f, 5.0f); //DiscretePathEffect
        効果[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase); //DashPathEffect
        パス p = new Path(); 
        p.addRect(0, 0, 8, 8, Path.Direction.CCW); 
        エフェクト[4] = 新しい PathDashPathEffect(p, 12, フェーズ, 
                PathDashPathEffect.Style.ROTATE); //PathDashPathEffect
        エフェクト[5] = new ComposePathEffect(エフェクト[2], エフェクト[4]); //ComposePathEffect 
        Effects[6] = new SumPathEffect(Effects[2], Effects[4]); // SumPathEffect 
        // キャンバスを (10,10) に移動し、描画を開始します
        Canvas.translate(10, 10); 
        // 7 つの異なるパス効果と 7 つの異なる色を使用してパスを描画します
        (int i = 0; i < Effects.length; i++) { 
            mPaint.setPathEffect(Effects[ i]); 
            mPaint.setColor(colors[i]); 
            Canvas.drawPath(mPath, mPaint); 
            Canvas.translate(0, 60); 
        } 
        // アニメーション効果を形成するためにフェーズ値を変更します
        Phase += 2; 
        validate() ; 
    } 
}

おすすめ

転載: blog.csdn.net/leyang0910/article/details/131775416