android使用Path绘制出多边形

程序员文章站 2022-03-08 17:14:47

在讲使用path绘制多边形时,讲下canvas的translate(),rotate()方法的使用,本博客中会使用这方面的知识,先单独讲下,搞懂了这个,下面讲path绘制多...

在讲使用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);
 }
}

效果：

android使用Path绘制出多边形

上面的红点是坐标点(100,100)的位置,为什么绘制的蓝色的文字是在坐标点(100,100)的位置呢?是因为你canvas使用了translate(100,100)也就是x,y坐标都平移了100px,这个是根据你当前的view的左上角坐标为原点进行平移的,平移肯定是相对那个点进行平移的,不人为的去设置画布的颜色,默认都是透明的,否则你draw...2次,上次绘制的内容就被覆盖了,文字太苍白无力,就好像你对一个女孩说一千篇我爱你,还不如说你在杭州买了套房来的实际,就好像香港有一个电影中的台词是这么说的,这是一个最好的时代,也是一个最坏的时代,好了废话不多说,图,我要图!

android使用Path绘制出多边形

关于如何恢复画布有三种情况就以平移例子来讲

第一种：

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

效果：

android使用Path绘制出多边形

你会发现绿色和蓝色是重叠了。

第二种：

配套使用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);
}

效果：

android使用Path绘制出多边形

第三种：

int count = canvas.save(canvas.matrix_save_flag);//这个看你是在canvas.draw...哪里调用了,就相当于保存画布
canvas.restoretocount(count);//恢复

画图：

android使用Path绘制出多边形

现在讲下画多边形,先确定下思路：

1:把这个多边形的外切圆画出来当做一个辅助的参考目标,

2:计算多个点的坐标然后连接成一条线

如图分析：

android使用Path绘制出多边形

现在根据这个思路把代码实现下：

代码如下：

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

效果：

android使用Path绘制出多边形