android使用canvas绘制量角器（kotlin）

最新推荐文章于 2023-08-12 15:06:52 发布
最新推荐文章于 2023-08-12 15:06:52 发布
阅读量1.2k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38613243/article/details/85244713
版权

最近有一个项目需要一个量角的功能，简单说就是能够在屏幕上绘制两条线行成夹角并得到夹角角度，下面来看看具体实现流程：

1、在layout布局中放置一个ImageView(iv_canvas)

2、首先定义默认画笔paint，画笔的几个属性一看就知道是什么意思，这里就不在讲解了：

paint = Paint()
paint!!.strokeWidth = 16f
paint!!.color = Color.RED
paint!!.style = Paint.Style.STROKE

3、为ImageView设置触摸监听事件：

iv_canvas!!.setOnTouchListener(touch)

private val touch = object : View.OnTouchListener {
    override fun onTouch(v: View, event: MotionEvent): Boolean {
         when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                 
            }
            MotionEvent.ACTION_MOVE -> {
                
            }
            MotionEvent.ACTION_UP -> {
                
            }
        return true
    }
}

4、绘制思路：

（1）当手指按下的时候，将按下那一刻的点记为A点坐标；当手指以直线移动的时候，将移动到的点记为B点坐标；当手指移动不在AB这条线上的时候，固定上一个坐标点为B，将移动的点记为C点；当手指抬起保持不变；

（2）有了三个点，开始绘制线，以B为顶点，绘制BA和BC两条线，根据ABC三点坐标形成的三角形计算出B点角度（根据数学三角函数进行计算），计算公式如下：

/**
  * 计算角度
  *
  * @param ax
  * @param ay
  * @param bx
  * @param by
  * @param cx
  * @param cy
  * @return
  */
private fun countAngel(ax: Float, ay: Float, bx: Float, by: Float, cx: Float, cy:Float):Int
{
    val cL2 = (ax - bx) * (ax - bx) + (ay - by) * (ay - by)
    val bL2 = (ax - cx) * (ax - cx) + (ay - cy) * (ay - cy)
    val aL2 = (bx - cx) * (bx - cx) + (by - cy) * (by - cy)
    val cosB = (aL2 + cL2 - bL2) /(2.0*Math.sqrt(cL2.toDouble())*Math.sqrt(aL2.toDouble()))
    return Math.round(Math.toDegrees(Math.acos(cosB))).toInt()
}

（3）接下来绘制弧线，由于Android的坐标系是从左上角开始的，向右为x轴，向下为y轴，而弧线则是以水平方向向右为起点，因此在绘制角度弧线的时候需要先进行偏移角度的计算，只有计算好偏移角度才能将角度的起点设置到AB或者CB线上，这样才能让弧线绘制到两条线之间，计算思路其实很简单，就是以B点为原点，向右为正半轴，顺时针距离最近的那条线（AB或者BC）与x轴正半轴形成的角度，就是我们需要的偏移角度，用到的数学知识有（计算直线的斜率和反三角函数），计算公式如下：

