Canvas实现简单图形

前言

怎么减少apk大小，最直接的方法就是减少图片资源，因此许多比较简易的UI实现就不要找美工出图了，自己画一个就好，效率又高还不占地方，岂不美哉，今天记录下Canvas画几个简单图形

大纲

1.效果预览

2.实现和注释

3.其他问题

正文

1.效果预览

这个代金券的角标，要图片背景简直就是浪费资源，简单几行代码就能实现

2.实现和注释

第一步，自定义view，这个代金券因为还有金额、产品名称、使用条件等，所以自定义一个View继承的是LinerLayout，所以如果想画出角标效果，需要重写dispatchDraw方法

第二步，dispatchDraw方法重写如下

@Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);

        //根据设计图获取角标四个点的位置 ，根据不同屏幕适配框架选择单位是px还是dp
        int px20 = DensityUtil.dip2px(getContext(), 20);
        int px40 = DensityUtil.dip2px(getContext(), 40);
        int px7 = DensityUtil.dip2px(getContext(), 7.5f);
        int px27 = DensityUtil.dip2px(getContext(), 27.5f);
        int sp10 = DensityUtil.sp2px(getContext(), 10);

        //角标背景
        Paint mPaint = new Paint();
        /**
         * 三种style
         * FILL 填充
         * STROKE 描边
         * FILL_AND_STROKE 描边且填充
         * 背景使用填充即可，文字则使用描边
         */
        mPaint.setStyle(Paint.Style.FILL);
        //背景颜色
        mPaint.setColor(color);
        //画笔宽度
        mPaint.setStrokeWidth(1);
        Path path = new Path();
        //移动到(20,0)这个点
        path.moveTo(px20, 0);
        //依次连接(20,0)、(40,0)、(0,40)、(0,20)这四个点
        path.lineTo(px40, 0);
        path.lineTo(0, px40);
        path.lineTo(0, px20);
        //封闭图形，是个梯形
        path.close();
        //在画布上画下
        canvas.drawPath(path, mPaint);
        canvas.save();
        //角标文字
        Paint paint = new Paint();
        //使用描边且填充模式
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setColor(Color.WHITE);
        //防锯齿开关
        paint.setAntiAlias(true);
        //画笔宽度
        paint.setStrokeWidth(1);
        Path pathText = new Path();
        //以下的两个点为文字的基准线，即文字以垂直该线的方式展示，如果文字是反着的，就将交换两个坐标
        pathText.moveTo(px7, px27);
        pathText.lineTo(px27, px7);
        pathText.close();
        paint.setTextSize(sp10);

        canvas.drawTextOnPath(DictionaryInfo.getCouponType(Integer.parseInt(voucherType)), pathText, 0, 0, paint);
    }

第三步，在容器布局引入该view，设置adapter配置其他数据

3.其他问题

基本使用方法在代码中都列举注释了，可以照猫画虎的画个三角、矩形、圆之类的练习下。再次提醒如果文字和理想显示的不一致，基本上就是文字基准线的顺序问题，这部分再注意下。

然后画个复杂的，画个抛物线吧，其他基本相同，就path路径改了下，改用二阶贝塞尔

//抛物线
        Paint mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(color);
        mPaint.setStrokeWidth(3);
        Path path = new Path();
        path.moveTo(px20, 0);
        //二阶贝塞尔曲线（抛物线）
        path.quadTo(px40, 0, 0, px40);
        canvas.drawPath(path, mPaint);

总结

基本简单介绍了一种代替切图的思路，往深探究的话一些简易icon也是可以画出的。另外贝塞尔曲线也是比较强大的，以后专门再开篇文章记录

参考

https://blog.csdn.net/zhangcanyan/article/details/83588032

https://www.jianshu.com/p/3b2ac05ae3c7