Android利用Canvas標(biāo)點(diǎn)畫(huà)線并加入位移動(dòng)畫(huà)(1)
本文實(shí)例為大家分享了Android利用Canvas標(biāo)點(diǎn)畫(huà)線,并加入位移動(dòng)畫(huà)的具體代碼,供大家參考,具體內(nèi)容如下
1.背景
最近由于公司業(yè)務(wù)需要,需要自己實(shí)現(xiàn)一個(gè)點(diǎn)畫(huà)線,移動(dòng)的需求,這自然就想到了利用Canvas進(jìn)行描點(diǎn),畫(huà)線連線。
過(guò)程比較簡(jiǎn)單,查閱了網(wǎng)上文章,發(fā)現(xiàn)寫(xiě)的都特別片面,很多人也會(huì)遇到類(lèi)似需求,這里把整個(gè)實(shí)現(xiàn)過(guò)程講一下,并且在實(shí)現(xiàn)過(guò)程遇到的一些小坑講給大家。
先看效果圖
其實(shí)點(diǎn)擊檢索,小人可以按照畫(huà)好的路線進(jìn)行移動(dòng)。
具體代碼:
Canvas畫(huà)點(diǎn)連線
class DrawView extends View { ? ? ? private Boolean bool=false; ? ? private String num; ? ? ? public DrawView(Context context) { ? ? ? ? super(context); ? ? } ? ? public void setBool(Boolean isdraw,String number){ ? ? ? ? this.bool=isdraw; ? ? ? ? this.num=number; ? ? ? ? Log.e("leo","bool:"+bool); ? ? } ? ? ? public void DrawLines(Canvas canvas){ ? ? ? ? Log.e("leo","yayyaya"+bool); ? ? ? ? Paint mPaint3 = new Paint(); ? ? ? ? mPaint3.setAntiAlias(true); ? ? ? ? mPaint3.setColor(Color.GREEN); ? ? ? ? mPaint3.setTextSize(36); ? ? ? ? mPaint3.setStrokeWidth(20); ? ? ? ? float[] points3=new float[]{450,100,480,350,480,350,330,500,330,500,510,650,510,650,780,800,780,800,450,900,450,900,450,1200,450,1200,550,1400,550,1400,600,1500}; ? ? ? ? canvas.drawLines(points3,mPaint3); ? ? } ? ? ? @Override ? ? public void onDraw(Canvas canvas) { ? ? ? ? super.onDraw(canvas); ? ? ? ? /* ? ? ? ? ?* 方法 說(shuō)明 drawRect 繪制矩形 drawCircle 繪制圓形 drawOval 繪制橢圓 drawPath 繪制任意多邊形 ? ? ? ? ?* drawLine 繪制直線 drawPoin 繪制點(diǎn) ? ? ? ? ?*/ ? ? ? ? // 創(chuàng)建畫(huà)筆 ? ? ? ? Paint mPaint = new Paint(); ? ? ? ? mPaint.setStrokeWidth(20); ? ? ? ? mPaint.setColor(Color.RED);// 設(shè)置紅色 ? ? ? ? //繪制Cap為BUTT的點(diǎn) ? ? ? ? Paint mPaint2 = new Paint(); ? ? ? ? mPaint2.setStrokeWidth(40); ? ? ? ? mPaint2.setColor(Color.BLUE);// 設(shè)置紅色 ? ? ? ? mPaint2.setStrokeCap(Paint.Cap.ROUND); ? ? ? ? ? Paint mPaint3 = new Paint(); ? ? ? ? mPaint3.setAntiAlias(true); ? ? ? ? mPaint3.setColor(Color.GREEN); ? ? ? ? mPaint3.setTextSize(36); ? ? ? ? mPaint3.setStrokeWidth(20); ? ? ? ? canvas.drawPoints(new float[]{20,100,100,350,150,430,200,510,250,560,350,650,550,730,670,890,750,1000}, mPaint2); ? ? ? ? canvas.drawPoints(new float[]{170,100,170,200,170,400,170,510,170,730,170,850}, mPaint2); ? ? ? ? canvas.drawPoints(new float[]{450,100,480,350,330,500,510,650,780,800,450,900,450,1200,550,1400,600,1500}, mPaint2); ? ? ? ? canvas.drawPoints(new float[]{140,1200,230,1250,370,1140,500,1220,570,1310,680,1280,750,1300,850,1260}, mPaint2); ? ? ? ? mPaint.setAntiAlias(true); ? ? ? ? mPaint.setColor(Color.RED); ? ? ? ? mPaint.setTextSize(36); ? ? ? ? float[] points=new float[]{20,100,100,350,100,350,150,430,150,430,200,510,200,510,250,560,250,560,350,650,350,650,550,730,550,730,670,890,670,890,750,1000};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? float[] points2=new float[]{170,100,170,200,170,200,170,400,170,400,170,510,170,510,170,730,170,730,170,850};//至少4個(gè)值,即能夠繪制一條直線 ? ? ?// ? 至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? canvas.drawLines(points,mPaint); ? ? ? ? canvas.drawLines(points2,mPaint); ? ? ? ? ? float[] points4=new float[]{140,1200,230,1250,230,1250,370,1140,370,1140,500,1220,500,1220,570,1310,570,1310,680,1280,680,1280,750,1300,750,1300,850,1260};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? canvas.drawLines(points4,mPaint); ? ? ? ? ? float[] points3=new float[]{450,100,480,350,480,350,330,500,330,500,510,650,510,650,780,800,780,800,450,900,450,900,450,1200,450,1200,550,1400,550,1400,600,1500}; ? ? ? ? canvas.drawLines(points3,mPaint); ? ? ? ? ? if (bool==true){ ? ? ? ? ? ? if (num.equals("1")){ ? ? ? ? ? ? ? ? DrawLines(canvas); ? ? ? ? ? ? } ? ? ? ? ? ? else ?if (num.equals("2")){ ? ? ? ? ? ?// ? ? float[] points=new float[]{20,100,100,350,100,350,150,430,150,430,200,510,200,510,250,560,250,560,350,650,350,650,550,730,550,730,670,890,670,890,750,1000};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? ? ? ? ? canvas.drawLines(points2,mPaint3); ? ? ? ? ? ? } ? ? ? ? ? ? else if (num.equals("3")){ ? ? ? ? ? ? ? // ?float[] points2=new float[]{170,100,170,200,170,200,170,400,170,400,170,510,170,510,170,730,170,730,170,850};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? ? ? ? ? canvas.drawLines(points,mPaint3); ? ? ? ? ? ? }else if (num.equals("4")){ ? ? ? ? ? ? ? // ?float[] points4=new float[]{140,1200,230,1250,230,1250,370,1140,370,1140,500,1220,500,1220,570,1310,570,1310,680,1280,680,1280,750,1300,750,1300,850,1260};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? ? ? ? ? canvas.drawLines(points4,mPaint3); ? ? ? ? ? ? } ? ? ? ? } ? ? } }
簡(jiǎn)單說(shuō)明一下,就是自定義View,繼承View,利用Canvas畫(huà)點(diǎn),然后再利用Canvas畫(huà)線,只要坐標(biāo)點(diǎn)相同,其實(shí)就可以達(dá)到連接標(biāo)記點(diǎn)畫(huà)線的效果。
MainActivity進(jìn)行調(diào)用
public class MainActivity extends AppCompatActivity { ? ? ? private EditText mEdiet; ? ? private Button ?mButton; ? ? private ImageView mtv; ? ? ObjectAnimator ?objectAnimatorX,objectAnimatorY; ? ? ? @Override ? ? protected void onCreate(Bundle savedInstanceState) { ? ? ? ? super.onCreate(savedInstanceState); ? ? ? ? setContentView(R.layout.activity_main); ? ? ? ? initView(); ? ? } ? ? ? private void initView() { ? ? ? ? RelativeLayout layout=(RelativeLayout) findViewById(R.id.root); ? ? ? ? ?DrawView views=new DrawView(this); ? ? ? ? views.setMinimumHeight(500); ? ? ? ? views.setMinimumWidth(300); ? ? ? ? //通知view組件重繪 ? ? ? ? views.invalidate(); ? ? ? ? layout.addView(views); ? }
利用平移動(dòng)畫(huà)沿線移動(dòng)
mEdiet=findViewById(R.id.qd); mButton=findViewById(R.id.qd2); mtv=findViewById(R.id.dw); mButton.setOnClickListener(new View.OnClickListener() { ? ? ? ? ? ? @Override ? ? ? ? ? ? public void onClick(View view) { ? ? ? ? ? ? ? ? String number=mEdiet.getText().toString(); ? ? ? ? ? ? ? ? Log.e("leo","數(shù)字:"+number); ? ? ? ? ? ? ? ? if (number.equals("1")){ ? ? ? ? ? ? ? ? ? ? float [] x= {450,480,330, 510,780,450,450,550,600}; ? ? ? ? ? ? ? ? ? ? float [] y= {100,350,500,650,800,900,1200,1400,1500}; ? ? ? ? ? ? ? ? ? ? startPopsAnimTrans(mtv,x,y); ? ? ? ? ? ? ? ? ? ? // ?float[] points2=new float[]{170,100,170,200,170,200,170,400,170,400,170,510,170,510,170,730,170,730,170,850};//至少4個(gè)值,即能夠繪制一條直線 ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? else if (number.equals("2")){ ? ? ? ? ? ? ? ? ? ? Log.e("leo","aiaiiai:"); ? ? ? ? ? ? ? ? ? ? float [] x= {170,170,170, 170,170,170}; ? ? ? ? ? ? ? ? ? ? float [] y= {100,200,400,510,730,850}; ? ? ? ? ? ? ? ? ? ? startPopsAnimTrans(mtv,x,y); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ?// ? startPopsAnimTrans(mtv,x,y); ? ? ? ? ? ? ? ? TimerTask task = new TimerTask() { ? ? ? ? ? ? ? ? ? ? @Override ? ? ? ? ? ? ? ? ? ? public void run() { ? ? ? ? ? ? ? ? ? ? ? ? views.setBool(true,number); ? ? ? ? ? ? ? ? ? ? ? ? views.invalidate(); ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }; ? ? ? ? ? ? ? ? Timer timer = new Timer(); ? ? ? ? ? ? ? ? timer.schedule(task, 18000); ? ? ? ? ? ? } ? ? ? ? }); // ? ? ? ?mtv.setOnClickListener(new View.OnClickListener() { // ? ? ? ? ? ?@Override // ? ? ? ? ? ?public void onClick(View view) { // ? ? ? ? ? ? ? ?startPopsAnimTrans(mtv); // ? ? ? ? ? ?} // ? ? ? ?}); ? ? } ? ? private void startPopsAnimTrans(ImageView b,float [] x,float [] y){ ? ? ? // ?if(objectAnimatorX == null){ ? ? ? ? ? ? Log.e("leo","執(zhí)行否:"+x.length); ? ? ? ? ? // ?float [] x= {450,480,330, 510,780,450,450,550,600}; ? ? ? ? ? // ?float [] y= {100,350,500,650,800,900,1200,1400,1500}; ? ? ? ? ? ? objectAnimatorX = ObjectAnimator.ofFloat(b,"translationX", x); ? ? ? ? ? ? objectAnimatorX.setDuration(20000); ? ? ? ? ? ? objectAnimatorY = ObjectAnimator.ofFloat(b,"translationY", y); ? ? ? ? ? ? objectAnimatorY.setDuration(20000); ? ? ?// ? } ? ? ? ? objectAnimatorX.start(); ? ? ? ? objectAnimatorY.start(); ? ? }
這里的Float數(shù)組肯定是與那些標(biāo)記點(diǎn)的(就是畫(huà)線所經(jīng)過(guò)的點(diǎn)的位置信息)是一致的,小人才能沿著線移動(dòng)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android中實(shí)現(xiàn)在ImageView上隨意畫(huà)線涂鴉的方法
- Android補(bǔ)間動(dòng)畫(huà)基本使用(位移、縮放、旋轉(zhuǎn)、透明)
- Android動(dòng)畫(huà)之漸變動(dòng)畫(huà)(Tween Animation)詳解 (漸變、縮放、位移、旋轉(zhuǎn))
- Android開(kāi)發(fā)之圖形圖像與動(dòng)畫(huà)(二)Animation實(shí)現(xiàn)圖像的漸變/縮放/位移/旋轉(zhuǎn)
- Android利用Canvas標(biāo)點(diǎn)畫(huà)線并加入位移動(dòng)畫(huà)(2)
相關(guān)文章
Android RecyclerView 復(fù)用錯(cuò)亂通用解法詳解
本篇文章主要介紹了Android RecyclerView 復(fù)用錯(cuò)亂通用解法詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08詳解Android中App的啟動(dòng)界面Splash的編寫(xiě)方法
這篇文章主要介紹了Android中App的啟動(dòng)界面Splash的編寫(xiě)方法,需要的朋友可以參考下2016-02-02Android編程實(shí)現(xiàn)自定義title功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)自定義title功能,結(jié)合具體實(shí)例形式分析了Android自定義title的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03Android項(xiàng)目中g(shù)radle的執(zhí)行流程
大家好,本篇文章主要講的是Android項(xiàng)目中g(shù)radle的執(zhí)行流程,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-01-01Android實(shí)現(xiàn)代碼畫(huà)虛線邊框背景效果
可能之前遇到這樣的需求大家都會(huì)想到用圖片背景來(lái)解決,下面這篇文章將給大家介紹Android如何利用代碼畫(huà)虛線邊框背景的效果,有需要的朋友們可以參考借鑒,下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12Android開(kāi)發(fā)EditText禁止輸入監(jiān)聽(tīng)及InputFilter字符過(guò)濾
這篇文章主要為大家介紹了Android開(kāi)發(fā)EditText禁止輸入監(jiān)聽(tīng)及InputFilter字符過(guò)濾示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06Android提高之多方向抽屜實(shí)現(xiàn)方法
這篇文章主要介紹了Android的多方向抽屜實(shí)現(xiàn)方法,有一定的實(shí)用價(jià)值,需要的朋友可以參考下2014-08-08Android入門(mén)之PopupWindow用法實(shí)例解析
這篇文章主要介紹了Android入門(mén)之PopupWindow用法,對(duì)于Android初學(xué)者來(lái)說(shuō)有一定的學(xué)習(xí)借鑒價(jià)值,需要的朋友可以參考下2014-08-08