安卓绘制图形讲解和实例_安卓绘制view 像素单位

一.掌握基本绘制的三个重点：

图形的位置、尺寸、角度的计算
Xfermode 的使用
文字的位置和尺寸计算

二 .绘制的基本要素：

1.重写 onDraw()

2.使用 Canvas 来绘制

3.使用 Paint 来配置

4.坐标系
	坐标系的原点为view左上角。

5.尺寸单位是像素，而不是 dp。 dp都是做适配的
	
绘制常用的api
1
2
3
4
5
6
7
8
9
10
11
12

安卓新建一个项目。 新建一个类，做自定义view
接下来，实例画一个仪表盘

public class CircleView extends View {
    Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
    private float Angle= 120;
    private float Angle_sweep= 240;
    private float R1= 320;
    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

    }
    {
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画一个仪表盘
//        1.画一个弧形
        canvas.drawArc(getWidth()/2- R1,getHeight()/2-R1,getWidth()/2+R1,getHeight()/2+R1,Angle/2+90,Angle_sweep,false,paint );

    }
}




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

canvas.drawArc(getWidth()/2- R1,getHeight()/2-R1,getWidth()/2+R1,getHeight()/2+R1,Angle/2+90,Angle_sweep,false,paint );
首先画一个弧形，参数3是矩形right距离y轴距离，4为bottom距离0轴距离

2，接下来画表针，这个比较复杂，不能一个个来画

现在每一个刻度都是切向的。正好我们可以设置画笔为虚线，画一条弧形

package com.blithelee.mvvmactivity.DrawView;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import com.blithelee.mvvmactivity.R;


public class CircleView extends View {
    Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
    private float Angle= 120;
    private float Angle_sweep= 240;
    private float R1= 320;
    private Path dash=new Path();
    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

    }
    {
        //自定义dash形状  虚线dash的形状  默认就是- - - - - o我们把路径添加一个矩形，所以这个画笔画出来就是一个个的小矩形
        dash.addRect(0,0,5,3,Path.Direction.CW);
        //给画笔设置上一个个的小矩形效果的dash路径
        paint.setPathEffect(new PathDashPathEffect(dash,50,0,PathDashPathEffect.Style.ROTATE));
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画一个仪表盘
//        1.画一个弧形
        canvas.drawArc(getWidth()/2- R1,getHeight()/2-R1,getWidth()/2+R1,getHeight()/2+R1,Angle/2+90,Angle_sweep,false,paint );
        //canvas.drawLine(getWidth()/2,getHeight()/2,);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

效果如图：
矩形点太小了，我们是打算做刻度的，我们把dash矩形拉长，注意拉对方向

dash.addRect(0,0,5,30,Path.Direction.CW);
1

3—>30 拉长10倍，运行看效果

可以了，，刻度有了，但是我们还要设置一个下画笔，用同样的方法，划一圈轮廓


可以，后边多了一点，把dash的间隔按照弧长计算一下即可。

先计算一下弧长，用PathMeasure。

  //把弧的路径新建一下，用于测量弧长。
        Path arc=new Path();
        arc.addArc(getWidth()/2- R1,getHeight()/2-R1,getWidth()/2+R1,getHeight()/2+R1,Angle/2+90,Angle_sweep);
        PathMeasure pathMeasure=new PathMeasure(arc,false);
        arc_length= pathMeasure.getLength();
1
2
3
4
5

 //把弧的路径新建一下，用于测量弧长。
        Path arc=new Path();
        arc.addArc(getWidth()/2- R1,getHeight()/2-R1,getWidth()/2+R1,getHeight()/2+R1,Angle/2+90,Angle_sweep);
        PathMeasure pathMeasure=new PathMeasure(arc,false);
        arc_length= pathMeasure.getLength();
        //为了方便就划分24个
//        每个刻度间隔 arc_length/24
1
2
3
4
5
6
7

需要把线段刻度厚度减去，这里不算了。
下边画指针，找原点。画三角函数