Android自定义有限制区域的图例角度自识别涂鸦工具类完结篇

目录
  • 引言
  • 总结

引言

上文Android：实现一个自定义有限制区域的图例（角度自识别）涂鸦工具类（中）中我们已经实现了在复杂的异形区域中涂鸦，最后生成图片保存的功能。这篇我们将继续升华，在此基础上实现涂鸦图片方向和手势方向保持一致的功能。

首先涂鸦如果要使用自定义的图片进行涂色，我们要如何实现呢？其实在Paint中提供了一个着色器属性，我们可以根据需求设置对应的着色器。

//设置着色器
public Shader setShader(Shader shader) {
    // If mShader changes, cached value of native shader aren't valid, since
    // old shader's pointer may be reused by another shader allocation later
    if (mShader != shader) {
        mNativeShader = -1;
        // Release any native references to the old shader content
        nSetShader(mNativePaint, 0);
    }
    // Defer setting the shader natively until getNativeInstance() is called
    mShader = shader;
    return shader;
}

着色器的实现类，很明显我们需要的是BitmapShader：

第一个参数是bitmap，第二三个参数分别为X、Y轴的平铺模式：重复、镜像等等，我们这里使用重复：

//设置着色器
paint.shader = BitmapShader(
    bitmap,
    Shader.TileMode.REPEAT,
    Shader.TileMode.REPEAT
)

有了以上的设置，根据自定义图片在限定区域内可以随意涂鸦，那我们要怎么自动识别方向呢？此时的涂鸦图片都是按照水平方向重复平铺：

由此我们需要解决两个点：

  • 我们需要得到一个最终角度
  • 我们需要将图片旋转某个角度

上文提到过设置着色器需要传入一个bitmap，那么我们可以再次对图片进行一个角度的旋转，然后再将旋转后的图片传入着色器就能达到效果，第二个问题解决了。那么第一个问题，如何得到这个角度呢？

还是得通过触摸事件，试想，如果我们能确定这一笔的大概角度，也就是总体趋势的角度，问题就得到了解决。所以，这里采取获取第一个点和最后一个点两者形成的角度来计算角度：

//通过反正切得到角度
val first = allPoints[0] //第一个点
val last = allPoints[allPoints.size-1] //最后一个点
val angle = atan2((last.y - first.y).toDouble(),(last.x - first.x).toDouble()) * (180 / Math.PI)

因为所有的点我们都是是通过容器收集的，所以这里直接拿到对应的那条线的第一个点和最后一个点获取角度，在设置着色器的时候使用Matrix工具对图片进行角度旋转。

//旋转+缩放
val dstbmp = Bitmap.createBitmap(
    bmp, 0, 0, bmp.width, bmp.height,
    Matrix().apply {
        // 缩放原图
        postScale(0.5f, 0.5f)
        // 向左旋转45度，参数为正则向右旋转
        postRotate(defaultDegrees, bmp.width / 2f, bmp.height / 2f)
    }, true
)
//设置着色器
paint.shader = BitmapShader(
    dstbmp,
    Shader.TileMode.REPEAT,
    Shader.TileMode.REPEAT
)

如果图例过大可以根据比例调用postScale(0.5f, 0.5f)进行缩放，这里缩小一半，根据实际情况调整，到此整个功能也就完成了。

总结

总的来说，功能的实现还是比较简单，最主要的是找到思路和一些逻辑顺序。首先需要一个能签名的自定义类，还需要自定义一个遮罩的ViewGroup,防止签名超出规定区域。根据用户的触摸将一个按下和抬起规定为一条线，本地维护容器来收集线条、点、各类画笔。再根据每条线的起始点计算出这条线的总体角度，用于绘制图例时图例的旋转方向设置。

