自定义控件详解(四):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 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native布局详细指南

本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox...

3724
来自专栏Android常用基础

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

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

952
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

27810
来自专栏逸鹏说道

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

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

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

CSS常见样式(一)

1923
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

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

2226
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

983
来自专栏淡定的博客

css3的一些新属性总结

box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:

601
来自专栏菜鸟计划

CSS布局(三) 布局模型

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

2776
来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

733

扫码关注云+社区