绘图（三，进阶之绘制表盘）

最新推荐文章于 2023-02-25 12:35:36 发布
最新推荐文章于 2023-02-25 12:35:36 发布
阅读量4.1k 收藏 2
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzhi123456789/article/details/51069076
版权

前言

经常看到有一些App，在做一个耗时任务的时候都会做一个表盘或是手游赛车类游戏显示汽车速度，今天展示一个表盘的绘画。

还是先看效果图
这里写图片描述 这里写图片描述
如果不了解Android绘图的相关知识，建议先看一下我前面写的两篇博客《绘图(一，基础知识)》和《绘图(二，跟随路径变化的Text)》。

今天主要使用到一个API当然还是drawTextOnPath（）介个方法，我在《绘图(二，跟随路径变化的Text)》。这篇文章中详细介绍过，当然如果觉得我做的效果不太好看也完全没有必要使用drawTextOnPath，直接使用DrawArc介个方法就好了。

还是看一下这个方法的介绍吧

public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)

Draw the text, with origin at (x,y), using the specified paint, along the specified path. The paint’s Align setting determins where along the path to start the text.

Parameters
paramsdescribe
textString: The text to be drawn 将要被绘制的文本
pathPath: The path the text should follow for its baseline 被绘制的文本跟随路劲基线
hOffsetfloat: The distance along the path to add to the text’s starting position hOffset这个沿着路线的距离加到文本开始的位置
vOffsetfloat: The distance above(-) or below(+) the path to position the text vOffset这个沿着路线的距离加到文本的上方或着是下方
paintPaint: The paint used for the text (e.g. color, size, style)画笔

对于Path的话，就不用多说了，就是预先将N个点链接成一条线，或是直接将一个几何图形通过AddXxx方法添加到path中形成一条path.

由于代码写得稍微复杂了一点，不过看懂了之后就会发现其实很简单，这里我将我的思路通过流程图想大家介绍清楚。

这里写图片描述

先大致讲解一下流程图，在这个绘画中把我两个关键即可，一是那个部分是“动态”的，二是那个部分是“静态”的。将动态和静态部分确定好就行了。

从流程图大致可以看出开始一下的几个操作部分基本上都是静态的（除了指针的转动），不需要跟随用户动作是直接绘制的。在判断（mFrag is true?）一下的基本上都是依据角度的变更或用户时间响应动作“动态”绘制的。

所有的“动态”绘制部分都是依据一个参数的变更执行的

mSweepAnlge+=2;

如果对这个地方比较陌生的话，可以看一下我的上一篇文章《绘图(二，跟随路径变化的Text)》。你就明白了。

先看一下初始化操作吧

public BiaoPanView(Context context, AttributeSet attrs) {
    super(context, attrs);
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics displayMetrics = new DisplayMetrics();
    wm.getDefaultDisplay().getMetrics(displayMetrics);
    width = displayMetrics.widthPixels; //获取屏幕宽度
    r = (width - mMargin * 2-100)/2;
    mRectF = new RectF(mMargin, mMargin, width - mMargin , width - mMargin);
    mRectFPanBiao = new RectF(mMargin+strokeWidth, mMargin+strokeWidth, 
            width - mMargin-strokeWidth , width - mMargin-strokeWidth);

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.RED);
    mPaint.setStrokeWidth(strokeWidth);

    mPath = new Path();
    mPathBiaoPan = new Path();
}

这里要解释两个参数

/**
 * 描边宽度
 */
private float  strokeWidth = 30.0f;

/**
 * 组件的外边距
 */
private float mMargin = 100;

动态变化的弧形部分的大小是依据mRectF的创建

mRectF = new RectF(mMargin, mMargin, width - mMargin , width - mMargin);

这就需要你了解一下手机2D屏幕坐标了，画一张图就明白了

这里写图片描述

可以看出mWidth就是手机的屏幕的真实宽度。

明白之后你就会对这句话也应该明白了。

mRectFPanBiao = new RectF(mMargin+strokeWidth, mMargin+strokeWidth, 
        width - mMargin-strokeWidth , width - mMargin-strokeWidth);
/**
* 绘制盘表
*/
private RectF mRectFPanBiao;

