Android利用Canvas標(biāo)點(diǎn)畫線并加入位移動(dòng)畫(1)

更新時(shí)間：2022年09月19日 09:28:09 作者：不會(huì)安卓

這篇文章主要為大家詳細(xì)介紹了Android利用Canvas標(biāo)點(diǎn)畫線并加入位移動(dòng)畫的第一篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android利用Canvas標(biāo)點(diǎn)畫線，并加入位移動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

1.背景

最近由于公司業(yè)務(wù)需要，需要自己實(shí)現(xiàn)一個(gè)點(diǎn)畫線，移動(dòng)的需求，這自然就想到了利用Canvas進(jìn)行描點(diǎn)，畫線連線。

過程比較簡(jiǎn)單，查閱了網(wǎng)上文章，發(fā)現(xiàn)寫的都特別片面，很多人也會(huì)遇到類似需求，這里把整個(gè)實(shí)現(xiàn)過程講一下，并且在實(shí)現(xiàn)過程遇到的一些小坑講給大家。

先看效果圖

其實(shí)點(diǎn)擊檢索，小人可以按照畫好的路線進(jìn)行移動(dòng)。

具體代碼：

Canvas畫點(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)建畫筆
? ? ? ? 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畫點(diǎn)，然后再利用Canvas畫線，只要坐標(biāo)點(diǎn)相同，其實(shí)就可以達(dá)到連接標(biāo)記點(diǎn)畫線的效果。

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)畫沿線移動(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)的（就是畫線所經(jīng)過的點(diǎn)的位置信息）是一致的，小人才能沿著線移動(dòng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: