IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Android图形处理-百变Paint

    summer发表于 2016-11-10 02:11:56
    love 0
    文章目录
    • 设置Mask效果


    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);

     

     

    来自:http://www.jianshu.com/p/be58a2f5687c

     





沪ICP备19023445号-2号
友情链接