当前位置:   article > 正文

Canvas_canvas绘制圆,并设置半透明填充

canvas绘制圆,并设置半透明填充
  1. //绘制一个圆
  2. canvas.drawCircle(300, 300, 200, paint);
  3. 参数:
  4. centerX centerY 是圆心的坐标,第三个参数 radius 是圆的半径,单位都是像素。
  5. 解读:
  6. 以XY(0,0)为起点,X向右偏移300,Y向下偏移300,所到的坐标为圆中心,圆的半径为200px。

示例图:

解读图:

  1. //颜色填充
  2. canvas.drawColor(Color.BLACK);
  3. 多种写法:
  4. canvas.drawColor(Color.parse("#88880000"); //半透明红色
  5. canvas.drawRGB(100, 200, 100);
  6. canvas.drawARGB(100, 100, 200, 100);
  7. 解读:
  8. 给整个画布设置颜色。
  9. 作用:
  10. 这类颜色填充方法一般用于在绘制之前设置底色,或者在绘制之后为界面设置半透明蒙版。
  1. //绘制一个矩形
  2. canvas.drawRect(100, 100, 500, 500, paint);
  3. 参数:
  4. float left, float top, float right, float bottom, Paint paint
  5. 多种写法:
  6. 它还有两个重载方法canvas.drawRect(RectF rect, Paint paint) 和 canvas.drawRect(Rect rect, Paint paint) ,让你可以直接填写 RectF 或 Rect 对象来绘制矩形。
  7. 解读:
  8. 以XY(0,0)为起点,X从0向右偏移100为新起点,Y从0向下偏移100为新起点,X从0向右偏移500为终点,Y从0向下偏移500为终点,新起点和终点所得的区域,就是矩形区域。

示例图:

  1. //画点
  2. canvas.drawPoint(50, 50, paint);
  3. 示例:
  4. paint.setStrokeWidth(20);
  5. paint.setStrokeCap(Paint.Cap.ROUND);
  6. canvas.drawPoint(50, 50, paint);
  7. 解读:
  8. 以XY(0,0)为起点,X向右偏移50,Y向下偏移50,在偏移后的坐标画下一个点,点的大小根据paint.setStrokeWidth(xx)设置;点的形状根据Paint.setStrokeCap(cap)设置,参数有圆头 (ROUND)、平头 (BUTT) 和方头 (SQUARE) 三种。
  9. 多种写法:
  10. //批量画点,绘制四个点:(50, 50) (50, 100) (100, 50) (100, 100)
  11. float[] points = {0f, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
  12. canvas.drawPoints(points, 2/*跳过两个数,既前两个0*/, 8/*一共绘制8个数(4个点)*/, paint);

示例图:

  1. //画椭圆
  2. canvas.drawOval(50, 50, 350, 200, paint);
  3. 解读:
  4. 以XY(0,0)为起点,X从0向右偏移50为新起点,Y从0向下偏移50为新起点,X从0向右偏移350为终点,Y从0向下偏移200为终点,新起点和终点所得的区域,就是椭圆区域。
  5. 多种写法:
  6. 它还有一个重载方法canvas.drawOval(RectF rect, Paint paint),让你可以直接填写 RectF 来绘制椭圆
  7. 注意事项:
  8. 只能绘制横着的或者竖着的椭圆,不能绘制斜的

 示例图:

  1. //画线,所得的结果是一条斜着的线
  2. canvas.drawLine(200, 200, 800, 500, paint);
  3. 示例:
  4. paint.setColor(Color.BLACK);
  5. paint.setStyle(Paint.Style.STROKE);
  6. paint.setStrokeWidth(10);
  7. canvas.drawLine(200,200,800,500,paint);
  8. 解读:
  9. 以XY(0,0)为起点,X从0向右偏移200为新起点,Y从0向下偏移200为新起点,X从0向右偏移800为终点,Y从0向下偏移500为终点,X的新起点+Y的新起点=X的起点坐标,X的终点+Y的终点=Y的终点坐标,从X的起点坐标到Y的终点坐标就是绘制路径;该方法所得的效果就是在这个路径上画一条线,示例中并非是画一条斜线,而是路径刚好是斜着的,所以所得的结果是一条斜线。
  10. 多种写法:
  11. //批量画线
  12. float[] points = {20, 20, 120, 20, 70, 20, 70, 120, 20, 120, 120, 120, 150, 20, 250, 20, 150, 20, 150, 120, 250, 20, 250, 120, 150, 120, 250, 120};
  13. canvas.drawLines(points, paint);

示例图:

  1. //画圆角矩形
  2. canvas.drawRoundRect(100,100,500,300,50,50,paint);
  3. 参数:
  4. left, top, right, bottom 是四条边的坐标,rx 和 ry 是圆角的横向半径和纵向半径。
  5. 示例:
  6. paint.setStrokeWidth(10);
  7. paint.setColor(Color.BLACK);
  8. paint.setStyle(Paint.Style.STROKE);
  9. canvas.drawRoundRect(100,100,500,300,50,50,paint);
  10. 解读:
  11. 以XY(0,0)为起点,X从0向右偏移100为新起点,Y从0向下偏移100为新起点,X从0向右偏移500为终点,Y从0向下偏移300为终点,新起点和终点所得的区域,就是矩形区域,rx的50是圆角的横向半径,ry的50是圆角的纵向半径。
  12. 多种写法:
  13. 它还有一个重载方法canvas.drawRoundRect(RectF rect, float rx, float ry, Paint paint),让你可以直接填写 RectF 来绘制圆角矩形。

 示例图:

 

  1. //绘制弧形或扇形
  2. canvas.drawArc(200,100,800,500,-100,100,false,paint);
  3. 参数:
  4. left, top, right, bottom 描述的是这个弧形所在的椭圆;startAngle 是弧形的起始角度(x 轴的正向,即正右的方向,是 0 度的位置;顺时针为正角度,逆时针为负角度),sweepAngle 是弧形划过的角度;useCenter 表示是否连接到圆心,如果不连接到圆心,就是弧形,如果连接到圆心,就是扇形。
  5. 示例:
  6. paint.setStyle(Paint.Style.FILL);
  7. //绘制扇形
  8. canvas.drawArc(200,100,800,500,-100,100,false,paint);
  9. //绘制弧形
  10. canvas.drawArc(200,100,800,500,20,140,false,paint);
  11. paint.setStyle(Paint.Style.STROKE);
  12. //绘制不封口的弧形
  13. canvas.drawArc(200,100,800,500,180,60,false,paint);
  14. 解读:
  15. 以XY(0,0)为起点,X从0向右偏移200为新起点,Y从0向下偏移100为新起点,X从0向右偏移800为终点,Y从0向下偏移500为终点,新起点和终点所得的区域,就是圆形区域,-100是起始绘画位置(X轴从正右方向为0度,旋转-100度的位置开始绘画),100是绘画的角度,false为是否从绘画的起点和绘画的终点连接到圆心,连接到圆心则自动绘画成扇形,不连接到圆心则为弧形。
  16. 注意事项:
  17. Paint.Style.FILL是封口,Paint.Style.STROKE是不封口。

示例图:

  1. //绘制自定义形状
  2. canvas.drawPath(path, paint);
  3. 示例:
  4. Path path = new Path();
  5. path.addArc(200, 200, 400, 400, -225, 225);
  6. path.arcTo(400, 200, 600, 400, -180, 225, false);
  7. path.lineTo(400, 542);
  8. canvas.drawPath(path, paint);
  9. 解读:
  10. Path可以理解为是一个封装好的绘制模块,Path里面可以绘制所有canvas直接绘制的图形,只不过绘制好后保存在path变量里,之后调用canvas.drawPath(path, paint)来进行绘制。

示例图:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/254394
推荐阅读
相关标签
  

闽ICP备14008679号