自定义 View 1-1：绘制基础

• 学习地址

• 自定义 View 1-1：绘制基础

  • 初始化画笔

      mPaint.color = Color.parseColor("#FDDE74")  //设置画笔颜色
      mPaint.setStrokeWidth(20) // 线条宽度为 20 像素
      mPaint.isAntiAlias = true  //是否抗锯齿化,使边缘更加平滑（因为分辨率太低，导致看起来有颗粒感，所谓使边缘更加平滑并不是使用更精确的计算去画图形，而是去修改图形边缘处的像素颜色，使肉眼看起来更加平滑了）
      mPaint.style = Paint.Style.FILL_AND_STROKE//画笔样式，默认fill，填充模式
  

  • 初始化画布
  • 画布api

      canvas.drawColor(Color.parseColor("#2F80A4"))  //给画布设置一个背景色
      
      //画圆
      canvas.drawCircle(500f, 500f, 400f, mPaint)
      
      //画矩形
      canvas.drawRect(200f,300f,500f,600f,mPaint)
      
      //画点
      mPaint.strokeWidth=100f//控制点的大小
      mPaint.strokeCap = Paint.Cap.SQUARE //控制点的方圆
      canvas.drawPoint(600f,600f,mPaint)
      
      //批量画圆
      mPaint.strokeWidth = 30f
      mPaint.strokeCap = Paint.Cap.ROUND
      val arr: FloatArray = floatArrayOf(0f, 0f, 800f, 800f, 100f, 100f, 200f, 200f)
      canvas.drawPoints(arr, 2, 6, mPaint)//跳过前面2个数，画6个数，也就是三个圆
      
      //椭圆
      mPaint.style = Paint.Style.FILL
      canvas.drawOval(400f, 50f, 700f, 700f, mPaint)
      
      //画线
      canvas.drawLine(300f,300f,700f,700f,mPaint)
      
      //批量画线，同批量画点
      val linesArr : FloatArray = floatArrayOf(20f, 20f, 120f, 20f, 70f, 20f, 70f, 120f, 20f, 120f, 120f, 120f, 150f, 20f, 250f, 20f, 150f, 20f, 150f, 120f, 250f, 20f, 250f, 120f, 150f, 120f, 250f, 120f)
      canvas.drawLines(linesArr,mPaint)
      
      //圆角矩形
      canvas.drawRoundRect(300f, 300f, 700f, 100f, 50f, 50f, mPaint)
      
      /**
       * 弧形
       * 左上右下
       * startAndle:开始的弧度，x轴右正，顺时针正逆时针负
       * sweepAngle：扫过的弧度
       * 是否连接到圆心，连接到圆心是个扇形，不连接是弧形
       * 画笔
       */
      canvas.drawArc(300f,100f,700f,500f,0f,90f,true,mPaint)
  

  • 通过canvas.drawPath()画自定义图形

      //定义一个Path
      val mPath = Path()
      
      //1.mPath.addCircle添加子view
      mPath.addCircle(300f, 300f, 100f, Path.Direction.CCW) //添加其他形状同理
      canvas.drawPath(mPath, mPaint)
      
      //2.xxxTo()
      //2.1lineTo()
      mPaint.style = Paint.Style.STROKE
      mPaint.strokeWidth = 5f
      mPath.lineTo(700f, 100f)  //永远从(0,0)开始
      mPath.rLineTo(700f, 500f) //从上一次画完view的末尾坐标开始画，默认(0,0)，这里的r，就是relative，相对的
      canvas.drawPath(mPath, mPaint)
      
      /**
       * 2.2quadTo画贝塞尔曲线，控制点，和终点的坐标，这个不是很明白是怎么绘制的
       */
      mPath.quadTo(600f, 100f, 700f, 700f)//二次贝塞尔曲线，同LineTo()，quadTo是绝对坐标，起点默认原点（0，0）
      mPath.rQuadTo(800f, 500f, 900f, 1000f)//同rLineTo()，rQuadTo是相对坐标，相对与上一次的画图的末尾点开始画的
      canvas.drawPath(mPath, mPaint)
      
      //2.3 三次贝塞尔曲线
      mPath.cubicTo(0f,0f,100f,200f,300f,400f)
      mPath.rCubicTo(300f,500f,600f,600f,700f,100f)//看来这个相对位置，是相对与上一次绘制的末尾点作为原点来绘制其他的图像的
      canvas.drawPath(mPath,mPaint)
      
      //2.4 moveTo 移动起点
      mPath.lineTo(100f, 100f)
      mPath.moveTo(200f, 200f)
      mPath.rMoveTo(200f,200f)    // 相对modeTo怎么后面的内容都没得了
      mPath.lineTo(300f, 300f)
      canvas.drawPath(mPath, mPaint)
      
      /**
       * 2.5 arcTo，画弧线
       * 左上右下，开始弧度，扫过的弧度
       * 是否强制将画笔移动到画弧的起点处，true,就是不将前面的根弧线连接起来，
       */
      mPath.lineTo(100f,100f)
      //mPath.arcTo(200f, 200f, 500f, 600f, 0f, 180f, true)
      //addArc == arcTo(,,,,,,true)
      mPath.addArc(200f, 200f, 500f, 600f, 0f, 180f)
      canvas.drawPath(mPath, mPaint)
      
      //3 close,封闭子图形
      mPath.moveTo(100f, 100f)
      mPath.lineTo(700f, 100f)
      mPath.lineTo(400f, 400f)
      mPath.close()//close==lineTo(起点)
      canvas.drawPath(mPath,mPaint)
      
      //画笔样式为fill/stroken_fill的时候，图形会自动封闭填充
      mPaint.style = Paint.Style.FILL
      mPath.moveTo(100f, 100f)
      mPath.lineTo(200f, 100f)
      mPath.lineTo(150f, 150f)
      canvas.drawPath(mPath,mPaint)
      
      Path 方法第二类：辅助的设置或计算
      setFillPath()
      口诀：WIDING(非零环绕)，非0涂0不涂；
            EVEN_ODD(奇偶原则)，奇涂偶不涂