android UI——2D绘图绘制几何图形

时间:2022-05-26 11:12:09

如果在看这篇博文的程序员对于2d绘制的基础和细节不够了解的话,建议先看看我的另一篇博客:android UI——2D绘图中应该注意的那些坑

想要绘制图形,必不可少的需要获得Canvas实例。
不管是自定义view还是bitmap,都需要Canvas,Paint和Path来实现绘制。

//使用canvas绘图
    private void initDraw(Canvas canvas) {
        //画布移动到具体的坐标(x,y)位置上,这里指左上角的初始位置
        canvas.translate(10, 10);
        //画布使用白色填充
        canvas.drawColor(Color.WHITE);
         /** * 创建画笔,这里如果传入颜色,实际显示中是无法显示颜色的,我没有细究其原因。 * 错误: * Paint paint = new Paint(Color.RED); * 正确: * Paint paint = new Paint(); * paint.setColor(Color.RED); * */
        Paint paint = new Paint();
        //设置颜色
        paint.setColor(Color.RED);
        /** * 设置画笔的锯齿效果 * 提示:无圆角的图形去掉锯齿;有圆角的例如圆角矩形需要添加锯齿 * */
        paint.setAntiAlias(true);
}

以上代码相当于初始化了一个画家和一只画笔。而对象Canvas内部已经指向了一个画布bitmap之类的实例。

接下来是各种几何图形的绘制。其中的参数绝大部分是坐标,而坐标在这里是没有负数的。

// 画文本。1,文本;2、3,起始x,y坐标;4,画笔
        canvas.drawText("画圆:", 10, 10, paint);
        /** * drawCircle 看看官方api的解释:使用指定的油漆画指定的圆。如果半径是< = 0,那么什么都不会。圆填充或框架基于绘画的风格。 * cx 中心的坐标x * cy 中心的坐标y * radius 半径 * paint 使用的画笔 * */       
        canvas.drawCircle(60, 20, 10, paint);//圆
canvas.drawText("画线:", 10, 60, paint);
        /** * drawLine 看看官方api的解释:画一条线段与指定的启动和停止x,y坐标,使用指定的油漆。 * 注意,因为一条线总是“陷害”,油漆的样式设置将被忽略。 * 退化(长度为0行)将不会画。 * * 参数我也就不解释了:drawLine (float startX, float startY, float stopX, float stopY, Paint paint) * */
        canvas.drawLine(60, 40, 100, 40, paint);// 画线
        canvas.drawLine(110, 40, 190, 80, paint);// 斜线
canvas.drawText("画弧线:", 10, 80, paint);
        //画弧线
        paint.setStyle(Paint.Style.STROKE);//设置空心
        RectF rectFOval = new RectF(150, 20, 180, 40);//RectF表示一个矩形,参数是四个角的坐标
        /** * drawArc 看看官方api的解释:绘制指定的弧,将缩放以适合在指定的椭圆形。如果一开始角是- > = 360,360年初角被视为开始角模。 如果扫描角> = 360,那么椭圆完全被吸引。注意,这个SkPath略有不同:arcTo,将扫描角模360。如果扫描角是负的,扫描角作为扫描角模360 电弧是顺时针方向。一个角度0度对应的几何角度0度(3点钟看。) 参数: oval 椭圆形的范围用于定义弧的形状和大小 startAngle 起始角(度)弧开始 sweepAngle sweepangle扫描角(度)测量 useCenter 如果这是真的,包括椭圆的弧的中心,并关闭它,如果它被抚摸。这将画一个楔子。也就是说如果设置成了true,则这个图形不是一条弧线了,而会是类似于扇形 paint 油漆 * */
        canvas.drawArc(rectFOval, 180, 180, false, paint);//小弧形
canvas.drawText("画矩形:", 10, 100, paint);
        paint.setStyle(Paint.Style.FILL);//设置填满
        /** * drawRect 看看官方api的解释:绘制指定的矩形使用指定的油漆。矩形将油漆或框架基于风格。 * 参数就不解释了:(float left, float top, float right, float bottom, Paint paint)皆为坐标 * */
        canvas.drawRect(60, 60, 80, 80, paint);// 正方形
        canvas.drawRect(60, 90, 160, 100, paint);// 长方形
