Android Paint之PathEffect(路徑效果)

導航

Android Paint之顏色過濾器

Paint之shader(圖像渲染)

Paint之PathEffect(路徑效果)

Paint API之—— MaskFilter(面具)

android之繪圖工具類詳解

Paint API之—— Xfermode與PorterDuff全面詳解

Paint API之—— Xfermode與PorterDuff詳解(三)動畫效果

Paint枚舉、常量值、陰影效果粉怕、字體

本節(jié)引言:

本節(jié)繼續(xù)來學習Paint的API——PathEffect(路徑效果)横蜒,我們把畫筆的sytle設置為Stroke,可以 繪制一個個由線構成的圖形,而這些線偶爾會顯得單調(diào)是吧寿烟,比如你想把這些先改成虛線澈驼,又 或者想讓路徑的轉角變得圓滑等辛燥,那你就可以考慮使用這個PathEffect來實現(xiàn)了!

PathEffect和我們前面學的MaskFilter(面具)與ColorFilter(顏色 過濾器)一樣缝其,幾乎沒有可用的方法:

我們一般使用的是他的六個子類:

  • ComposePathEffect
  • CornerPathEffect
  • DashPathEffect
  • DiscretePathEffect
  • PathDashPathEffect
  • SumPathEffect

下面我們依次對他們的作用挎塌,以及構造方法進行分析!

1.子類作用與構造方法參數(shù)分析:

1)CornerPathEffect

CornerPathEffect(float radius)

將Path的各個連接線段之間的夾角用一種更平滑的方式連接内边,類似于圓弧與切線的效果榴都。 radius則是指定圓弧的半徑!

2)DashPathEffect

DashPathEffect(float[] intervals, float phase)

將Path的線段虛線化漠其,intervals為虛線的ON和OFF的數(shù)組嘴高,數(shù)組中元素數(shù)目需要 >= 2; 而phase則為繪制時的偏移量和屎!

3)DiscretePathEffect

DiscretePathEffect(float segmentLength, float deviation)

打散Path的線段拴驮,使得在原來路徑的基礎上發(fā)生打散效果。 segmentLength指定最大的段長柴信,deviation則為繪制時的偏離量套啤。

4)PathDashPathEffect

PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)
作用是使用Path圖形來填充當前的路徑,shape指的填充圖形随常,advance是每個圖形間的間隔潜沦, style則是該類自由的枚舉值,有三種情況:ROTATE绪氛、MORPHTRANSLATE唆鸡。
ROTATE情況下:線段連接處的圖形轉換以旋轉到與下一段移動方向相一致的角度進行連接
MORPH情況下:圖形會以發(fā)生拉伸或壓縮等變形的情況與下一段相連接
TRANSLATE情況下:圖形會以位置平移的方式與下一段相連接

5)ComposePathEffect

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)

作用是:組合效果,會首先將innerpe變現(xiàn)出來枣察,接著在innerpe的基礎上來增加outerpe效果争占!

6)SumPathEffect

SumPathEffect(PathEffect first, PathEffect second)

作用是:疊加效果,和ComposePathEffect不同询件,在表現(xiàn)時會將兩個參數(shù)的效果都獨立的表現(xiàn)出來燃乍, 接著將兩個效果簡單的重疊在一起顯示出來!

2.寫代碼來驗證各自的效果

多說無益宛琅,寫代碼最實際刻蟹,我們寫下代碼來試試這幾個子類各自所起的效果!
運行效果圖

實現(xiàn)代碼
我們自己來寫一個View嘿辟,里面的線移動的效果是phase增加造成的,每次 + 2随抠, 然后invalidate重繪而已蕉饼,所以別驚訝!PathEffectView.java:

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();
    }
}
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市唠叛,隨后出現(xiàn)的幾起案子只嚣,更是在濱河造成了極大的恐慌,老刑警劉巖艺沼,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件册舞,死亡現(xiàn)場離奇詭異,居然都是意外死亡障般,警方通過查閱死者的電腦和手機调鲸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挽荡,“玉大人藐石,你說我怎么就攤上這事⌒旆ィ” “怎么了贯钩?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長办素。 經(jīng)常有香客問我角雷,道長,這世上最難降的妖魔是什么性穿? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任勺三,我火速辦了婚禮,結果婚禮上需曾,老公的妹妹穿的比我還像新娘吗坚。我一直安慰自己,他們只是感情好呆万,可當我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布商源。 她就那樣靜靜地躺著,像睡著了一般谋减。 火紅的嫁衣襯著肌膚如雪牡彻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天出爹,我揣著相機與錄音庄吼,去河邊找鬼缎除。 笑死,一個胖子當著我的面吹牛总寻,可吹牛的內(nèi)容都是我干的器罐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼渐行,長吁一口氣:“原來是場噩夢啊……” “哼轰坊!你這毒婦竟也來了?” 一聲冷哼從身側響起殊轴,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤衰倦,失蹤者是張志新(化名)和其女友劉穎袒炉,沒想到半個月后旁理,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡我磁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年孽文,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夺艰。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡芋哭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出郁副,到底是詐尸還是另有隱情减牺,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布存谎,位于F島的核電站拔疚,受9級特大地震影響,放射性物質發(fā)生泄漏既荚。R本人自食惡果不足惜稚失,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望恰聘。 院中可真熱鬧句各,春花似錦、人聲如沸晴叨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兼蕊。三九已至初厚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間遍略,已是汗流浹背惧所。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工骤坐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人下愈。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓纽绍,卻偏偏與公主長得像,于是被迫代替她去往敵國和親势似。 傳聞我的和親對象是個殘疾皇子拌夏,可洞房花燭夜當晚...
    茶點故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容