• D3-Android 自定义控件绘图之柱状图


    零、前言

    [1].本控件绘图部分使用我的LogicCanvas绘图库:基础使用在此
    [2].喜欢的话可以到github上看看,顺便给个star
    [3].今天突然发现竟然LogicCanvas绘图库,忘了绘制文字这个重要功能,赶紧加
    [4].写完了,顺便写篇文章吧,基于LogicCanvas实现坐标系及网格(已内置),再画个柱状图看看吧

    9414344-2c525ded04236379.png
    网格坐标系效果

    9414344-f8bdc7083e1d476c.png
    坐标系效果

    一、网格绘制:

    这个很简单,for里面拉线就行了

    使用:第二参数是格子宽
    CanvasUtils.drawGrid(mContext, 50, canvas);
    
    代码实现:
    /**
         * 绘制网格
         *
         * @param ctx    上下文
         * @param step   间隔
         * @param canvas 画布
         */
        public static void drawGrid(Context ctx, int step, Canvas canvas) {
            Pos pos = Pos.init();
            Painter painter = new Painter(canvas);
            if (step == 0) {
                return;
            }
            //横线
            for (int i = 0; i < getScreenHeight(ctx) / step; i++) {
                ;
                painter.draw(new ShapeLine().ps(
                        pos.form(0f, 0f - step * i),
                        pos.form(getScreenWidth(ctx) + 0F, 0f - step * i)
                        ).ss(Color.GRAY).b(2f)
                );
            }
            //竖线
            for (int i = 0; i <= getScreenWidth(ctx) / step; i++) {
                painter.draw(new ShapeLine().ps(
                        pos.form(0f + step * i, 0f),
                        pos.form(0f + step * i, 0f - getScreenHeight(ctx)))
                        .ss(Color.GRAY).b(2f)
                );
            }
        }
    

    二、坐标系绘制:

    使用:

    private Pos pos = Pos.init();
    CanvasUtils.drawCoord(mContext, pos.form(400, 800), 50, canvas);
    
    代码实现:
        /**
         * @param ctx    上下文
         * @param coo    坐标系原点
         * @param step   小线间隔(像素)
         * @param canvas 画布
         */
        public static void drawCoord(Context ctx, Pos coo, float step, Canvas canvas) {
            Pos pos = Pos.init();
            Painter painter = new Painter(canvas);
            int cooColor = Color.BLACK;
            Float lineHeight = dp2px(ctx, 4f);
            int winH = getScreenHeight(ctx);
            int winW = getScreenWidth(ctx);
            //横线
            painter.draw(new ShapeLine()
                    .ps(pos.form(-coo.x, 0), pos.form(winW - coo.x, 0))
                    .ss(cooColor).coo(coo));
            //竖线
            painter.draw(new ShapeLine()
                    .ps(pos.form(0, -(winH - coo.y)), pos.form(0, coo.y))
                    .ss(cooColor).coo(coo));
            //右侧小线
            for (int i = 1; i < (winW - coo.x) / step; i++) {
                Pos p0 = pos.form(step * i, 0);
                painter.draw(new ShapeLine()
                        .ps(p0, pos.form(step * i, lineHeight)).
                                ss(cooColor).coo(coo));
                painter.drawText(
                        new ShapeText()
                                .str("" + (int) (i * step)).al(">")
                                .size(20).p(p0.add(coo).add(pos.form(10, 25)))
                                .ss(cooColor)
                );
            }
            //左侧小线
            for (int i = 1; i < coo.x / step; i++) {
                Pos p0 = pos.form(-step * i, 0);
                painter.draw(new ShapeLine()
                        .ps(p0, pos.form(-step * i, lineHeight)).
                                ss(cooColor).coo(coo));
                painter.drawText(
                        new ShapeText()
                                .str("-" + (int) (i * step)).al(">")
                                .size(20).p(p0.add(coo).add(pos.form(10f, 25f)))
                                .ss(cooColor)
                );
            }
            //上侧小线
            for (int i = 1; i < coo.y / step; i++) {
                Pos p0 = pos.form(0, step * i);
                painter.draw(
                        new ShapeLine()
                                .ps(p0, pos.form(lineHeight, step * i)).
                                ss(cooColor).coo(coo));
    
                painter.drawText(
                        new ShapeText()
                                .str((int) (i * step) + "").al(">")
                                .size(20).p(p0.add(coo).add(pos.form(-10f, 5f)))
                                .ss(cooColor)
                );
            }
            //下侧小线
            for (int i = 1; i < (winH - coo.y) / step; i++) {
                Pos p0 = pos.form(0, -step * i);
                painter.draw(new ShapeLine()
                        .ps(p0, pos.form(lineHeight, -step * i)).
                                ss(cooColor).coo(coo));
    
                painter.drawText(
                        new ShapeText()
                                .str("-" + (int) (i * step)).al(">")
                                .size(20).p(p0.add(coo).add(pos.form(-10, 5f)))
                                .ss(cooColor)
                );
            }
            //右小箭头
            painter.draw(new ShapeLine().ps(
                    pos.form(winW - coo.x - lineHeight * 2, lineHeight),
                    pos.form(winW - coo.x - lineHeight * 2, -lineHeight),
                    pos.form(winW - coo.x, 0),
                    pos.form(winW - coo.x - lineHeight * 2, lineHeight)
            ).fs(cooColor).coo(coo));
            //上小箭头
            painter.draw(new ShapeLine().ps(
                    pos.form(lineHeight, coo.y - lineHeight * 2),
                    pos.form(-lineHeight, coo.y - lineHeight * 2),
                    pos.form(0, coo.y),
                    pos.form(lineHeight, coo.y - lineHeight * 2)
            ).fs(cooColor).coo(coo));
        }
    
        /**
         * 获得屏幕高度
         *
         * @return 屏幕高度
         */
        private static int getScreenWidth(Context ctx) {
            WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
            DisplayMetrics outMetrics = new DisplayMetrics();
            wm.getDefaultDisplay().getMetrics(outMetrics);
            return outMetrics.widthPixels;
        }
    
        /**
         * 获得屏幕宽度
         *
         * @return 屏幕宽度
         */
        private static int getScreenHeight(Context ctx) {
            WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
            DisplayMetrics outMetrics = new DisplayMetrics();
            wm.getDefaultDisplay().getMetrics(outMetrics);
            return outMetrics.heightPixels;
        }
    

    三、柱状图的画法:OnDraw中:

     final Painter painter = new Painter(canvas);
            for (int i = -4; i < 14; i += 2) {
                float num = (float) (Math.random() * 500);
                Shape line = new ShapeRect()
                        .x(50f).y(num).r(10f)
                        .fs(ColUtils.randomRGB()).coo(400f, 800f).p(50f * i, 0f);
                //绘制文字
                painter.drawText(
                        new ShapeText().str((int)num + "").size(28)
                                .p(pos.form(22+50f * i, -num-10)
                                        .add(pos.form(400f, 800f)))
                );
                painter.draw(line);
            }
            CanvasUtils.drawGrid(mContext, 50, canvas);
            CanvasUtils.drawCoord(mContext, pos.form(400, 800), 50, canvas);
    

    后记、

    1.声明:

    [1]本文由张风捷特烈原创,转载请注明
    [2]欢迎广大编程爱好者共同交流
    [3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
    [4]你的喜欢与支持将是我最大的动力

    2.连接传送门:

    更多安卓技术欢迎访问:安卓技术栈
    我的github地址:欢迎star
    简书首发,腾讯云+社区同步更新
    张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com

    3.联系我

    QQ:1981462002
    邮箱:1981462002@qq.com
    微信:zdl1994328

    4.欢迎关注我的微信公众号,最新精彩文章,及时送达:
    9414344-c474349cd3bd4b82.jpg
    公众号.jpg
  • 相关阅读:
    42.纯 CSS 创作一个均衡器 loader 动画
    41.纯 CSS 绘制一支栩栩如生的铅笔
    1.如何在Cloud Studio上执行Python代码?
    2.每个 HTML 文件里开头都有个<!DOCTYPE>
    39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
    LOJ #2127. 「HAOI2015」按位或 min-max容斥+FWT
    HDU
    LOJ #3044. 「ZJOI2019」Minimax 搜索 动态DP+概率
    LOJ #3043. 「ZJOI2019」线段树 线段树+分类讨论
    Comet OJ
  • 原文地址:https://www.cnblogs.com/toly-top/p/9781900.html
Copyright © 2020-2023  润新知