以上就是Android自定义有限制区域的图例角度自识别涂鸦工具类完结篇的详细内容，更多关于Android区域识别涂鸦工具类的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Android实现签名涂鸦手写板

    Android实现签名涂鸦手写板

    本文实例为大家分享了Android实现签名涂鸦手写板的具体代码,供大家参考,具体内容如下 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:

  • AndroidStudio实现能在图片上涂鸦程序

    AndroidStudio实现能在图片上涂鸦程序

    本文实例为大家分享了AndroidStudio实现能在图片上涂鸦的具体代码,供大家参考,具体内容如下 一.内容:设计一个能在图片上涂鸦的程序 二.实现 1. 布局文件activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    

  • android 实现在照片上绘制涂鸦的方法

    这个应该是简易版的美图秀秀(小伙伴们吐槽:你这也叫简易版的??我们看着怎么不像啊--).好吧,只是在图片上绘制涂鸦,然后保存. 一.选择图片 这个道长有必要说一下,在绘制涂鸦时,笔画会根据设置ImageView的大小和屏幕的尺寸(不是像素)产生误差.这个道长暂时还没有找到解决方法,只是规避了一下. 把ImageView设置为全屏,布局文件代码如下 <?xml version="1.0" encoding="utf-8"?> <FrameLayout

  • android中实现在ImageView上随意画线涂鸦的方法

    我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完),将所画的线(点的集合)保存在一个集合中 3.重写onDraw方法,利用canvas和所记录下的线和点画出线来 可能我讲的十分笼统,下面来看看实际的代码吧 //代表ImageView上的一点 public class ViewPoint { float x; float y; } //表示一条线

  • Android自定义有限制区域图例角度自识别涂鸦工具类中篇

    目录 引言 总结 引言 上文Android:实现一个自定义有限制区域的图例(角度自识别)涂鸦工具类(上)中我们已经实现了自定义View签名的功能,包含撤回.清除方法.但我们最终要实现的功能还不止如此,这篇我们就来说说给限制区域内签名的实现过程. 试想,既然是自定义View了,那么如果要限制用户在指定区域内签名,最好的办法不是在触摸的时候通过坐标点的判断添加一些拦截吗?没错,起初我也是这么想的,但是再看到限制区域的图形后,我陷入了深深的沉思...... 没错,就是这样的图,这还是其中的一张,后期指

  • Android自定义有限制区域的图例角度自识别涂鸦工具类完结篇

    目录 引言 总结 引言 上文Android:实现一个自定义有限制区域的图例(角度自识别)涂鸦工具类(中)中我们已经实现了在复杂的异形区域中涂鸦,最后生成图片保存的功能.这篇我们将继续升华,在此基础上实现涂鸦图片方向和手势方向保持一致的功能. 首先涂鸦如果要使用自定义的图片进行涂色,我们要如何实现呢?其实在Paint中提供了一个着色器属性,我们可以根据需求设置对应的着色器. //设置着色器 public Shader setShader(Shader shader) { // If mShader

  • Android自定义View实现打钩动画功能

    Android自定义View实现打钩动画功能

    先上效果图 动图 静态图 1. 回顾 [Android自定义View:一个精致的打钩小动画]上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码,虽然思路还在,但是部分代码还是不能一下子的看得明白... 我的天,这得立马重构啊~ 恰好,有个简友 ChangQin 模仿写了一下这个控件,我看了后觉得我也可以这样实现一下. 2. 深思 关于控件绘制的思路,可以去看看 上一篇文章,这里就不再分析了.这里先来分析一下上一篇文章里面,控件里面的一些顽处

  • Android自定义View绘制的方法及过程（二）

    上一篇<Android 自定义View(一) Paint.Rect.Canvas介绍>讲了最基础的如何自定义一个View,以及View用到的一些工具类.下面讲下View绘制的方法及过程 public class MyView extends View { private String TAG = "--------MyView"; private int width, height; public MyView(Context context, AttributeSet a

  • Android自定义相机、预览区域裁剪

    Android自定义相机、预览区域裁剪

    本文实例为大家分享了Android自定义相机,预览区域裁剪的具体代码,供大家参考,具体内容如下 写法一: 预览区域裁剪,方法调用: //按照比例进行裁剪头像区域 Bitmap   resultBitmap = getScaleImage(resultBitmap,  (int) cuttingAreaView.getX(),   (int) cuttingAreaView.getY(),    cuttingAreaView.getWidth(),    cuttingAreaView.getH

  • Android自定义View仿IOS圆盘时间选择器

    Android自定义View仿IOS圆盘时间选择器

    通过自定义view实现仿iOS实现滑动两端的点选择时间的效果 效果图 自定义的view代码 public class Ring_Slide2 extends View { private static final double RADIAN = 180 / Math.PI; private int max_progress; // 设置最大进度 private int cur_progress; //设置锚点1当前进度 private int cur_progress2; //设置锚点2进度 p

  • Android 自定义圆形带刻度渐变色的进度条样式实例代码

    Android 自定义圆形带刻度渐变色的进度条样式实例代码

    效果图 一.绘制圆环 圆环故名思意,第一个首先绘制是圆环 1:圆环绘制函数 圆环API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明 oval:圆弧所在的椭圆对象. startAngle:圆弧的起始角度. sweepAngle:圆弧的角度. useCenter:是否显示半径连线,true表示显示圆弧与圆心的半径连线,false表示不

  • Android自定义View实现仿驾考宝典显示分数效果(收藏)

    Android自定义View实现仿驾考宝典显示分数效果(收藏)

    小编最近发现,一些炫酷的view效果,通过需要自定义view和属性动画结合在一起,才能更容易的实现. 实现的效果图如下: 所用的知识有: (1)自定义View中的 path ,主要用来绘制指示块. (2)属性动画-ValueAnimator,并设置属性动画的监听器. (3)根据属性动画是否结束的标志,决定是否绘制分数对应的描述文本内容. 实现步骤: 继承自View,在构造函数中获取自定义属性和初始化操作(初始化画笔) private void obtainAttrs(Context contex

  • Android 自定义阴影效果详解及实例

    Android 自定义阴影效果详解及实例

    Android 自定义阴影效果详解及实例 Android5.X中,Google为其增加了两个属性 android:elevation=" " 与 android:translationZ=" ",对应垂直方向上的高度变化.系统会自动增加阴影效果. 在TabLayout中增加android:elevation=" 8dp" ,效果如下: 箭头指向的就是系统为我们默认提供,结果差强人意.那我们是不是可以自定义阴影,不使用系统提供的. 自定义阴影效果

  • Android自定义View实现多边形统计图示例代码

    Android自定义View实现多边形统计图示例代码

    前言   最近利用空闲时间学习了自定义View的一些知识,为了巩固,写了一个小东西,顺便分享出来,下面话不多说了,来一起看看详细的介绍吧. 简介   一个多边形统计图.边数,每个方向的值,每个点的文字等等都是可以设置的. 下面就来分析一下这个自定义View 这个view由以下几个部分组成 M层N边形 中心到各顶点的连线 填充区域 文字 @Override protected void onDraw(Canvas canvas) { if (!canDraw()) { return; } canv

随机推荐