/**
     * 计算偏移角度
     *
     * @param ax
     * @param ay
     * @param bx
     * @param by
     * @param cx
     * @param cy
     * @return
     */
    private fun drawAngle(ax: Float, ay: Float, bx: Float, by: Float, cx: Float, cy: Float): Int {
        var startAngle: Int = 0
        val k1 = (ay - by) / (ax - bx)
        val k2 = (cy - by) / (cx - bx)
        Log.e(TAG, "drawAngle: $k1~~~~$k2")
        if (k1 < 0 && k2 < 0) {
            if (k1 > k2) {
                if (ay < by && cy < by) {
                    startAngle = countOffset(cx, cy, bx, by, 360)
                } else if (ay > by && cy > by) {
                    startAngle = countOffset(cx, cy, bx, by, 180)
                } else if (cy > by && by > ay) {
                    startAngle = countOffset(ax, ay, bx, by, 1)
                } else if (cy < by && ay > by) {
                    startAngle = countOffset(ax, ay, bx, by, 180)
                }
            } else {
                if (ay < by && cy < by) {
                    startAngle = countOffset(ax, ay, bx, by, 360)
                } else if (ay > by && cy > by) {
                    startAngle = countOffset(ax, ay, bx, by, 180)
                } else if (cy > by && by > ay) {
                    startAngle = countOffset(cx, cy, bx, by, 180)
                } else if (cy < by && ay > by) {
                    startAngle = countOffset(cx, cy, bx, by, 1)
                }
            }
        } else if (k1 > 0 && k2 > 0) {
            if (k1 > k2) {
                if (ay < by && cy < by) {
                    startAngle = countOffset(cx, cy, bx, by, 180)
                } else if (ay < by && cy > by) {
                    startAngle = countOffset(ax, ay, bx, by, 180)
                } else if (cy < by && ay > by) {
                    startAngle = countOffset(ax, ay, bx, by, 1)
                } else if (cy > by && cy > by) {
                    startAngle = countOffset(cx, cy, bx, by, 1)
                }
            } else {
                if (ay < by && cy < by) {
                    startAngle = countOffset(ax, ay, bx, by, 180)
                } else if (ay < by && cy > by) {
                    startAngle = countOffset(cx, cy, bx, by, 1)
                } else if (cy < by && ay > by) {
                    startAngle = countOffset(cx, cy, bx, by, 180)
                } else if (cy > by && cy > by) {
                    startAngle = countOffset(ax, ay, bx, by, 1)
                }
            }
        } else if (k1 > 0 && k2 < 0) {
            if (ay > by && by > cy) {
                startAngle = countOffset(cx, cy, bx, by, 1)
            } else if (ay < by && cy > by) {
                startAngle = countOffset(cx, cy, bx, by, 180)
            } else if (ay > by && cy > by) {
                startAngle = countOffset(ax, ay, bx, by, 1)
            } else if (by > ay && by > cy) {
                startAngle = countOffset(ax, ay, bx, by, 180)
            }
        } else if (k1 < 0 && k2 > 0) {
            if (ay > by && by > cy) {
                startAngle = countOffset(ax, ay, bx, by, 180)
            } else if (ay < by && cy > by) {
                startAngle = countOffset(ax, ay, bx, by, 1)
            } else if (ay > by && cy > by) {
                startAngle = countOffset(cx, cy, bx, by, 1)
            } else if (by > ay && by > cy) {
                startAngle = countOffset(cx, cy, bx, by, 180)
            }

        }
        return startAngle
    }


private fun countOffset(x: Float, y: Float, Bx: Float, By: Float, flag: Int): Int {
        val tanL = ((y - By) / (x - Bx)).toDouble()
        var angel = Math.round(Math.toDegrees(Math.atan(tanL))).toInt()
        Log.e(TAG, "drawAngle: $angel")
        if (flag == 180) {
            angel += 180
        } else if (flag == -180) {
            angel = 180 - angel
        } else if (flag == -360) {
            angel = 360 - angel
        } else if (flag == -1) {
            angel = -angel
        } else if (flag == 360) {
            angel += 360
        }
        Log.e(TAG, "drawAngle: $angel")
        return angel
    }

（4）然后在弧线上绘制角度文字即可，文字是在弧线正上方，所以也有偏移角度，这里的偏移角是以AB或者BC为起点进行偏移的，因此偏移角只要相对线偏移B角度除以2再减去差不多一半的文字角度即可。

（5）简单的绘制，到上一步就可以了，但是，当我们再次按下手指 并移动的时候，你有没有想过还需要什么效果？那就是当手指按下的时候，我们要获取到距离手指最近的点（A/B/C）并进行移动改变绘制的线和角度。

（6）最后，将绘制的放到ImageView中即可。以上的这些就是绘制的基本思路。

