android使用Path绘制出多边形
作者:zhoushenxian 时间:2021-11-11 19:53:38
在讲使用path绘制多边形时,讲下Canvas的translate(),rotate()方法的使用,本博客中会使用这方面的知识,先单独讲下,搞懂了这个,下面讲path绘制多边形就简单的多,我们知道每次我们使用canvas.draw...()绘制什么图形的时候,都是创建了一个新的图层,如果不知道图层是啥意思,就去看下我之前写的关于canvas基础,有讲这方面的,其实你可以理解成每次新创建了一个activity,然后把这个activity压入栈中,translate()是画布平移,其实每次画布还是同一个画布,通过paint绘制的图形都是在这同一个canvas上,但是绘制的内容跟你是否使用了translate()有关系,下面通过简单的demo来演示下:
package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
* 绘制多边形
*/
public class PathmMultiView extends View {
private Paint paint;
public PathmMultiView(Context context) {
this(context,null);
}
public PathmMultiView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public PathmMultiView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setTextSize(24);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GREEN);
canvas.drawText("杭州是个美丽的城市",20,20,paint);
paint.setColor(Color.RED);
canvas.drawPoint(100,100,paint);
canvas.translate(100,100);
paint.setColor(Color.BLUE);
canvas.drawText("杭州是个美丽的城市",0,0,paint);
}
}
效果:
上面的红点是坐标点(100,100)的位置,为什么绘制的蓝色的文字是在坐标点(100,100)的位置呢?是因为你canvas使用了translate(100,100)也就是x,y坐标都平移了100px,这个是根据你当前的view的左上角坐标为原点进行平移的,平移肯定是相对那个点进行平移的,不人为的去设置画布的颜色,默认都是透明的,否则你draw...2次,上次绘制的内容就被覆盖了,文字太苍白无力,就好像你对一个女孩说一千篇我爱你,还不如说你在杭州买了套房来的实际,就好像香港有一个电影中的台词是这么说的,这是一个最好的时代,也是一个最坏的时代,好了废话不多说,图,我要图!
关于如何恢复画布有三种情况 就以平移例子来讲
第一种:
你x,y平移了多少后,我们知道x>0是向右平移,x<0是向左平移,那么恢复就很简单了
canvas.translate(-x,-y)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GREEN);
canvas.drawText("杭州是个美丽的城市",20,20,paint);
paint.setColor(Color.RED);
canvas.drawPoint(100,100,paint);
canvas.translate(100,100);
paint.setColor(Color.BLUE);
canvas.translate(-100,-100);
canvas.drawText("杭州是个美丽的城市",20,20,paint);
}
效果:
你会发现绿色和蓝色是重叠了。
第二种:
配套使用canvas.save() canvas.restore() ;save()是绑定画布,restore()是让画布恢复到最初的状态
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GREEN);
canvas.save();
canvas.drawText("杭州是个美丽的城市",20,20,paint);
paint.setColor(Color.RED);
canvas.drawPoint(100,100,paint);
canvas.translate(100,100);
paint.setColor(Color.BLUE);
canvas.restore();
canvas.drawText("杭州是个美丽的城市",20,20,paint);
}
效果:
第三种:
int count = canvas.save(Canvas.MATRIX_SAVE_FLAG);//这个看你是在canvas.draw...哪里调用了,就相当于保存画布
canvas.restoreToCount(count);//恢复
画图:
现在讲下画多边形,先确定下思路:
1:把这个多边形的外切圆画出来当做一个辅助的参考目标,
2:计算多个点的坐标然后连接成一条线
如图分析:
现在根据这个思路把代码实现下:
代码如下:
package smart.com.pathview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
/**
* 绘制多边形
*/
public class PathmMultiView extends View {
private Paint paint;
private Path path;
private int width,height;
public PathmMultiView(Context context) {
this(context,null);
}
public PathmMultiView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public PathmMultiView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
width = 400;
height = 400;
path = new Path();
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.STROKE);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawMultShape(canvas,6,width/2);
}
/**
* @param canvas 画布
* @param count 绘制几边形
* @param radius //外圆的半径
*/
public void drawMultShape(Canvas canvas,int count,float radius){
canvas.translate(radius,radius);//
if(count<5){
return;
}
for (int i=0;i<count;i++){
if (i==0){
path.moveTo(radius*cos(360/count*i),radius*sin(360/count*i));//绘制起点
}else{
path.lineTo(radius*cos(360/count*i),radius*sin(360/count*i));
}
}
paint.setStrokeWidth(3);
path.close();
paint.setColor(Color.GREEN);
canvas.drawPath(path,paint);
//因为我下面不再绘制内容了 所以画布就不恢复了
}
float sin(int num){
return (float) Math.sin(num*Math.PI/180);
}
float cos(int num){
return (float) Math.cos(num*Math.PI/180);
}
}
效果:
哪绘制正8变形呢?好说,直接
drawMultShape(canvas,6,width/2); 第二个参数就是几边形的改为8就ok了,试试看看效果:
就一句话,哦了。
还有一个问题就是如果所绘制的是多边形,但是好像形状不一样,怎么修改,这个时候只要旋转画布就行了,比如这张图片:
使用canvas.rotate(30);旋转30度后是这样的
当然你要在绘制这个图形之前对画布进行旋转,不然不起作用,网上有些五角星的效果,是怎么实现的呢?比如这样的效果:
这是正6变形所形成的星星形状,分析如图:
来源:https://blog.csdn.net/coderinchina/article/details/53509643
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android WebView实现网页滚动截图
![](https://img.aspxhome.com/file/2023/8/88098_0s.jpg)
SpringBoot如何使用RateLimiter通过AOP方式进行限流
![](https://img.aspxhome.com/file/2023/3/58583_0s.png)
Java AtomicInteger类的使用方法详解
详解Java的回调机制
![](https://img.aspxhome.com/file/2023/7/60657_0s.png)
c#系列 list详情
![](https://img.aspxhome.com/file/2023/5/111175_0s.png)
Android实现手势密码功能
![](https://img.aspxhome.com/file/2023/8/106058_0s.gif)
深入理解C#管道式编程
![](https://img.aspxhome.com/file/2023/3/96383_0s.png)
SpringBoot 导出数据生成excel文件返回方式
![](https://img.aspxhome.com/file/2023/0/92670_0s.jpg)
java之使用多线程代替for循环(解决主线程提前结束问题)
C语言中的各种文件读写方法小结
![](https://img.aspxhome.com/file/2023/3/117763_0s.jpg)
Android日期选择器实现年月日三级联动
![](https://img.aspxhome.com/file/2023/8/96748_0s.jpg)
c#源码的执行过程详解
![](https://img.aspxhome.com/file/2023/5/113725_0s.png)
C#隐式运行CMD命令(隐藏命令窗口)
![](https://img.aspxhome.com/file/2023/8/111218_0s.png)
C#编程自学之数据类型和变量一
![](https://img.aspxhome.com/file/2023/6/67056_0s.jpg)
Unity调用C++ dll实现打开双目相机
![](https://img.aspxhome.com/file/2023/0/77270_0s.png)
使用SpringBoot整合ssm项目的实例详解
![](https://img.aspxhome.com/file/2023/1/101991_0s.png)
Java最简洁数据结构之冒泡排序快速理解
![](https://img.aspxhome.com/file/2023/8/60278_0s.png)
SpringBoot导入导出数据实现方法详解
![](https://img.aspxhome.com/file/2023/1/113521_0s.png)
Java状态设计模式实现对象状态转换的优雅方式
![](https://img.aspxhome.com/file/2023/5/92565_0s.png)