初识 PathEffect

Google Android PathEffect

始于初见

PathEffect is the base class for objects in the Paint that affect the geometry of a drawing primitive before it is transformed by the canvas' matrix and drawn.

PathEffect是绘画中的对象的基类,这些对象在通过画布的矩阵进行变换和绘制之前会影响图形图元的几何图形。这大致就是官方文档中给出的解释。PathEffect 是一个基类,它的子类如下图:


PathEffect 子类
1. DashPathEffect

构造方法

/**
     * The intervals array must contain an even number of entries (>=2), with
     * the even indices specifying the "on" intervals, and the odd indices
     * specifying the "off" intervals. phase is an offset into the intervals
     * array (mod the sum of all of the intervals). The intervals array
     * controls the length of the dashes. The paint's strokeWidth controls the
     * thickness of the dashes.
     * Note: this patheffect only affects drawing with the paint's style is set
     * to STROKE or FILL_AND_STROKE. It is ignored if the drawing is done with
     * style == FILL.
     * @param intervals array of ON and OFF distances
     * @param phase offset into the intervals array
     */
 public DashPathEffect(float intervals[], float phase)

注意事项

“ this patheffect only affects drawing with the paint's style is set ”
DashPathEffect 的效果只在画笔的 style 设置为 STROKE 或者 FILL_AND_STROKE 时生效。

参数说明

  • intervals

数组长度必须是偶数并且大于等于2,偶数下标对应值控制虚线路径中实线线段的长度,奇数下标对应值控制实线与实线之间的间隔长度。

  • phase

相位,控制虚线起始位置。UI呈现上分析 phase > 0 是将虚线路径向左或者向上移。反之 phase < 0,则向右或者向下移。

使用示例

  DashPathEffect dashPathEffect = new DashPathEffect(new float[]{60, 60}, 0);
  mPaint.setPathEffect(dashPathEffect);
  mPath.moveTo(0, mHeight / 10f);
  mPath.lineTo(mWidth, mHeight / 10f);
  canvas.drawPath(mPath, mPaint);

图例


DashPathEffect
2. PathDashPathEffect

构造方法

    /**
     * Dash the drawn path by stamping it with the specified shape. This only
     * applies to drawings when the paint's style is STROKE or STROKE_AND_FILL.
     * If the paint's style is FILL, then this effect is ignored. The paint's
     * strokeWidth does not affect the results.
     * @param shape The path to stamp along
     * @param advance spacing between each stamp of shape
     * @param phase amount to offset before the first shape is stamped
     * @param style how to transform the shape at each position as it is stamped
     */
    public PathDashPathEffect(Path shape, float advance, float phase, Style style)

注意事项

“ applies to drawings when the paint's style is STROKE or STROKE_AND_FILL. ”
PathDashPathEffect 的效果只在画笔的 style 设置为 STROKE 或者 FILL_AND_STROKE 时生效。

参数说明

  • shape

DashPathEffect 绘制的是虚线,是线段。PathDashPathEffect 绘制的几何图形,是一个 path 。

  • advance

步长,几何图形 shape 的间隔距离。

  • phase

和 DashPathEffect 中的概念一致。

  • style

几何图形shape的环绕方式

  1. TRANSLATE 平移,shape 环绕是只是平移。
  2. ROTATE 旋转,环绕时会有旋转。
  3. MORPH 变形,环绕时shape 会发生变形。

使用示例

  PathDashPathEffect dashPathEffect8 = new PathDashPathEffect(path8, 80, 0, PathDashPathEffect.Style.TRANSLATE);
  mPaint.setPathEffect(dashPathEffect8);
  mPath.addRoundRect(0f, mHeight * 8.2f / 10f, mWidth, mHeight * 9.8f / 10f,40f,40f, Path.Direction.CW);
  canvas.drawPath(mPath, mPaint);

图例


PathDashPathEffect
3. CornerPathEffectView

将几何图形的尖角处理成圆角

构造方法

/**
     * Transforms geometries that are drawn (either STROKE or FILL styles) by
     * replacing any sharp angles between line segments into rounded angles of
     * the specified radius.
     * @param radius Amount to round sharp angles between line segments.
     */
    public CornerPathEffect(float radius)

注意事项

“ either STROKE or FILL styles. ”
CornerPathEffectView 的效果在画笔的 style 设置为 STROKE 或者 FILL 都会生效。

参数说明

  • radius

尖角变成圆角时圆角的半径。

使用示例

  CornerPathEffect cornerPathEffect4 = new CornerPathEffect(80);
  mPaint.setPathEffect(cornerPathEffect4);
  mPath.reset();
  mPath.moveTo(mWidth / 8f, mHeight / 1.5f + 200);
  mPath.lineTo(mWidth / 3f, mHeight / 1.3f + 200);
  mPath.lineTo(mWidth - 40, mHeight / 1.8f + 200);
  canvas.drawPath(mPath, mPaint);

图例


CornerPathEffect
4. DiscretePathEffect

把规则图形的周边切成一定长度的线段,然后让它们随机离散拼接起来,变成不规则图形。

构造方法

/**
     * Chop the path into lines of segmentLength, randomly deviating from the
     * original path by deviation.
     */
    public DiscretePathEffect(float segmentLength, float deviation)

参数说明

  • segmentLength

切割的线段长度

  • deviation

离散的程度,值越大越不规则。

使用示例

  DiscretePathEffect discretePathEffect = new DiscretePathEffect(20f,10f);
  mPaint.setPathEffect(discretePathEffect);
  mPath.addRect(20f, 10f, mWidth - 20, mHeight / 10f, Path.Direction.CW);
  canvas.drawPath(mPath, mPaint);

图例


DiscretePathEffect
5. SumPathEffect

将两种 PathEffect 效果,按顺序依次应用到一个几何图像上。

构造方法

/**
     * Construct a PathEffect whose effect is to apply two effects, in sequence.
     * (e.g. first(path) + second(path))
     */
    public SumPathEffect(PathEffect first, PathEffect second)

图示


SumPathEffect
6. ComposePathEffectView

两个PathEffect,一个 outerpe,一个 innerpe,将 outerpe 和 innerpe 组成一个 PathEffect 应用到一个图像上。

构造方法

/**
     * Construct a PathEffect whose effect is to apply first the inner effect
     * and the the outer pathEffect (e.g. outer(inner(path))).
     */
    public ComposePathEffect(PathEffect outerpe, PathEffect innerpe)

图示


ComposePathEffect
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容