android使用Path繪制出多邊形

2019-10-21 21:26:08

字體：大中小

供稿：網(wǎng)友

在講使用path繪制多邊形時(shí),講下Canvas的translate(),rotate()方法的使用,本博客中會(huì)使用這方面的知識(shí),先單獨(dú)講下,搞懂了這個(gè),下面講path繪制多邊形就簡(jiǎn)單的多,我們知道每次我們使用canvas.draw...()繪制什么圖形的時(shí)候,都是創(chuàng)建了一個(gè)新的圖層,如果不知道圖層是啥意思,就去看下我之前寫(xiě)的關(guān)于canvas基礎(chǔ),有講這方面的,其實(shí)你可以理解成每次新創(chuàng)建了一個(gè)activity,然后把這個(gè)activity壓入棧中,translate()是畫(huà)布平移,其實(shí)每次畫(huà)布還是同一個(gè)畫(huà)布,通過(guò)paint繪制的圖形都是在這同一個(gè)canvas上,但是繪制的內(nèi)容跟你是否使用了translate()有關(guān)系,下面通過(guò)簡(jiǎn)單的demo來(lái)演示下：

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

效果：

android,Path,多邊形

上面的紅點(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)行平移的,平移肯定是相對(duì)那個(gè)點(diǎn)進(jìn)行平移的,不人為的去設(shè)置畫(huà)布的顏色,默認(rèn)都是透明的,否則你draw...2次,上次繪制的內(nèi)容就被覆蓋了,文字太蒼白無(wú)力,就好像你對(duì)一個(gè)女孩說(shuō)一千篇我愛(ài)你,還不如說(shuō)你在杭州買(mǎi)了套房來(lái)的實(shí)際,就好像香港有一個(gè)電影中的臺(tái)詞是這么說(shuō)的,這是一個(gè)最好的時(shí)代,也是一個(gè)最壞的時(shí)代,好了廢話不多說(shuō),圖,我要圖!

android,Path,多邊形

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

第一種：

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

canvas.translate(-x,-y)

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

效果：

android,Path,多邊形

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

第二種：

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

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

效果：

android,Path,多邊形

第三種：

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

畫(huà)圖：

android,Path,多邊形

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

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

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

如圖分析：

android,Path,多邊形

現(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 畫(huà)布  * @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)容了 所以畫(huà)布就不恢復(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); }}

效果：

android,Path,多邊形