美文网首页Android
初识 PathEffect

初识 PathEffect

作者: dboy_sl | 来源:发表于2021-11-05 19:10 被阅读0次

    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

    相关文章

      网友评论

        本文标题:初识 PathEffect

        本文链接:https://www.haomeiwen.com/subject/iurrzltx.html