5、具体绘制：

（1）MotionEvent.ACTION_DOWN

if (isFirst) {
                        if (baseBitmap == null) {
                            baseBitmap = Bitmap.createBitmap(iv_canvas!!.width,
                                    iv_canvas!!.height, Bitmap.Config.ARGB_8888)
                            canvas = Canvas(baseBitmap!!)
                        }

                        startX = event.x
                        startY = event.y
                        Ax = event.x
                        Ay = event.y
                        Bx = event.x
                        By = event.y
                    } else {
                        val x = event.x
                        val y = event.y

                        val aL = (x - Ax) * (x - Ax) + (y - Ay) * (y - Ay)
                        val bL = (x - Bx) * (x - Bx) + (y - By) * (y - By)
                        val cL = (x - Cx) * (x - Cx) + (y - Cy) * (y - Cy)
                        var minL = if (aL > bL) bL else aL
                        minL = if (minL > cL) cL else minL
                        if (minL == cL) {
                            Cx = x
                            Cy = y
                            minFlag = 3
                        } else if (minL == bL) {
                            Bx = x
                            By = y
                            minFlag = 2
                        } else if (minL == aL) {
                            Ax = x
                            Ay = y
                            minFlag = 1
                        }
                    }

（2）MotionEvent.ACTION_MOVE

val stopX = event.x
                    val stopY = event.y
                    if (isFirst) {
                        if (stopY - startY != 0f && stopY - Ay != 0f) {
                            if (Math.round((stopX - startX) / (stopY - startY)) == Math.round((stopX - Ax) / (stopY - Ay))) {
                                Bx = stopX
                                By = stopY
                            } else {
                                Cx = stopX
                                Cy = stopY
                            }
                        }

                        startX = event.x
                        startY = event.y

                    } else {
                        if (minFlag == 1) {
                            Ax = stopX
                            Ay = stopY
                        } else if (minFlag == 2) {
                            Bx = stopX
                            By = stopY
                        } else if (minFlag == 3) {
                            Cx = stopX
                            Cy = stopY
                        }

                    }
                    // 绘制夹角线
                    canvas!!.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
                    paint!!.strokeWidth = 16f
                    paint!!.color = resources.getColor(R.color.theme)
                    paint!!.pathEffect = null
                    canvas!!.drawLine(Ax, Ay, Bx, By, paint!!)
                    canvas!!.drawLine(Bx, By, Cx, Cy, paint!!)

                    // 绘制夹角弧线
                    paint!!.strokeWidth = 8f
                    paint!!.pathEffect = DashPathEffect(floatArrayOf(8f, 8f), 0f)
                    mAngel = countAngel(Ax, Ay, Bx, By, Cx, Cy)
                    val offset = drawAngle(Ax, Ay, Bx, By, Cx, Cy).toFloat()
                    val offsetPx = 200f
                    val oval = RectF(0f, 0f, offsetPx, offsetPx)
                    oval.offset(Bx - offsetPx/2, By - offsetPx/2)
                    canvas!!.drawArc(oval, offset, mAngel.toFloat(), false, paint!!)

                    // 绘制弧线上角度文字
                    paint!!.textSize = 30f
                    paint!!.color = resources.getColor(R.color.bn_red_dark)
                    paint!!.pathEffect = DashPathEffect(floatArrayOf(8f, 0f), 0f)
                    paint!!.strokeWidth = 3f
                    val path = Path()
                    path.addArc(oval, offset + mAngel.toFloat() / 2-10, 50f)
                    path.addOval(oval, Path.Direction.CW);
                    canvas!!.drawTextOnPath(mAngel.toString() + "°", path, 0f, -50f, paint)

                    iv_canvas!!.setImageBitmap(baseBitmap)

（3）MotionEvent.ACTION_UP（可不写）

