Android图形处理-百变Paint


Paint的基本属性

Android图形处理-Canvas已经有了基本的使用,但是这节介绍几个好玩的属性

设置阴影和渐变

设置渐变

主要是给画笔(Paint)设置一个Shader

sp161108_143636

        Paint paint = new Paint();
        LinearGradient linearShader = new LinearGradient(0, 0, 100, 100,
                new int[]{Color.RED, Color.BLACK, Color.BLUE, Color.DKGRAY},
                null, Shader.TileMode.CLAMP);
        paint.setShader(linearShader);
        canvas.drawCircle(100,100,100,paint);

LinearGradient是Shader的子类。其他子类:

sp161108_142705

LinearGradient构造方法的含义:

    /** Create a shader that draws a linear gradient along a line.
        @param x0           The x-coordinate for the start of the gradient line
        @param y0           The y-coordinate for the start of the gradient line
        @param x1           The x-coordinate for the end of the gradient line
        @param y1           The y-coordinate for the end of the gradient line
        @param  colors      The colors to be distributed along the gradient line
        @param  positions   May be null. The relative positions [0..1] of
                            each corresponding color in the colors array. If this is null,
                            the the colors are distributed evenly along the gradient line.
        @param  tile        The Shader tiling mode
    */

前两个参数是开始点,接下来是结束点,colors是颜色的数组,positions是分布的模式,tile是渐变的模式比如可重复等

设置阴影

        paint.setShadowLayer(100,20,20,Color.RED);
        paint.setColor(getResources().getColor(R.color.colorAccent));
        canvas.drawCircle(100,100,50,paint);

核心是setShadowLayer

sp161108_144655

画笔效果

PathEffect

sp161108_145217

这个表示画笔的样式的基类

  • CornerPathEffect
        CornerPathEffect cornerPathEffect = new CornerPathEffect(40);
        paint.setPathEffect(cornerPathEffect);

sp161108_145557

构造参数表示拐角的半径

  • DiscretePathEffect
        DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);
        paint.setPathEffect(discretePathEffect);

第一个参数控制震动的频率,第二个参数控制震动的幅度

sp161108_145913

  • DashPathEffect
        DashPathEffect dashPathEffect = new DashPathEffect(new float[]{8.0f, 6.0f, 7.0f, 4.0f}, 0);
        paint.setPathEffect(dashPathEffect);

第一个参数是每个破折线(dash)的随机长度

sp161108_150434

  • PathDashPathEffect
        Path path1 = new Path();
        path1.addCircle(0,0,4, Path.Direction.CCW);

        PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);
        paint.setPathEffect(pathDashPathEffect);

这也是虚线但是这个虚线段是可以自己设置形状的

第一个参数是一个路径,但是这个路径要画出一个形状,第二个参数是两个虚线之间的距离

sp161108_150946

画出一个五角星,注意角度是18和36度:

        Path path1 = new Path();
        path1.moveTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
        path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 200), 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
        path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)-(float) Math.sin(Math.PI * 36 / 180) * 100,
                100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
        path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100),0);
        path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)+(float) Math.sin(Math.PI * 36/ 180) * 100,
                100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
        path1.lineTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);

sp161108_155132

在缩小之后把五角星应用到虚线中:
但是在等比例缩小10倍之后五角星没有正确绘制,发生变形了:
sp161108_155337

  • ComposePathEffect
DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);

PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);

        ComposePathEffect composePathEffect = new ComposePathEffect(discretePathEffect, pathDashPathEffect);
        paint.setPathEffect(composePathEffect);

创建一个组合的效果,是一个在外面一个在内侧

sp161108_155657

  • SumPathEffect
SumPathEffect sumPathEffect = new SumPathEffect(discretePathEffect, pathDashPathEffect);

和上面的不同这是一个复合效果

sp161108_155941

区别很明显,因为两个都是相同的效果“叠加”得到的

光棍节快到了

参考android制作闪动的红心

sp161108_162225

        int px = getMeasuredWidth() / 2;
        int py = getMeasuredHeight() / 2;
        // 路径的起始点
        path.moveTo(px, py - 5*5 );
        // 根据心形函数画图
        for (double i = 0; i <= 2 * Math.PI; i += 0.001) {
//          注意这里得到的xy不是真实的坐标要在进行减法
            float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));
            float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
            x *= 5;
            y *= 5;
            x = px - x;
            y = py - y;
            path.lineTo(x, y);
        }
        canvas.drawPath(path, paint);

DrawTextOnPath

注意在paint写文字的时候setStyle方法依旧有效,设置 paint.setStyle(Paint.Style.STROKE)就会产生空心字体的效果

sp161108_163150

注意在写字之前一定先要移动面板然后在写


        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(100, 100);
        path.lineTo(150, 190);
        path.lineTo(400, 240);
        canvas.drawPath(path,paint);
        canvas.save();
        canvas.translate(0, 50);
        canvas.drawTextOnPath("你好",path, 10, 10, paint);
        canvas.restore();

sp161108_163647

drawTextOnPath中两个float参数负责调整字体和path的偏移量

设置Mask效果

面具效果的根类是MaskFilter,它两个子类,也就是有两个效果,一个是模糊一个是“突出化”

sp161108_163858

设置模糊效果

在上面的代码中更改:

        BlurMaskFilter blurMaskFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
        paint.setMaskFilter(blurMaskFilter);

sp161109_092018

第一个参数是模糊半径第二个参数是模糊的样式

设置突出化的效果

设置突出化就是可以在一个3D的场景中设置光源、光源的距离等从而造成效果:

EmbossMaskFilter embossMaskFilter = new EmbossMaskFilter(new float[]{1.5f, 1.5f, 1.5f}, 1f, 10, 6.2f);

We're here to put a dent in the universe. Otherwise why else even be here?