一个蛋搞懂canvas.drawArc()

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

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

思路如下：

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

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

代码语言：javascript复制

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为绘制圆弧的画笔

撸码环节

• ①初始化画笔

代码语言：javascript复制

    /**
     * 画笔颜色值
     */
    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);

• ②获取中心点

代码语言：javascript复制

    @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;
    }

• 画蛋

代码语言：javascript复制

  @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);
    }

• 效果图
  • 我这里布局写的宽高为100dp和200dp毕竟蛋是长方形嘛。

  

  效果图

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

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

dp paint

0 人点赞