val x = event.x
                    val y = event.y
                    if (minFlag == 1) {
                        Ax = x
                        Ay = y
                    } else if (minFlag == 2) {
                        Bx = x
                        By = y
                    } else if (minFlag == 3) {
                        Cx = x
                        Cy = y
                    }
                    isFirst = false

以上这些就是整个绘制过程，希望对你我都有所帮助！

Xiazhenghang
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android-实现在Kotlin中更方便使用canvas
08-13
实现在Kotlin中更方便使用canvas
Android开发量角器，Paint绘制量角器，使用传感器获测量角度，使用相机预览。
11-13
Android开发量角器，Paint绘制量角器，使用传感器获测量角度，使用相机预览。
绘制量角器
01-24
能够在图片上绘制角度并跟随手指移动改变角度，实现测量图片内物品角度的功能
canvas 画一个圆上有 旋转角度 的直线
Venus 的博客
07-23 2722
1、功能展示 2、xml 文件 3、代码文件 1、功能展示 2、xml 文件 activity_main.xml xmlns:tools=&quot;http://schemas.android.com/tools&quot; android:layout_width=&quot;match_parent&quot; android:layout_height
自定义控件（二）Paint，Canvas 基础用法 - drawBitmap()，drawText() 详解
热门推荐
Ruffian-痞子
05-16 1万+
本篇博客继续学习 Paint 和 Canvas 的基础用法，上一篇博客学习了基础API使用（ 基础几何图形，Path 路径 ），接下来学习 绘制文本 和 绘制图片 上一篇文章，没看的有必要先了解一下： 自定义控件（一）Paint，Canvas 基础用法 - Path函数大全，Canvas绘制基本几何图形 canvas 绘制 图片Bitmap drawBitmap void drawB...
android 自定义View：量角器的实现
johndon_forever的博客
09-17 648
一 天产品需求说需要实现一个量角器的功能：通过打开后摄，然后手动调节两条指针可以显示指针间的夹角。 一接到这个需求，脑海里面抛出几个问题：夹角怎么计算？还有那个两条指针滑动时跟随手指怎么变化怎么实现？ 哎，不管了，先实现从简单到开始实现吧，先拆分任务： 1、实现相机的预览功能。 2、指针跟随手指的变化来移动...
HenCoder Android 开发进阶：自定义 View 1-3 文字的绘制
weixin_33796205的博客
07-24 450
这期是 HenCoder 自定义绘制的第三期：文字的绘制。 之前的内容在这里：HenCoder Android 开发进阶 自定义 View 1-1 绘制基础HenCoder Android 开发进阶 自定义 View 1-2 Paint 详解 如果你没听说过 HenCoder，可以先看看这个：HenCoder：给高级 Android 工程师的进阶手册 简介 上期的 Paint 详解里已经说过，文...
autojs量角器-相机背景
snailuncle2的博客
02-23 1399
以相机为背景, 绘制半圆, 手指触摸, 测量角度
Android实战开发-Kotlin教程（布局篇 3.2）
aaaym的博客
07-08 1160
上一篇我们对Android的布局方式有了一定的了解，本篇我们综合利前面学习的知识完整的搭建一个登录界面 创建完LoginActivity后，我们来到activity_login.xml布局文件中开始搭建布局 最外层布局我们采用RelativeLayout的相对布局，首先，是顶部放置对应App的logo，因为是图片显示，我们采用ImageView的组件显示，如下图所示 接下来，我们利用线性布局LinerLayout搭建一个用户和密码输入的区域 这里先创建一个垂直方向的线性布局，让用户名、密码以及提交按钮按
Android自定义控件开发入门与实战（12）Canvas
RikkaTheWorld
06-15 796
第九章、Cnavas与图层 获取Canvas对象的方法 方法一：重写onDraw()、dispatchDraw()函数 一般在自定义View时，我们都会重写onDraw()、dispatchDraw()函数。先来看下他们的定义： @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas)...
直尺和半圆尺子
05-04
这是一个直尺和半圆尺子的源代码，不妨可以看看
Android使用Canvas绘制圆形进度条效果
01-05
Android自定义控件经常会用到Canvas绘制2D图形，在优化自己自定义控件技能之前，必须熟练掌握Canvas绘图机制。本文从以下三个方面对Canvas绘图机制进行讲解： 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先...
Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
08-29
主要介绍了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法,结合实例形式分析了Android自定义view绘制圆角矩形的相关方法与使用技巧,需要的朋友可以参考下
android 使用canvas把矩形图片变成圆角矩形显示
07-12
android 使用canvas把矩形图片变成圆角矩形显示 参考网址：http://blog.csdn.net/rhljiayou/article/details/7212620
自定义View学习3：canvas绘制文字
ibelieveyouwxy的专栏
05-21 655
1canvas绘制文字的方式 canvas的文字绘制方式有三种：drawText（），drawTextRun（），drawTextOnPath（）。 drawText（String text,float x,float y,Paint paint） drawText（）是canvas 最基本的绘制方法：给出文字的内容和位置，Canvas按照要求去绘制文字，text是文字内容，x和y是文字的...
Canvas绘制导线测量2d简化巷道示意图
最新发布
xccjun的博客
08-12 84
实现线段端点显示，输出点序号、水平角、并根据角度和距离上一个点的距离计算下一个点的坐标。
HTML5 canvas画布（四）
错位竞争，单点突破。
06-25 4653
arcTo用法用法：arcTo(x1, y1, x2, y2, radius) 说明：arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当
Canvas -- 角度与弧度
weixin_30535565的博客
05-20 486
角度 直观说：角度也就是数学中的多少度。如 60°，180°，90° 其他表示方法： 90° 即 π / 2。 60° 即 π / 3. 180° 即 π。 Canvas 中的弧度。 同角度一样。计算公式：假设当前弧度为 deg，( js 中的 π 用 Math.PI 表示) ** 弧度 = deg * Math.PI / 180 ** 以下canvas实例：通过角度去计算圆中某一点...
Android Canvas方法总结
weixin_30784501的博客
07-22 280
前言：当我们进行自定义控件的时候，为了实现更多更炫酷的效果，我们通常都需要在Canvas（画布） 上绘制各种东西。而谷歌也提供了很多的API方法，能让我们更方便更快捷的实现想要的效果。 Canvas public class Canvas extends Object java.lang.Object ...
android canvas绘制60dp的圆角矩形图片
05-25
可以使用以下代码绘制一个60dp圆角矩形的图片： ```java // 计算60dp对应的像素值 int radius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, getResources().getDisplayMetrics()); // 创建一个Bitmap对象 Bitmap bitmap = Bitmap.createBitmap(radius, radius, Bitmap.Config.ARGB_8888); // 创建一个Canvas对象，并将其与Bitmap对象关联 Canvas canvas = new Canvas(bitmap); // 创建一个RectF对象，用于定义矩形的边界 RectF rect = new RectF(0, 0, radius, radius); // 创建一个Paint对象，并设置其为抗锯齿模式 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 设置画笔的颜色为白色 paint.setColor(Color.WHITE); // 在Canvas上绘制圆角矩形 canvas.drawRoundRect(rect, radius / 6, radius / 6, paint); // 将Bitmap对象转换成Drawable对象 Drawable drawable = new BitmapDrawable(getResources(), bitmap); ``` 在上面的代码中，我们首先通过`TypedValue.applyDimension()`方法将60dp转换成像素值，然后创建一个Bitmap对象，并将其与Canvas对象关联。接着，我们创建一个包含矩形边界的RectF对象，用于定义圆角矩形的形状。然后，我们创建一个Paint对象，并将其设置为抗锯齿模式，设置画笔的颜色为白色。最后，在Canvas上绘制圆角矩形，并将Bitmap对象转换成Drawable对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值