Android 自定义View手写签名并保存图片功能

GIF压缩有问题,运行很顺滑!!!

1.自定义View——支持设置画笔颜色,画笔宽度,画板颜色,清除画板,检查是否有签名,保存画板图片(复制粘贴可直接使用)

/**
 * Created by YyyyQ on 2020/3/5.
 * 电子签名
 */
public class SignatureView extends View {
 private Context context;
 //X轴起点
 private float x;
 //Y轴起点
 private float y;
 //画笔
 private final Paint paint = new Paint();
 //路径
 private final Path path = new Path();
 //画布
 private Canvas canvas;
 //生成的图片
 private Bitmap bitmap;
 //画笔的宽度
 private int paintWidth = 10;
 //签名颜色
 private int paintColor = Color.BLACK;
 //背景颜色
 private int backgroundColor = Color.WHITE;
 //是否已经签名
 private boolean isTouched = false;
 //签名开始与结束
 public interface Touch {
  void OnTouch(boolean isTouch);
 }
 private Touch touch;
 public SignatureView(Context context) {
  super(context);
  init(context);
 }
 public SignatureView(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  init(context);
 }
 public SignatureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context);
 }
 private void init(Context context) {
  this.context = context;
  //抗锯齿
  paint.setAntiAlias(true);
  //样式
  paint.setStyle(Paint.Style.STROKE);
  //画笔颜色
  paint.setColor(paintColor);
  //画笔宽度
  paint.setStrokeWidth(paintWidth);
 }
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  //创建于view大小一致的bitmap
  bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
  canvas = new Canvas(bitmap);
  canvas.drawColor(backgroundColor);
  isTouched = false;
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  if (touch != null) touch.OnTouch(true);
  switch (event.getAction()) {
   //手指按下
   case MotionEvent.ACTION_DOWN:
    touchDwon(event);
    break;
   //手指移动
   case MotionEvent.ACTION_MOVE:
    isTouched = true;
    if (touch != null) touch.OnTouch(false);
    touchMove(event);
    break;
   //手指抬起
   case MotionEvent.ACTION_UP:
    canvas.drawPath(path, paint);
    path.reset();
    break;
  }
  // 更新绘制
  invalidate();
  return true;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //画此次笔画之前的签名
  canvas.drawBitmap(bitmap, 0, 0, paint);
  // 通过画布绘制多点形成的图形
  canvas.drawPath(path, paint);
 }
 //手指按下的方法
 private void touchDwon(MotionEvent event) {
  //重置绘制路径
  path.reset();
  float downX = event.getX();
  float downY = event.getY();
  x = downX;
  y = downY;
  //绘制起点
  path.moveTo(downX, downY);
 }
 //手指滑动的方法
 private void touchMove(MotionEvent event) {
  //当前的x,y坐标点
  final float moveX = event.getX();
  final float moveY = event.getY();
  //之前的x,y坐标点
  final float previousX = x;
  final float previousY = y;
  //获取绝对值
  final float dx = Math.abs(moveX - previousX);
  final float dy = Math.abs(moveY - previousY);
  if (dx >= 3 || dy >= 3) {
   float cX = (moveX + previousX) / 2;
   float cY = (moveY + previousY) / 2;
   path.quadTo(previousX, previousY, cX, cY);
   x = moveX;
   y = moveY;
  }
 }
 /**
  * 设置画笔颜色
  *
  * @param paintColor
  */
 public void setPaintColor(int paintColor) {
  this.paintColor = paintColor;
  paint.setColor(paintColor);
 }
 /**
  * 设置画笔宽度
  *
  * @param paintWidth
  */
 public void setPaintWidth(int paintWidth) {
  this.paintWidth = paintWidth;
  paint.setStrokeWidth(paintWidth);
 }
 /**
  * 设置画板颜色
  *
  * @param canvasColor
  */
 public void setCanvasColor(int canvasColor) {
  this.backgroundColor = canvasColor;
 }
 /**
  * 清除画板
  */
 public void clear() {
  if (canvas != null) {
   isTouched = false;
   //更新画板
   paint.setColor(paintColor);
   paint.setStrokeWidth(paintWidth);
   canvas.drawColor(backgroundColor, PorterDuff.Mode.CLEAR);
   invalidate();
  }
 }
 /**
  * 获取画板的Bitmap
  *
  * @return
  */
 public Bitmap getBitmap() {
  setDrawingCacheEnabled(true);
  buildDrawingCache();
  Bitmap bitmap = getDrawingCache();
  setDrawingCacheEnabled(false);
  return bitmap;
 }
 /**
  * 是否有签名
  *
  * @return
  */
 public Boolean getSigstatus() {
  return isTouched;
 }
 /**
  * 保存画板
  *
  * @param path 保存到路径
  */
 @SuppressLint("WrongThread")
 public Boolean save(String path) throws IOException {
  Bitmap bitmap = this.bitmap;
  ByteArrayOutputStream bos = new ByteArrayOutputStream();
  bitmap.compress(Bitmap.CompressFormat.PNG, 100, bos);
  byte[] buffer = bos.toByteArray();
  if (buffer != null) {
   File file = new File(path);
   if (file.exists()) {
    file.delete();
   }
   OutputStream outputStream = new FileOutputStream(file);
   outputStream.write(buffer);
   outputStream.close();
   return true;
  } else {
   return false;
  }
 }
}

