快捷導(dǎo)航

android使用Path繪制出多邊形

更新時(shí)間：2019年01月28日 14:24:24 作者：zhoushenxian

這篇文章主要為大家詳細(xì)介紹了android使用Path繪制出多邊形，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在講使用path繪制多邊形時(shí),講下Canvas的translate(),rotate()方法的使用,本博客中會(huì)使用這方面的知識,先單獨(dú)講下,搞懂了這個(gè),下面講path繪制多邊形就簡單的多,我們知道每次我們使用canvas.draw...()繪制什么圖形的時(shí)候,都是創(chuàng)建了一個(gè)新的圖層,如果不知道圖層是啥意思,就去看下我之前寫的關(guān)于canvas基礎(chǔ),有講這方面的,其實(shí)你可以理解成每次新創(chuàng)建了一個(gè)activity,然后把這個(gè)activity壓入棧中,translate()是畫布平移,其實(shí)每次畫布還是同一個(gè)畫布,通過paint繪制的圖形都是在這同一個(gè)canvas上,但是繪制的內(nèi)容跟你是否使用了translate()有關(guān)系,下面通過簡單的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("杭州是個(gè)美麗的城市",20,20,paint);
  paint.setColor(Color.RED);
  canvas.drawPoint(100,100,paint);
  canvas.translate(100,100);
  paint.setColor(Color.BLUE);
  canvas.drawText("杭州是個(gè)美麗的城市",0,0,paint);
 }
}

效果：

上面的紅點(diǎn)是坐標(biāo)點(diǎn)(100,100)的位置,為什么繪制的藍(lán)色的文字是在坐標(biāo)點(diǎn)(100,100)的位置呢?是因?yàn)槟鉩anvas使用了translate(100,100)也就是x,y坐標(biāo)都平移了100px,這個(gè)是根據(jù)你當(dāng)前的view的左上角坐標(biāo)為原點(diǎn)進(jìn)行平移的,平移肯定是相對那個(gè)點(diǎn)進(jìn)行平移的,不人為的去設(shè)置畫布的顏色,默認(rèn)都是透明的,否則你draw...2次,上次繪制的內(nèi)容就被覆蓋了,文字太蒼白無力,就好像你對一個(gè)女孩說一千篇我愛你,還不如說你在杭州買了套房來的實(shí)際,就好像香港有一個(gè)電影中的臺(tái)詞是這么說的,這是一個(gè)最好的時(shí)代,也是一個(gè)最壞的時(shí)代,好了廢話不多說,圖,我要圖!

關(guān)于如何恢復(fù)畫布有三種情況就以平移例子來講

第一種：

你x,y平移了多少后,我們知道x>0是向右平移,x<0是向左平移,那么恢復(fù)就很簡單了

canvas.translate(-x,-y)

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 paint.setColor(Color.GREEN);
 canvas.drawText("杭州是個(gè)美麗的城市",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("杭州是個(gè)美麗的城市",20,20,paint);
}

效果：

你會(huì)發(fā)現(xiàn)綠色和藍(lán)色是重疊了。

第二種：

配套使用canvas.save() canvas.restore() ;save()是綁定畫布,restore()是讓畫布恢復(fù)到最初的狀態(tài)

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 paint.setColor(Color.GREEN);
 canvas.save();
 canvas.drawText("杭州是個(gè)美麗的城市",20,20,paint);
 paint.setColor(Color.RED);
 canvas.drawPoint(100,100,paint);
 canvas.translate(100,100);
 paint.setColor(Color.BLUE);
 canvas.restore();
 canvas.drawText("杭州是個(gè)美麗的城市",20,20,paint);
}

效果：

第三種：

int count = canvas.save(Canvas.MATRIX_SAVE_FLAG);//這個(gè)看你是在canvas.draw...哪里調(diào)用了,就相當(dāng)于保存畫布
canvas.restoreToCount(count);//恢復(fù)

畫圖：

現(xiàn)在講下畫多邊形,先確定下思路：

1:把這個(gè)多邊形的外切圓畫出來當(dāng)做一個(gè)輔助的參考目標(biāo),

2:計(jì)算多個(gè)點(diǎn)的坐標(biāo)然后連接成一條線

如圖分析：

現(xiàn)在根據(jù)這個(gè)思路把代碼實(shí)現(xiàn)下：

代碼如下：

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));//繪制起點(diǎn)
   }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);
  //因?yàn)槲蚁旅娌辉倮L制內(nèi)容了 所以畫布就不恢復(fù)了
 }
 float sin(int num){
  return (float) Math.sin(num*Math.PI/180);
 }
 float cos(int num){
  return (float) Math.cos(num*Math.PI/180);
 }
}

效果：