美文网首页
【Android自定义View】绘图之基础篇(一)

【Android自定义View】绘图之基础篇(一)

作者: 欢子3824 | 来源:发表于2019-04-28 17:19 被阅读0次

    前言

    自定义 view 总是绕不开onDraw,而onDraw则少不了PaintCanvas,这里我们就说说这个。

    Paint

    主要的方法:

    paint.setColor(Color.RED); //设置画笔颜色
    paint.setAntiAlias(true);//抗锯齿功能
    paint.setStyle(Style.FILL);//设置填充样式
    paint.setStrokeWidth(30);//设置画笔宽度
    paint.setTextSize();//设置字体大小

    • setStyle 主要有FILLSTROKEFILL_AND_STROKE

    我们来看看效果

            Paint paint = new Paint();
            paint.setColor(Color.RED);
            paint.setStrokeWidth(10);
            paint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(200, 300, 100, paint);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawCircle(500, 300, 100, paint);
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            canvas.drawCircle(800, 300, 100, paint);
    
    image.png

    FILLFILL_AND_STROKE 貌似是一样的?我们将strokeWidth设置为100

    image.png
    可以明显的看到第2、3个圆变大了,STROKEFILL_AND_STROKE都会为圆加上strokeWidth/2

    Canvas

    • 画直线

    drawLine(float startX, float startY, float stopX, float stopY,Paint paint)

             paint.setColor(Color.RED);
             canvas.drawLine(100, 100, 200, 300, paint);
    

    drawLines(float[] pts, Paint paint)
    其中,pts 长度必须是 4个倍数

            paint.setColor(Color.BLACK);
            float[] pts = {50, 50, 150, 50,
                    150, 50, 150, 150,
                    150, 150, 250, 150,
                    250, 150, 250, 250};
            canvas.drawLines(pts, paint);
    

    需要注意的是,100,150 为第1个点,300,250为第2个点,第1、2个点连线,3、4个点连线


    image.png

    drawLines(float[] pts, int offset, int count,Paint paint)
    offset表示起始位置
    count表示从起始位置画多少个点,必须是4个倍数

            float[] pts = {50, 50, 150, 50,
                    150, 50, 150, 150,
                    150, 150, 250, 150,
                    250, 150, 250, 250};
            paint.setColor(Color.BLACK);
            canvas.drawLines(pts, 0, 16, paint);
    

    即和第二步中效果一致,我们修改offset为 4,count 为 12,效果为下图

    image.png
    • 画矩形

    drawRect (float left, float top, float right, float bottom, Paint paint)

    canvas.drawRect(100, 200, 400, 800, paint);
    

    其代表的坐标点如下图所示


    image.png

    drawRect (RectF rect, Paint paint)
    drawRect (Rect r, Paint paint)
    这2个其实是一样的,left、top、right、bottom和第1个是一致的

        public Rect(int left, int top, int right, int bottom) {
            this.left = left;
            this.top = top;
            this.right = right;
            this.bottom = bottom;
        }
    
        public RectF(float left, float top, float right, float bottom) {
            this.left = left;
            this.top = top;
            this.right = right;
            this.bottom = bottom;
        }
    
    • 圆角矩形

    drawRoundRect(RectF rect, float rx, float ry, Paint paint)
    其中,rx代表X轴圆角半径,ry代表Y轴圆角半径

            RectF rectF = new RectF(100, 200, 400, 800);
            canvas.drawRoundRect(rectF, 100, 200, paint);
    
    image.png

    drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)
    同矩形,rx、ry同方法1

    • 圆形

    drawCircle(float cx, float cy, float radius, Paint paint)
    其中,cx为圆心X轴坐标,cy为圆心Y轴坐标,radius为半径

     canvas.drawCircle(100, 200, 50, paint);
    
    image.png
    • 椭圆
      drawOval(RectF oval, Paint paint)
      drawOval(float left, float top, float right, float bottom, Paint paint)
      同矩形
            RectF rectF = new RectF(100, 200, 400, 800);
            canvas.drawOval(rectF, paint);
    
    image.png
    • 弧线

    drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
    drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

    startAngle 弧开始的角度,以X轴正方向为0度
    sweepAngle 弧持续的角度
    useCenter 是否有弧的两边,true 闭合的,false 非闭合的

            paint.setStyle(Paint.Style.STROKE);
    
            RectF rect = new RectF(50, 100, 200, 400);
            canvas.drawArc(rect, 0, 90, true, paint);
    
            
            RectF rectF = new RectF(100, 200, 400, 800);
            canvas.drawArc(rectF, 0, 90, false, paint);
    
    image.png
    • 示例
      这里就不贴代码了,主要用的画线、矩形和圆,再加上一些位置计算


      image.png

    参考资料:自定义控件之绘图篇(一):概述及基本几何图形绘制

    相关文章

      网友评论

          本文标题:【Android自定义View】绘图之基础篇(一)

          本文链接:https://www.haomeiwen.com/subject/uvkqnqtx.html