知道为什么要减去strokeWidth了吗？因为绘制最外面一圈的弧形宽度就是由strokeWidth这个参数控制的，而刻度盘在它的下面，所以要减去strokeWidth。

所以我们来看看怎么绘制表盘刻度的

for (int i = 0; i <= 180; ) {
    mPathBiaoPan.addArc(mRectFPanBiao, 180+i, 2);
    canvas.drawPath(mPathBiaoPan, mPaint);
    i+=18;
}

了解上面所说的就很容易面白下面的代码了

//绘制中心的小圆点
mPaint.setColor(Color.BLACK);
canvas.drawCircle(width / 2, 
        width / 2, 15, mPaint);

最难的可能就是要绘制指针了，先看看代码吧

float stopX = (float)((width/2) - r* Math.cos(mSweepAnlge*Math.PI / 180) );
float stopY = (float)((width/2) - r * Math.sin(mSweepAnlge*Math.PI / 180) );
//绘制指针
mPaint.setColor(Color.RED);
canvas.drawLine(width / 2, width / 2, stopX, stopY, mPaint);

还是画一张图吧，这样比较容易理解。
这里写图片描述

这张在清晰不过了，要是觉得好的吧，转载请标明出处，谢谢~画张图不容易。

最后就是绘制跟随path移动的文本了

//如果扫描角度小于180度，将会发生重绘
if(mSweepAnlge <= 180){
    canvas.drawTextOnPath("文件"+(int)mSweepAnlge+"   ", mPath, 60, -60, mPaint);
    mSweepAnlge+=2;
    invalidate();
}else{ //否则绘画完成，停止绘画
    mFlag = false;
    mSweepAnlge = 0;
    canvas.drawTextOnPath("扫面完成           ", mPath, 60, -60, mPaint);
}

最后源码如下

public class BiaoPanView extends View {

    /**
     * 控制view的绘制
     */
    private boolean mFlag = false;

    /***
     * 画笔
     */
    private Paint mPaint;

    /**
     * 绘制弧长
     */
    private RectF mRectF;

    /**
     * 绘制盘表
     */
    private RectF mRectFPanBiao;

    /**
     * 扫描角度变换范围
     */
    private float mSweepAnlge;

    /**
     * 开始绘图
     */
    public void startDraw() {
        mFlag = true;
    }

    /**
     * 停止绘图
     */
    public void stopDraw() {
        mFlag = false;
    }

    /**
     * 判断目前是否正在绘制
     * 
     * @return
     */
    public boolean isStart() {
        return mFlag;
    }

    /**
     * 绘图路径
     */
    private Path mPath;

    /**
     * 绘图表盘路径
     */
    private Path mPathBiaoPan;

    /**
     * 弧长半径
     */
    private float r = 0;

    /**
     * 屏幕宽度
     */
    private int width;

    /**
     * 描边宽度
     */
    private float strokeWidth = 30.0f;

    /**
     * 组件的外边距
     */
    private float mMargin = 100;

    /**
     * 获取当前测度
     * 
     * @return
     */
    public float getCurrentSweepAnlge() {
        return this.mSweepAnlge;
    }

    private float mMarginZhiZheng = 100.0f;

    public BiaoPanView(Context context, AttributeSet attrs) {
        super(context, attrs);
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(displayMetrics);
        width = displayMetrics.widthPixels; // 获取屏幕宽度
        r = (width - mMargin * 2 - mMarginZhiZheng) / 2;
        mRectF = new RectF(mMargin, mMargin, width - mMargin, width - mMargin);
        mRectFPanBiao = new RectF(mMargin + strokeWidth, mMargin + strokeWidth,
                width - mMargin - strokeWidth, width - mMargin - strokeWidth);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(strokeWidth);

        mPath = new Path();
        mPathBiaoPan = new Path();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);

        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(30);
        // 从path中清除掉之前的绘制路径，一定要执行这句话，要不然
        // canvas.drawTextOnPath("文件"+(int)mSweepAnlge+"   ", mPath, 60, -60,
        // mPaint);
        // text文本将不会跟随路径一起移动
        mPath.reset();
        mPath.addArc(mRectF, 180, mSweepAnlge);
        canvas.drawPath(mPath, mPaint);

        mPaint.setTextSize(50);

