android canvas绘制圆角_Android Canvas 绘制小黄人

❝学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固。我在学习 Canvas 绘制 API 的时候就是这样做的。❞截图镇楼效果图我觉得这个绘制小黄人的自定义 View 就很有意思,也为我后来工作中的自定义 View 实现打下了良好的基础。虽然这是 4 年半以前写的文章,但是大部分关注我们的同学应该没看过,今天咱们一起来拷古翻新一下代码(程序员的事,怎...
摘要由CSDN通过智能技术生成

学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固。我在学习 Canvas 绘制 API 的时候就是这样做的。

截图镇楼

71a441772a6b33282127c8373bea55e1.png

效果图

fee5381beac35ae88bc8e134829f54c8.png

我觉得这个绘制小黄人的自定义 View 就很有意思,也为我后来工作中的自定义 View 实现打下了良好的基础。虽然这是 4 年半以前写的文章,但是大部分关注我们的同学应该没看过,今天咱们一起来拷古翻新一下代码(程序员的事,怎么能叫炒冷饭呢,这明明是温故而知新)。以后有机会还会分享项目实用自定义 View,敬请关注。

实现步骤

其实很简单

  1. 首先找到一张小黄人的图
  2. 然后调用 canvas.drawBitmap() 后画到画布上 好吧,一点都不好笑  - -。

正文 ↓

准备工作

自定义MinionView extends View,定义以下成员变量,备用(可以先不看,后面的代码看到莫名其妙出来的变量再上来看下)

private float bodyWidth;
private float bodyHeight;
private static final float BODY_SCALE = 0.6f; // 身体主干占整个view的比重
private static final float BODY_WIDTH_HEIGHT_SCALE = 0.6f; // 身体的比例设定为 w:h = 3:5

private float mStrokeWidth = 4; // 描边宽度
private float offset; // 计算时,部分需要 考虑描边偏移
private float radius; // 身体上下半圆的半径
private int colorClothes = Color.rgb(32, 116, 160); // 衣服的颜色
private int colorBody = Color.rgb(249, 217, 70); // 身体的颜色
private int colorStroke = Color.BLACK;
private RectF bodyRect = new RectF();
private float handsHeight;// 计算出吊带的高度时,可以用来做手的高度
private float footHeight; // 脚的高度,用来画脚部阴影时用

初始化参数

重写 onSizeChanged 方法,尺寸变化时初始化一下绘制的参数(会经常看到一些奇怪的数字,用做比例换算,别问我怎么来的,目测 + 一点点微调得来的- -。)

private void initParams() {
    
    bodyWidth = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) * BODY_SCALE;
    bodyHeight = Math.min(getWidth(), getHeight() * BODY_WIDTH_HEIGHT_SCALE) / BODY_WIDTH_HEIGHT_SCALE * BODY_SCALE;

    mStrokeWidth = Math.max(bodyWidth / 50, mStrokeWidth);
    offset = mStrokeWidth / 2;

    bodyRect.left = (getWidth() - bodyWidth) / 2;
    bodyRect.top = (getHeight() - bodyHeight) / 2;
    bodyRect.right = bodyRect.left + bodyWidth;
    bodyRect.bottom = bodyRect.top + bodyHeight;

    radius = bodyWidth / 2;
    footHeight = radius * 0.4333f; 

    handsHeight =  (getHeight() + bodyHeight) / 2   + offset - radius * 1.65f;
}

绘制参数好了,接下来就是一步步绘制几何图形了

画身体

5c15e5e8117e90b688f1ca2c1d430450.png显然身体是一个矩形加上,上下半圆,这边只要用一个圆角矩形,然后圆角的弧度半径用身体宽度的一半就可以达到这个效果了。把身体的矩形外存起来,后面经常要用到其相对位置进行对其它部位的定位,代码如下:

protected void onDraw(Canvas canvas) {
    
    ...
    drawBody(canvas);       // 身体
    drawBodyStroke(canvas); // 最后画身体的描边,可以摭住一些过渡的棱角
}

private void drawBody(Canvas canvas) {
    mPaint.setColor(colorBody);
    mPaint.setStyle(Paint.Style.FILL);

    canvas.drawRoundRect(bodyRect, radius, radiu
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值