Android实现屏幕手写签名

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

layout/activity_signature.xml界面布局代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:padding="5dp">

 <ScrollView
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical">

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
     android:id="@+id/btn_add_signature"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:text="开始签名"
     android:textColor="@color/black"
     android:textSize="17sp" />

    <Button
     android:id="@+id/btn_reset_signature"
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="1"
     android:text="重置"
     android:textColor="@color/black"
     android:textSize="17sp" />

    <Button
     android:id="@+id/btn_revoke_signature"
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="1"
     android:text="回退"
     android:textColor="@color/black"
     android:textSize="17sp" />

    <Button
     android:id="@+id/btn_end_signature"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:text="结束签名"
     android:textColor="@color/black"
     android:textSize="17sp" />
   </LinearLayout>

   <com.fukaimei.touchevent.widget.SignatureView
    android:id="@+id/view_signature"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/white"
    app:paint_color="#0000aa"
    app:stroke_width="3" />

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
     android:id="@+id/btn_save_signature"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:text="保存图片文件"
     android:textColor="@color/black"
     android:textSize="17sp" />
   </LinearLayout>

   <ImageView
    android:id="@+id/iv_signature_new"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/white"
    android:scaleType="fitCenter" />
  </LinearLayout>
 </ScrollView>

</LinearLayout>

SignatureActivity.java逻辑代码如下:

package com.fukaimei.touchevent;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;

import com.fukaimei.touchevent.filedialog.dialog.FileSaveFragment;
import com.fukaimei.touchevent.util.BitmapUtil;
import com.fukaimei.touchevent.widget.SignatureView;

public class SignatureActivity extends AppCompatActivity implements
  OnClickListener, FileSaveFragment.FileSaveCallbacks {
 private SignatureView view_signature;
 private ImageView iv_signature_new;
 private Bitmap mBitmap;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_signature);
  view_signature = (SignatureView) findViewById(R.id.view_signature);
  iv_signature_new = (ImageView) findViewById(R.id.iv_signature_new);
  findViewById(R.id.btn_add_signature).setOnClickListener(this);
  findViewById(R.id.btn_end_signature).setOnClickListener(this);
  findViewById(R.id.btn_reset_signature).setOnClickListener(this);
  findViewById(R.id.btn_revoke_signature).setOnClickListener(this);
  findViewById(R.id.btn_save_signature).setOnClickListener(this);
 }

 @Override
 public void onClick(View v) {
  if (v.getId() == R.id.btn_save_signature) {
   if (mBitmap == null) {
    Toast.makeText(this, "请先开始然后结束签名", Toast.LENGTH_LONG).show();
    return;
   }
   FileSaveFragment.show(this, "jpg");
  } else if (v.getId() == R.id.btn_add_signature) {
   view_signature.setDrawingCacheEnabled(true);
  } else if (v.getId() == R.id.btn_reset_signature) {
   view_signature.clear();
  } else if (v.getId() == R.id.btn_revoke_signature) {
   view_signature.revoke();
  } else if (v.getId() == R.id.btn_end_signature) {
   if (view_signature.isDrawingCacheEnabled() != true) {
    Toast.makeText(this, "请先开始签名", Toast.LENGTH_LONG).show();
   } else {
    mBitmap = view_signature.getDrawingCache();
    iv_signature_new.setImageBitmap(mBitmap);
    mHandler.postDelayed(mResetCache, 100);
   }
  }
 }

 private Handler mHandler = new Handler();
 private Runnable mResetCache = new Runnable() {
  @Override
  public void run() {
   view_signature.setDrawingCacheEnabled(false);
   view_signature.setDrawingCacheEnabled(true);
  }
 };

 @Override
 public boolean onCanSave(String absolutePath, String fileName) {
  return true;
 }

 @Override
 public void onConfirmSave(String absolutePath, String fileName) {
  String path = String.format("%s/%s", absolutePath, fileName);
  BitmapUtil.saveBitmap(path, mBitmap, "jpg", 80);
  Toast.makeText(this, "成功保存图片文件:" + path, Toast.LENGTH_LONG).show();
 }

}

Demo程序运行效果界面截图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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实现屏幕手写签名

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

  • 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实现手写签名功能

    本文实例为大家分享了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

  • 微信小程序canvas实现手写签名

    本文实例为大家分享了微信小程序canvas实现手写签名的具体代码,供大家参考,具体内容如下 很多时候,程序中需要用到签名的功能,附上源码(微信小程序) .wxml <view class="canvasBox">       <view class="canvasTitle">请签名:</view>       <view class="canvasContent">         <vie

  • vue+canvas实现移动端手写签名

    本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码,供大家参考,具体内容如下 <template> <div class="sign"> <div class="header"> <i class="el-icon-arrow-left backImg" @click="goBack"></i> <span class="title&

  • 基于canvas实现手写签名(vue)

    最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听.当监听touchstart事件被触发时,我们开始触发canvas里的beginPath事件并且设置moveTo原始点.当监听touchmove事件则去不断去触发lineTo事件,最后stroke(). demo里还有清除签名和保存签名的功能,分别对应了clearR

  • vue使用canvas实现移动端手写签名

    基于vue使用canvas实现移动端手写签名! 之前自己开发有这么一个需求,需要实现手写签名,然后以图片的形式保存生成图片的base64数据流 .自己在网上找了一堆,都不是很完美.然后参考网上的加自己的优化和修改做了一版.希望有需要的朋友可以拿来直接用. HTML部分: <template> <div class="hello" > <div>请输入您的签名7:</div> <canvas id="canvas"

  • 微信小程序实现简单手写签名组件的方法实例

    目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入

  • 使用vue实现手写签名功能

     个人实现截图: 安装: npm install vue-esign --save 使用: 1.在main.js中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 2.在页面中引用 <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidt

随机推荐