2.xml布局引用自定义View(注意包名)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <!--自定义view的绝对路径-->
 <com.example.customviewdemo.view.SignatureView
  android:id="@+id/signature"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:background="#fff" />
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:layout_margin="20dp"
  android:orientation="horizontal">
  <Button
   android:id="@+id/clear"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:gravity="center"
   android:text="清除" />
  <Button
   android:id="@+id/isSignature"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_marginLeft="10dp"
   android:layout_weight="1"
   android:gravity="center"
   android:text="是否签名" />
  <Button
   android:id="@+id/save"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_marginLeft="10dp"
   android:layout_weight="1"
   android:gravity="center"
   android:text="保存" />
 </LinearLayout>
</LinearLayout>

3.Activity调用

/**
 * Created by YyyyQ on 2020/3/9.
 */
public class SignatureActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_signature);
    SignatureView signatureView = findViewById(R.id.signature);
    //设置画笔颜色(可以不设置--默认画笔宽度10,画笔颜色黑,背景颜色白)
    signatureView.setPaintColor(Color.BLACK);
    signatureView.setPaintWidth(20);
    signatureView.setCanvasColor(Color.WHITE);
    //清除
    Button clear = findViewById(R.id.clear);
    clear.setOnClickListener(view -> {
      signatureView.clear();
      //设置画笔颜色(可以不设置--默认画笔宽度10,画笔颜色黑,背景颜色白)
      signatureView.setPaintColor(Color.BLACK);
      signatureView.setPaintWidth(20);
      signatureView.setCanvasColor(Color.WHITE);
    });
    //是否含有签名
    Button isSignature = findViewById(R.id.isSignature);
    isSignature.setOnClickListener(view -> {
      if (signatureView.getSigstatus()) {
        Toast.makeText(SignatureActivity.this, "有签名", Toast.LENGTH_SHORT).show();
      } else {
        Toast.makeText(SignatureActivity.this, "无签名", Toast.LENGTH_SHORT).show();
      }
    });
    //保存
    Button save = findViewById(R.id.save);
    save.setOnClickListener(view -> {
      try {
        if (signatureView.save("/sdcard/YyyyQ.png")) {
          Toast.makeText(SignatureActivity.this, "保存成功", Toast.LENGTH_SHORT).show();
        } else {
          Toast.makeText(SignatureActivity.this, "保存失败", Toast.LENGTH_SHORT).show();
        }
      } catch (IOException e) {
        e.printStackTrace();
      }
    });
  }
}

总结

