一个蛋搞懂canvas.drawArc()

4,692 阅读2分钟

egg

Android 中的canvas有很多方法,画圆,画长方形,画椭圆型,那么如果让你画个蛋,你会怎么做呢。

  • 可能你会说drawOval,但是你看这个蛋它明显一头尖一头圆嘛,所以我的思路就是使用drawArc

思路如下:

  • 把圆看成两半
    • 一半用drawArc画半圆,画笔设置为填充
    • 另一半drawArc画椭圆,画笔设置为填充
    • 两个半圆拼在一起,当当当当鸡蛋的形状出现了!

啰嗦这么多,进入正题看一下drawArc方法

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint) {
        super.drawArc(oval, startAngle, sweepAngle, useCenter, paint);
}

  • 分别需要5个参数,那它们分别代表什么意思呢?
    • oval:为确定圆弧区域的矩形,圆弧的中心点为矩形的中心点
    • startAngle:为圆弧的开始角度(时钟3点的方向为0度,顺时钟方向为正)
    • sweepAngle:为圆弧的扫过角度(正数为顺时钟方向,负数为逆时钟方向)
    • useCenter:表示绘制的圆弧是否与中心点连接成闭合区域
    • paint:paint为绘制圆弧的画笔

撸码环节

  • ①初始化画笔
    /**
     * 画笔颜色值
     */
    public static final int COLOR_STOCK = Color.parseColor("#F5DEB3");
    //抗锯齿
   mEggPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    //画笔样式填充        
  mEggPaint.setStyle(Paint.Style.FILL);
  mEggPaint.setColor(COLOR_STOCK);
  //开启抗锯齿
  mEggPaint.setAntiAlias(true);
  //开启防抖动
  mEggPaint.setDither(true);
  • ②获取中心点
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        //获取画布的宽度
        float canvasWidth = right - left;
        //获取画布的高度
        float canvasHeight = bottom - top;
        //除以二得到中间值
        float x = canvasWidth / 2;
        float y = canvasHeight / 2;
        float r = canvasWidth / 2;
        mX = x;
        mY = y;
        mR = r;
    }
  • 画蛋
  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //上半圆长方形Y方向设置比下半圆长凸显椭圆弧
        RectF ovalTop = new RectF(mX-mR, mY-mR-100, mX+mR, mY+mR+100);
        //从9点钟方向顺时针画弧线180度未与中心点闭合,画笔模式为填充
        canvas.drawArc(ovalTop, 180, 180, false, mEggPaint);

       //下半圆长方形半圆弧
        RectF oval3 = new RectF(mX-mR, mY-mR, mX+mR, mY+mR);
     //从3点钟方向顺时针画弧线180度未与中心点闭合,画笔模式为填充
        canvas.drawArc(oval3, 0, 180, false, mEggPaint);
    }
  • 效果图
    • 我这里布局写的宽高为100dp200dp毕竟是长方形嘛。
      效果图

注意如果是四个半圆画蛋的话第四个参数要设置为true,否则你画蛋中间将是空心的

好了,到这里蛋画好了drawArc你会了吗,当然我只是简单的举一个例子,建议分成四个半弧去画蛋,五个参数你需要自己去尝试一下,才能更充分地理解他们的作用,篇幅有限就不啰嗦了!