        mPaint.setStrokeWidth(2);
        // 绘制中心的小圆点
        mPaint.setColor(Color.BLACK);
        canvas.drawCircle(width / 2, width / 2, 15, mPaint);

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(strokeWidth);
        mPathBiaoPan.reset(); // 注意使用之前，先将其重置，
        // 不然每次执行onDraw方法的时候都会一直addArc，
        // 内存将不断的被消耗，可以自行测试
        for (int i = 0; i <= 180;) {
            mPathBiaoPan.addArc(mRectFPanBiao, 180 + i, 2);
            canvas.drawPath(mPathBiaoPan, mPaint);
            i += 18;
        }

        float stopX = (float) ((width / 2) - r
                * Math.cos(mSweepAnlge * Math.PI / 180));
        float stopY = (float) ((width / 2) - r
                * Math.sin(mSweepAnlge * Math.PI / 180));
        mPaint.setStrokeWidth(2);
        // 绘制指针
        mPaint.setColor(Color.RED);
        canvas.drawLine(width / 2, width / 2, stopX, stopY, mPaint);

        mPaint.setTextSize(50);
        mPaint.setTextAlign(Align.RIGHT);
        mPaint.setStyle(Paint.Style.FILL);
        if (mFlag) {
            // 如果扫描角度小于180度，将会发生重绘
            if (mSweepAnlge <= 180) {
                canvas.drawTextOnPath("文件" + (int) mSweepAnlge + "   ", mPath,
                        60, -60, mPaint);
                mSweepAnlge += 2;
                invalidate();
            } else { // 否则绘画完成，停止绘画
                mFlag = false;
                mSweepAnlge = 0;
                canvas.drawTextOnPath("扫面完成           ", mPath, 60, -60, mPaint);
            }
        } else {
            mPaint.setTextSize(70);
            mPaint.setStrokeWidth(1);
            mPaint.setTextAlign(Align.CENTER);
            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawText("当前测度：" + (int) mSweepAnlge, width / 2,
                    width / 2 + 100, mPaint);
        }
    }

}

如果要实现表盘和刻度一起变化的话只需将如下代码进行修改即可

for (int i = 0; i <= 180;) {
    mPathBiaoPan.addArc(mRectFPanBiao, 180 + i, 2);
    canvas.drawPath(mPathBiaoPan, mPaint);
    i += 18;
}

修改成