到此这篇关于Android 自定义View手写签名并保存图片的文章就介绍到这了,更多相关Android 自定义View手写签名并保存图片 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android自定义View多种效果解析

    最近项目里涉及到自定义View的东西还是挺多的,所以打算在自定义View上多花点时间,也顺便分享给大家. 先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 [3.重写onMeasure] 4.重写onDraw 1.首先在我们的res/values/目录下建立一个attrs.xml文件,然后在里面声明我们我们需要的自定义属性 我们定义了矩形的颜色,矩形的高度,矩形的宽度3个属性,format是指该属性的取值类型: 一共有:string,col

  • Android自定义View实现加载进度条效果

    上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

  • Android自定义ViewPager实现纵向滑动翻页效果

    抖音几乎已经成为了我们日常生活中使用比较频繁的App,无聊之时或工作之后可以刷一刷短视频来供我们娱乐与放松.看到抖音的视屏切换效果,觉得用ViewPager可以做出一样的效果.想一想之前用的ViewPager都是横向切换的,虽然很经常用,但是从来没实现过竖向的切换效果,说做就做吧. 我们先看一波效果图: 那么,要想实现这样的效果,当然是自定义ViewPager啦.问了一下度娘,看到有这样一种思路: 首先,把Touch事件的x,y坐标做一下交换,从原先的x坐标差值转变成y坐标的差值,正符合了我们手

  • Android自定义view实现仿抖音点赞效果

    前言 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不错,尝试一下. 抖音效果: 话不多说,先上代码: public class Love extends RelativeLayout { private Context mContext; float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度 public Love(Context context) { super(context); initView(context); } public

  • Android UI设计系列之自定义DrawView组件实现数字签名效果(5)

    最近项目中有个新的需求,用户在完交易需要进行输入支付密码付款的时候,要让用户签下自己的签名,提起到数字签名这个东西,感觉有点高大上,后来想想数字签名的原理也不是太复杂,主要实现原理就是利用了View的绘图原理,把用户在屏幕上的手指移动轨迹显示在屏幕上,接着把在屏幕上显示的轨迹View转换成一张图片,最后把图片保存到本地或者上传到服务器... 还是老规矩,首先看一下工程目录吧: public class DrawView extends View { /** * 签名画笔 */ private P

  • Android 自定义View手写签名并保存图片功能

    GIF压缩有问题,运行很顺滑!!! 1.自定义View--支持设置画笔颜色,画笔宽度,画板颜色,清除画板,检查是否有签名,保存画板图片(复制粘贴可直接使用) /** * Created by YyyyQ on 2020/3/5. * 电子签名 */ public class SignatureView extends View { private Context context; //X轴起点 private float x; //Y轴起点 private float y; //画笔 priva

  • Android 自定义view仿支付宝咻一咻功能

    支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会说我还要继承容器view去onLayout()方法中这些子view添加在某个特定的区域,当然

  • Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 自定义View实现多节点进度条功能

    前言 最近项目有一个节点进度条的小需求,完成后,想分享出来希望可以帮到有需要的同学. 真机效果图 自定义View完整代码 开箱即用~,注释已经炒鸡详细了 /** * @description: 节点进度条 * @author: DMingO * @date: 2020/4/15 */ public class PointProcessBar extends View { /** * 未选中时的连线画笔 */ private Paint mLinePaint; /** * 选中时的连线画笔 */

  • Android实现屏幕手写签名

    Android屏幕手写签名的原理就是把手机屏幕当作画板,把用户手指当作画笔,手指在屏幕上在屏幕上划来划去,屏幕就会显示手指的移动轨迹,就像画笔在画板上写字一样.实现手写签名需要结合绘图的路径工具Path,在有按下动作时调用Path对象的moveTo方法,将路径起始点移动到触摸点:在有移动操作时调用Path对象的quadTo方法,将记录本次触摸点与上次触摸点之间的路径:在有移动操作与提起动作时调用Canvas对象的drawPath方法,将本次触摸绘制在画布上. layout/activity_si

  • Android自定义view实现电影票在线选座功能

    先看看电影票在线选座功能实现的效果图: 界面比较粗糙,主要看原理. 这个界面主要包括以下几部分 1.座位 2.左边的排数 3.左上方的缩略图 4.缩略图中的红色区域 5.手指移动时跟随移动 6.两个手指缩放时跟随缩放 主要技术点 1.矩阵Matrix 2.GestureDetector与ScaleGestureDetector 3.Bitmap的一下基本用法 4.这里只需要重写view的onDraw就可实现全部功能 可以发现这个其实没什么难度,主要就是一些位置的计算. 为了能便于理解首先把要用到

  • android实现手写签名功能

    本文实例为大家分享了android手写签名展示的具体代码,供大家参考,具体内容如下 代码简单,就不发demo了,直接贴代码 package com.xx; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android

  • Android实现手写签名

    本文实例为大家分享了Android手写签名的实现方法,产品要求用户可以在app上签协议..所以得弄个手写签名版,参考了一些资料自己写了个PaintView去继承View,实现签名功能. package com.****.*****.widget; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color;

  • Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

    本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

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

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

随机推荐