Canvas
canvas画布,可以自定义绘制一些图形,当需要高复杂度的控件时,无法避免的需要进行canvas的使用,如
- 颜色填充:drawColor
- 矩形:drawRect
- 圆形:drawCircle
- 圆角矩形:drawRoundRect
- 椭圆:drawOval
- 弧线或扇形:drawArc
- 点:drawPoint(可批量drawPoints)
- 线:drawLine(可批量drawLines)
- 自定义图形:drawPath(路径描述,这里面相关的还有很多路径方法,在之后的章节中再描述)
- 其他如文字和图片,可自行查阅使用
坐标和参考系
canvas的绘制方法大致如上述所示,在使用时会涉及到坐标和参考系
参考系中的原点是以控件使用时的左上角为参考原点
参考系总是相对于控件自身来说的,所以不同控件的参考坐标设置互相不干扰,意思就是里面怎么样,外面用的时候不影响。
一个组件初始化的时候,会先调用onMeasure()检测View组件及其子组件的大小,然后onSizeChange()当该组件的大小被改变时,再接着就是onDraw()当组件绘制内容时,所以在onDraw阶段可以获取到控件的长宽大小,来作为参考系的终点坐标。
Paint
paint画笔,处理一些画布共用的设置,画笔在使用前需要先New好,常用的几个方法如下:
- Paint.setStyle(Style style) 设置绘制模式
- Paint.setColor(int color) 设置颜色
- Paint.setStrokeWidth(float width) 设置线条宽度
- Paint.setTextSize(float textSize) 设置文字大小
- Paint.setAntiAlias(boolean aa) 设置抗锯齿开关
练习题
以上内容参考自HenCoder,大家也可点击链接查看博主的内容,写的很详尽靠谱,我只是做一个简单归纳,便于初学者有个概念,同时对自己要求高的,接下来可直接参照图片完成练习题,题目也来自大佬的github提供的,点到链接滑到最下面就可以clone了
HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础
你们可是自愿留下来的喔,不是我强迫你们的。
第一题:黄色
//这里先给出一个完整的类,后面只会给出onDraw里的代码内容
public class Practice1DrawColorView extends View {
public Practice1DrawColorView(Context context) {
super(context);
}
public Practice1DrawColorView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public Practice1DrawColorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint=new Paint();
canvas.drawColor(Color.YELLOW);
// 练习内容:使用 canvas.drawColor() 方法把 View 涂成黄色
// 黄色: Color.YELLOW
}
}
第二题:四个圆,这里其实我有个挺迷惑的地方,Style.STROKE状态下StrokeWidth会影响circle自身的半径radius大小,然后我用实心和stroke的情况对比了一下,50StrokeWidth和小25的radius相比,中间空心的大小差不多,那似乎是一种中心辐射增粗的效果,也就是说StrokeWidth不是修改半径来契合边框,而是在半径的基础上增大。
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint=new Paint();
paint.setAntiAlias(true);
canvas.drawCircle(300,200,150,paint);
paint.setColor(Color.BLUE);
canvas.drawCircle(300,550,150,paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
canvas.drawCircle(700,200,125,paint);
paint.setStrokeWidth(50);
canvas.drawCircle(700,550,150,paint);
// 练习内容:使用 canvas.drawCircle() 方法画圆
// 一共四个圆:1.实心圆 2.空心圆 3.蓝色实心圆 4.线宽为 20 的空心圆
}
第三题:矩形,似乎有点平白无奇。。。
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setAntiAlias(true);
int width = getWidth();
int height = getHeight();
//我希望它刚好在中间,来个正方形好了,250*250
Rect rect = new Rect(width/2-125,height/2-125,width/2+125,height/2+125);
canvas.drawRect(rect, paint);
// 练习内容:使用 canvas.drawRect() 方法画矩形
}
第四题:点,似乎越来越草率了呢
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(100);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoint(100,