for (int i = 0; i <= mSweepAnlge;) {
    mPathBiaoPan.addArc(mRectFPanBiao, 180 + i, 2);
    canvas.drawPath(mPathBiaoPan, mPaint);
    i += 18;
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <com.example.android_canvas_001.BiaoPanView
            android:id="@+id/myview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

    <Button
        android:layout_alignParentBottom="true"
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始"/>

</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {

    private Button btn;
    private BiaoPanView myView4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//      setContentView(new TextView(this));
        btn = (Button) findViewById(R.id.btn);
        myView4 = (BiaoPanView) findViewById(R.id.myview);
        btn.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                if (!myView4.isStart()) {
                    myView4.startDraw();
                    myView4.invalidate();
                    btn.setText("停止");
                } else {
                    myView4.stopDraw();
                    btn.setText("开始");
                }
            }
        });
    }
}
Poter_Zheng
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MFC画仪表盘，无锯齿
01-22
开发工具：Visual Studio 2008 开发语言：C++ 基于MFC进行开发的一个仪表盘程序，不会有锯齿
Android自定义View实现仪表盘
qq_41008818的博客
12-30 1154
Android自定义View实现仪表盘
qml绘制仪表盘控件
t01051的博客
07-22 4356
刚开始上手qt，说实话迷得很啊。。。 不过qt做的界面是真的漂亮，之前在b站看qt官方发布的一些视频，仪表盘是真的好看 今天倒腾了一天，用qml绘制了一个简单的汽车仪表控件，趁现在还热着，先记下来 新建一个空的qml工程 创建工程的时候要注意，工程路径中不能有中文，否则会导致编译失败 创建完成后按例编译运行，确保工程能正常编译，否则等写得差不多却发现无法正常编译那就很尴尬了。。。 再添加一个单独的.qml文件，我们在里面编写自定义的控件，这样在别的工程中只要载入这个qml文件就能
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)
12-03
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)里面有自定义的介绍以及一个已经实现的仪表盘
Android自定义实现绘制时钟表盘
金戈鐡馬
02-25 551
通过实时的计算时针，分针，秒针的角度,然后通知重新绘制画面，我们就看到时间在走动。代码如下:以时针绘制为例。绘制表盘[刻度,数字]
Matlab三维图绘制基础了解
最新发布
05-16
基于Matlab的三维图绘制基础知识内容，可以参考学习理解绘制，含有程序注释理解，方便新手的学习与借鉴。
ios-绘制仪表盘.zip
07-11
绘制仪表盘
python matplotlib绘制三维图的示例
09-27
主要介绍了matplotlib绘制三维图的示例，帮助大家更好的利用python matplotlib绘制图像，感兴趣的朋友可以了解下
CASS3D三维采集绘制房屋及地形.docx
04-22
CASS3D三维采集绘制房屋及地形
wince5.0下C#绘制仪表盘控件及Demo（源码）
10-01
自己写的wince下使用C#双缓冲技术绘图仪表盘可用于汽车仪表、工控仪表，控可以直接拿到windows下用，demo程序需要在wicne5.0下运行，有做嵌入式仪表来拿，有需要帮忙，可以发邮件给我[email protected]，主题...
MFC自绘时间仪表盘
11-10
MFC编写的自绘时间仪表盘程序，编译成功，可以直接运行。
C#做的漂亮的仪表盘。(含源代码)
11-20
C#做的漂亮的仪表盘，拖动滚动条仪表盘自动变化，适合工业控制，此控件用来来显示仪表的状态。各个形状都有！
android绘画一个表盘
03-11
实现用Android 绘画功能绘制一个圆形表盘
C++绘制漂亮仪表盘
05-17
1.编译器VS2015,C++自绘漂亮仪表盘 2.可用于压力、流量、电压、电流、温度等现场数据实时显示，提高可读性. 3.亲测可用
Android 自定义View实现时钟表盘效果
05-28
博文地址：https://blog.csdn.net/jaynm/article/details/106385195
MFC界面库BCGControlBar v32.0 - 对话框、仪表盘控件升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-23 863
亲爱的BCGSoft用户，我们非常高兴地宣布BCGControlBar Professional for MFC和BCGSuite for MFCv32.0正式发布！新版本支持Windows 11、增强功能区简化模式、改进控件外观等，以及其他新功能和改进。需要最新版的可以点击这里【BCG下载】 BCGControlBar Pro for MFC v32.0正式版下载 对话框和表单 1. 添加了一个新的全局标志globalData.m_bAutoPrepareComboListStyles：如果您希望.
MFC界面库BCGControlBar v33.0 - Docking Pane、仪表盘组件升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
06-14 816
BCGControlBar Professional for MFC和BCGSuite for MFC v33.0正式发布！此版本包括对每个显示器 DPI 感知的支持等，欢迎下载相关产品体验~
MFC自绘精美控件
li634471989的博客
06-05 3690
C++自绘漂亮表盘、柱状图、饼图、立体管道，先看效果图 ![仪表盘 源码请加634471989获取 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markd...
新阁上位机开发---手把手教你开发圆盘仪表控件
xiketangAndy的博客
03-16 1859
前言 大家好，我是新阁教育韩工，前几天在网上看到了一个比较好看的环形控件，今天我们来尝试使用GDI+的方式来绘制一下。 创建项目 上位机自定义控件库其实本质上就是一个类库，所以我们在创建项目时直接创建类库项目。 在创建好的类库项目中添加“用户控件”。 实现思路 整个控件其实是由四个部分组成的。第一个部分为一个固定颜色的底圆，第二部分是一个渐变色的扇形，第三部分是一个颜色与窗体背景色相同的上圆，第四部分是显示百分比的文字。最后将这四个部分叠加起来就得到了我们最终想要得到的控件。
axglyph三维图绘制
09-10
很抱歉，根据提供的引用内容，AxGlyph软件似乎并不支持三维图绘制。AxGlyph是一款专业的实用型矢量绘图工具，主要用于二维图形的创建和编辑。它提供了丰富的功能，如所见即所得操作界面、符号面板、格式化图形等，但没有提到支持三维图绘制的相关功能。如果您需要绘制三维图形，可能需要寻找其他专业的三维建模软件或工具来完成。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值