canvas.drawText("画扇形和椭圆:", 10, 120, paint);
        RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形,扫描测量
        // 画扇形,第一个参数是RectF:该类是第二个参数是角度的开始,第三个参数是多少度,第四个参数是真的时候画扇形,是假的时候画弧线
        canvas.drawArc(oval2, 200, 130, true, paint);
        //oval改一下
        oval2.set(210, 100, 250, 130);
        //椭圆形:使用指定的油漆画指定的椭圆形。总统将油漆或框架基于风格。
        canvas.drawOval(oval2, paint);
 canvas.drawText("画三角形:", 10, 200, paint);
        // 绘制这个三角形,你可以绘制任意多边形
        Path path1 = new Path();
        path1.moveTo(80, 200);// 此点为多边形的起点,设置下一个轮廓的开始点(x,y)。
        path1.lineTo(120, 250);//添加一行从最后一点到指定点(x,y)。如果没有调用moveTo()方法,则默认起点为(0,0)
        path1.lineTo(80, 250);
        path1.close(); // 使这些点构成封闭的多边形
        /** * 使用指定的油漆画指定的路径。这将不会是一条 *填满或框架基于绘画的风格。 * */
        canvas.drawPath(path1, paint);
 // 你可以绘制很多任意多边形,比如下面画六连形
        paint.reset();//重置
        paint.setStyle(Paint.Style.STROKE);//设置空心
        Path path2 = new Path();
        path2.moveTo(180, 200);
        path2.lineTo(200, 200);
        path2.lineTo(210, 210);
        path2.lineTo(200, 220);
        path2.lineTo(180, 220);
        path2.lineTo(170, 210);
        path2.close();//封闭
        canvas.drawPath(path2, paint);
//画圆角矩形
        paint.setStyle(Paint.Style.FILL);//充满
        paint.setAntiAlias(true);// 设置画笔的锯齿效果
        canvas.drawText("画圆角矩形:", 10, 260, paint);
        RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形
        /** * 使用指定的油漆画指定的圆角的绘制 * */
        canvas.drawRoundRect(oval3, 20, 15, paint);//第二个参数是x半径,第三个参数是y半径
//画贝塞尔曲线
        canvas.drawText("画贝塞尔曲线:", 10, 310, paint);
        paint.reset();
        paint.setStyle(Paint.Style.STROKE);//中空
        Path path3 = new Path();
        path3.moveTo(100, 320);//设置Path的起点
        path3.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标;添加一个二次贝塞尔曲线的接近控制点,最后一点;
        canvas.drawPath(path3, paint);//画出贝塞尔曲线
//画点
        paint.setStyle(Paint.Style.FILL);
        canvas.drawText("画点:", 10, 390, paint);
        canvas.drawPoint(60, 390, paint);//画一个点
        canvas.drawPoints(new float[]{60, 400, 65, 400, 70, 400}, paint);//画多个点,假设你想画整个数组
//画图片,就是贴图在画板上
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        canvas.drawBitmap(bitmap, 250, 360, paint);

以上就是大部分的几何图形的绘制。绘图在ui上的用处可谓点睛之笔,有时候的确很方便。

还有画家(Canvas)的一些属性设置:

//为Paint设置渐变器
        Shader mShader = new LinearGradient(0, 0, 40, 60,
                new int[]{
                        Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW},
                null, Shader.TileMode.REPEAT);
        //为Paint设置渐变器
        paint.setShader(mShader);

更多Canvas属性可以查看android api:Android 官方api Canvas

画笔(Paint)的一些属性设置:

        paint.setStyle(Paint.Style.STROKE);//设置画笔风格为描边
        paint.setShadowLayer(45, 10, 10, Color.GRAY);//设置阴影
        paint.setColor(Color.RED);//画笔的颜色
        paint.setStrokeWidth(1);//画笔的宽度

更多Canvas属性可以查看android api:Android 官方api Paint

绘图路径(Path)的一些属性:

 path1.moveTo(80, 200);// 此点为多边形的起点,设置下一个轮廓的开始点(x,y)。
        path1.lineTo(120, 250);//添加一行从最后一点到指定点(x,y)。如果没有调用moveTo()方法,则默认起点为(0,0)
        path1.close(); // 使这些点构成封闭的多边形
        path3.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标;添加一个二次贝塞尔曲线的接近控制点,最后一点;

最后还有画布(RectF)的属性:

RectF oval = new RectF(80, 260, 200, 300);// 设置个新的矩形

更多Canvas属性可以查看android api:Android 官方api RectF