自定义控件详解(四):Paint 画笔路径效果

Paint  画笔 ,即用来绘制图形的"笔"

前面我们知道了Paint的一些基本用法:

paint.setAntiAlias(true);//抗锯齿功能
paint.setColor(Color.RED);  //设置画笔颜色    
paint.setStyle(Style.FILL);//设置填充样式
paint.setStrokeWidth(10);//设置画笔宽度 ,单位px
paint.setShadowLayer(10, 15, 15, Color.GREEN);//设置阴影

不过我们会发现,这样画出的线条都是笔笔直直的,能满足需求,但是美观上并不好看。

这就需要使用到Paint类 更多的一些方法了 

首先,看下最简单设置的线条

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(50);

Path path = new Path();
path.moveTo(100,500);
path.lineTo(200,200);
path.lineTo(300,500);
//绘制一个红色,线条宽度50px 的折线
canvas.drawPath(path,paint);

一、线条路径样式 

public void setPathEffect(PathEffect effect);

  设置路径样式;取值类型是所有派生自PathEffect的子类

 从第二个到最后一个 ,每一个都表示一个样式,其中用的最多的是 CornerPathEffect--圆形拐角效果  ,DashPathEffect——虚线效果 

(1)、CornerPathEffect--圆形拐角效果

  new CornerPathEffect(float radius) // radius 表示弯曲的半径程度

Path path = new Path();
path.moveTo(100,500);
path.lineTo(200,200);
path.lineTo(300,500);
//绘制一个红色,线条宽度50px 的折线
paint.setPathEffect(new CornerPathEffect(5));
canvas.drawPath(path,paint);

 可以看到原来直线的折角 现在已经有一个弯曲程度了

 拓展:我们可以根据这个方法来进行曲线图的实现

 (2)、DashPathEffect——虚线效果 

public DashPathEffect(float intervals[], float phase)  
intervals[]:表示组成虚线的各个线段的长度;整条虚线就是由intervals[]中这些基本线段循环组成的。
phase:      开始绘制的偏移值

 注意: intervals[ ] 里面个数不限,但至少为2个。

     可以为单数个,也可以为双数个,如果为单数个,多出来的最后一个无效果

         双数个,表示一个实现长度,一个空线长度

     比如  new DashPathEffect(new float[]{30,10,20,10},10);

     那么每一段都分为4部分,先是30px的实线,再是10px的空心线,再是20px的实线,再是10px的空线

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
Path path = new Path();
path.moveTo(100,500);
path.lineTo(800,500);

paint.setPathEffect(new DashPathEffect(new float[]{30,10,20,10},10));
        canvas.drawPath(path,paint);

  至于其他的效果,大家可以自己尝试 。

二、ComposePathEffect与SumPathEffect 叠加路径效果

从英文上可以看出这两个方法是用来合并路径效果的,但既然是两个方法,就有相应的区别

  (1)、ComposePathEffect

    这种合并路径效果是 先将paint 设置成第二个参数的路径效果,然后在此基础上 在设置成第一个参数对应的路径效果

    我们给一个线条,设置圆形拐角路径 和 一个虚线路径看一下

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(3);
Path path = new Path();
path.moveTo(100,600);
path.lineTo(200,200);
path.lineTo(300,600);
//虚线路径
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{30, 10, 20, 10}, 0);
//圆角拐点路径
CornerPathEffect cornerPathEffect = new CornerPathEffect(10);
//合并后的路径
ComposePathEffect composePathEffect = new ComposePathEffect(dashPathEffect, cornerPathEffect);
//设置路径
paint.setPathEffect(composePathEffect);
canvas.drawPath(path,paint);

  (2)、SumPathEffect 

    这种合并路径效果是 分别将两个路径的效果叠加的显示出现

    我们给一个线条,设置圆形拐角路径 和 一个虚线路径看一下

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(3);
Path path = new Path();
path.moveTo(100,600);
path.lineTo(200,200);
path.lineTo(300,600);
//虚线路径
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{30, 10, 20, 10}, 0);
//圆角拐点路径
CornerPathEffect cornerPathEffect = new CornerPathEffect(50);
//合并后的路径
SumPathEffect sumPathEffect = new SumPathEffect(dashPathEffect,cornerPathEffect);
//设置路径
paint.setPathEffect(sumPathEffect);
canvas.drawPath(path,paint);

可以看出  一个虚线路径 和 一个 圆形拐角路径 叠加显示起来的效果

三、setStrokeCap(Paint.Cap cap)

  设置线帽样式,取值有Cap.ROUND(圆形线帽)、Cap.SQUARE(方形线帽)、Paint.Cap.BUTT(无线帽) 

  线冒,可以理解为一条线两个端点,设置线冒样式使线条两端不看起来不那么死板

  这里绘制3条不同 样式的直线 来看一下效果

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(50);

Path pathBUTT = new Path();
pathBUTT.moveTo(100,200);
pathBUTT.lineTo(600,200);
paint.setStrokeCap(Paint.Cap.BUTT);
canvas.drawPath(pathBUTT,paint);

Path pathSQUARE = new Path();
pathSQUARE.moveTo(100,400);
pathSQUARE.lineTo(600,400);
paint.setStrokeCap(Paint.Cap.SQUARE);
canvas.drawPath(pathSQUARE,paint);

Path pathROUND = new Path();
pathROUND.moveTo(100,600);
pathROUND.lineTo(600,600);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPath(pathROUND,paint);

四、setStrokeJoin(Paint.Join join)

  设置结合处效果取值:

1、Join.MITER(结合处为锐角)
2、Join.Round(结合处为圆弧)
3、Join.BEVEL(结合处为直线)

  举例:

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(30);
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);

Path pathROUND = new Path();
pathROUND.moveTo(100,300);
pathROUND.lineTo(600,300);
pathROUND.lineTo(150,100);
paint.setStrokeJoin(Paint.Join.ROUND);
canvas.drawPath(pathROUND,paint);

Path pathMITER = new Path();
pathMITER.moveTo(100,600);
pathMITER.lineTo(600,600);
pathMITER.lineTo(150,400);
paint.setColor(Color.GREEN);
paint.setStrokeJoin(Paint.Join.MITER);
canvas.drawPath(pathMITER,paint);

Path path = new Path();
path.moveTo(100,900);
path.lineTo(600,900);
path.lineTo(150,700);
paint.setColor(Color.BLUE);
paint.setStrokeJoin(Paint.Join.BEVEL);
canvas.drawPath(path,paint);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

CSS布局(三) 布局模型

布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) ...

3006
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

3426
来自专栏Android常用基础

自定义View(九)-View的工作原理- View的layout()和draw()

上一节我们将View的测量流程理的差不多了,这篇我们来看下View的剩下的2大流程layout(布局)和draw(绘制)。相对测量来说,布局与绘制就简单了许多,...

1102
来自专栏进击的君君的前端之路

CSS常见样式(一)

2423
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

4338
来自专栏Android先生

Flutter组件学习(一)—— Text组件

之前说会给大家一一讲解 Flutter 中的组件,今天咱们就从 Text 组件开始,无图言X,先上图:

1072
来自专栏钟绍威的专栏

怎么改变按钮的图标

按钮的图标一开始很难看 所以要改 改变按钮图标的方法: javax.swing.AbstractButton中的方法 setContentAreaF...

20410
来自专栏上善若水

018android初级篇之自定义圆形进度条

项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。

995
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

2646
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

751

扫码关注云+社区