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


このセクションの紹介:

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

公式 API ドキュメント: PathEffect ドキュメントを見てみると、この PathEffect と、先ほど学習した MaskFilter (マスク) および ColorFilter (カラー) が見つかります。 Filter)、使用可能なメソッドはほとんどありません:

1.png

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

以下では、それらの機能と構築方法を順番に分析します。


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


1) CornerPathEffect

CornerPathEffect(float radius)

エフェクトと同様に、Path Connection メソッドの接続線セグメント間のより滑らかな角度を使用します。円弧と接線の関係。 Radius は円弧の半径を指定します。


2)DashPathEffect

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

Path 間隔の線分を ON と OFF の点線の配列にします。 >= 2 である必要があります。 そして位相は描画時のオフセットです!


3) DiscretePathEffect

DiscretePathEffect(floatセグメント長、浮動偏差)

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


4)PathDashPathEffect

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

この機能は、パス グラフィックを使用して現在のパスを塗りつぶすことです。形状は塗りつぶされたグラフィックを指し、アドバンスは各グラフィック間の間隔です。 Style はこのタイプの自由列挙値で、ROTATEMORPHTRANSLATEの 3 つのケースがあります。

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

5) ComposePathEffect

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

機能は: 組み合わせ効果、最初にインナーペを実現し、次にインナーペに基づいてアウターペ効果を追加します。


6)SumPathEffect

SumPathEffect(1番目にPathEffect、2番目にPathEffect)

機能は、ComposePathEffectとは異なり、2つのパラメータのエフェクトが独立して表示されます。 あとは2つのエフェクトを重ねて表示するだけ!


2. コードを書いてそれぞれの効果を確認します

コードを書いて、それぞれのサブカテゴリの効果を試してみましょう。

レンダリングの実行:

2.gif

実装コード:

内部のライン移動の効果は、フェーズが増加するたびに + 2 発生します。 その後、再描画のみを無効にするので、驚かないでください。 PathEffectView.java:

/**
 * Created by Jay on 2015/10/30 0030.
 */
public class PathEffectView extends View {

    private Paint mPaint;
    private Path mPath;
    private float phase = 0;
    private PathEffect[] effects = new PathEffect[7];
    private int[] colors;

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

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

    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个点,随机生成它们的坐标,并将它们连成一条Path
            mPath.lineTo(i * 40, (float) Math.random() * 100);
        }
        // 初始化7个颜色
        colors = 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);
        //初始化其中路径效果:
        effects[0] = null;                                    //无效果
        effects[1] = new CornerPathEffect(10);                //CornerPathEffect
        effects[2] = new DiscretePathEffect(3.0f, 5.0f);      //DiscretePathEffect
        effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase);   //DashPathEffect
        Path p = new Path();
        p.addRect(0, 0, 8, 8, Path.Direction.CCW);
        effects[4] = new PathDashPathEffect(p, 12, phase,
                PathDashPathEffect.Style.ROTATE);             //PathDashPathEffect
        effects[5] = new ComposePathEffect(effects[2], effects[4]);    //ComposePathEffect
        effects[6] = new SumPathEffect(effects[2], effects[4]);   //SumPathEffect
        // 将画布移动到(10,10)处开始绘制
        canvas.translate(10, 10);
        // 依次使用7中不同的路径效果、7中不同的颜色来绘制路径
        for (int i = 0; i < effects.length; i++) {
            mPaint.setPathEffect(effects[i]);
            mPaint.setColor(colors[i]);
            canvas.drawPath(mPath, mPaint);
            canvas.translate(0, 60);
        }
        // 改变phase值,形成动画效果
        phase += 2;
        invalidate();
    }
}

さて、コードのコメントは非常に明確なので、ここでは詳しく説明しません~


3. このセクションのサンプル コードをダウンロードします:

PathEffectDemo.zip


このセクションの概要

このセクションでは、PathEffect の 6 つのサブクラスの関数を紹介するだけです。setPathEffect を呼び出すだけです。 このメソッドは Paint オブジェクトに適用されます。とても簡単です~まあ、以上です、ありがとう~