Xamarin.Android实现手写板的功能

目录

  • 1、背景说明
  • 2、实现效果
  • 3、代码实现
    • 3.1 整体思路
    • 3.2 核心绘画类-PaintView.cs
    • 3.3 对话框类-WritePadDialog.cs
    • 3.4 前端实现类-MainActivity
    • 3.5 布局文件
      • 3.5.1 write_pad.xml
      • 3.5.2 activity_main布局文件
  • 4、知识总结
  • 5、代码下载
  • 6、参考资料

1、背景说明

在实际使用过程中，可能会需要在APP中实现手写板的功能，网上比较多的是Android的实现，因此找了下资料，改了改，实现了Xamarin.Android手写板的功能

2、实现效果

实现的效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、代码实现

3.1 整体思路

在Xamarin.Android中实现绘图主要是两种方式Drawable Resources和Canvas，前者可主要进行类似Html的CSS之类的功能，后者则实现比较负责的功能，本次主要用到了后者-Canvas

整个思路是这样的：绘画核心部分通过继承View，重写相关方法，从而实现笔迹的追踪及记录。对话框主要是实现文件的保存等操作功能；前端的界面（即MainActivity）实现图像的展示，具体代码如下：

3.2 核心绘画类-PaintView.cs

绘画的核心方法

public class PaintView : View
{private Bitmap mBitmap; //用于存放展示的内容private Path mPath; //路径private Paint mPaint;//关键类private Canvas mCanvas; //画布private int screenWidth, screenHeight;private float currentX, currentY;public PaintView(Context context,int screenWidth,int screenHeight):base(context){this.screenWidth = screenWidth;this.screenHeight = screenHeight;Initialize();}public PaintView(Context context, IAttributeSet attrs) :base(context, attrs){Initialize();}public PaintView(Context context, IAttributeSet attrs, int defStyle) :base(context, attrs, defStyle){Initialize();}//完成初始化的设置private void Initialize(){mPaint = new Paint();mPaint.AntiAlias = true;mPaint.Color = Color.Black;mPaint.StrokeWidth = 5;mPaint.SetStyle(Paint.Style.Stroke);mPath = new Path();mBitmap=Bitmap.CreateBitmap(screenWidth, screenHeight, Bitmap.Config.Argb8888);mCanvas = new Canvas(mBitmap);}//重写绘画方法protected override void OnDraw(Canvas canvas){base.OnDraw(canvas);canvas.DrawBitmap(mBitmap, 0, 0, null);canvas.DrawPath(mPath, mPaint);}//重写监听的事件public override bool OnTouchEvent(MotionEvent e){float x=e.GetX();float y=e.GetY();switch(e.Action){case MotionEventActions.Down:currentX = x;currentY = y;mPath.MoveTo(currentX, currentY);break;case MotionEventActions.Move: currentX = x;currentY = y;mPath.QuadTo(currentX, currentY,x,y);break;case MotionEventActions.Up:mCanvas.DrawPath(mPath, mPaint);break;}Invalidate();return true;}// 缩放public static Bitmap resizeImage(Bitmap bitmap, int width, int height){int originWidth = bitmap.Width;int originHeight = bitmap.Height;float scaleWidth = ((float)width) / originWidth;float scaleHeight = ((float)height) / originHeight;Matrix matrix = new Matrix();matrix.PostScale(scaleWidth, scaleHeight);Bitmap resizedBitmap = Bitmap.CreateBitmap(bitmap, 0, 0, originWidth,originHeight, matrix, true);return resizedBitmap;}//清空public void clear(){if (mCanvas != null){mPath.Reset();mCanvas.DrawColor(Color.Transparent, PorterDuff.Mode.Clear);Invalidate();}}public Bitmap getPaintBitmap(){return resizeImage(mBitmap, 320, 480);}public Path getPath(){return mPath;}}

3.3 对话框类-WritePadDialog.cs

public delegate void Handler(object sender);public class WritePadDialog : Dialog
{private Android.Content.Context mContext;private FrameLayout mFrameLayout;private PaintView mPaintView;private Button mBtnOK, mBtnClear, mBtnCancel;public event Handler WriteDialogListener;public WritePadDialog(Android.Content.Context context) : base(context){mContext=context;}protected override void OnCreate(Bundle savedInstanceState){base.OnCreate(savedInstanceState);RequestWindowFeature(1);//Window.SetFeatureInt(WindowFeatures.NoTitle,5);SetContentView(Resource.Layout.write_pad);mFrameLayout = FindViewById<FrameLayout>(Resource.Id.tablet_view);// 获取屏幕尺寸DisplayMetrics mDisplayMetrics = new DisplayMetrics();Window.WindowManager.DefaultDisplay.GetMetrics(mDisplayMetrics);int screenWidth = mDisplayMetrics.WidthPixels;int screenHeight = mDisplayMetrics.HeightPixels;mPaintView = new PaintView(mContext, screenWidth, screenHeight);mFrameLayout.AddView(mPaintView);mPaintView.RequestFocus();//保存按钮mBtnOK =FindViewById<Button>(Resource.Id.write_pad_ok);mBtnOK.Click += MBtnOK_Click;//清空按钮mBtnClear = FindViewById<Button>(Resource.Id.write_pad_clear);mBtnClear.Click += (o, e) => { mPaintView.clear(); };//取消按钮mBtnCancel = FindViewById<Button>(Resource.Id.write_pad_cancel);mBtnCancel.Click += (o, e) => { Cancel(); };}private void MBtnOK_Click(object sender, EventArgs e){if (mPaintView.getPath().IsEmpty){Toast.MakeText(mContext, "请写下你的大名", ToastLength.Short).Show();return;}WriteDialogListener(mPaintView.getPaintBitmap());Dismiss();}
}

这儿声明了一个委托delegate，主要是想实现通过这个委托，将生成的图像传递出去。就是对话框中的event（WriteDialogListener）

3.4 前端实现类-MainActivity

protected override void OnCreate(Bundle savedInstanceState){base.OnCreate(savedInstanceState);Xamarin.Essentials.Platform.Init(this, savedInstanceState);SetContentView(Resource.Layout.activity_main);AndroidX.AppCompat.Widget.Toolbar toolbar = FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Resource.Id.toolbar);SetSupportActionBar(toolbar);FloatingActionButton fab = FindViewById<FloatingActionButton>(Resource.Id.fab);fab.Click += FabOnClick;mIVSign = FindViewById<ImageView>(Resource.Id.signImageView);mTVSign = FindViewById<TextView>(Resource.Id.signBtn);mTVSign.Click += MTVSign_Click;}private void MTVSign_Click(object sender, EventArgs e){WritePadDialog mWritePadDialog = new WritePadDialog(this);mWritePadDialog.WriteDialogListener += MWritePadDialog_WriteDialogListener;mWritePadDialog.Show();}private void MWritePadDialog_WriteDialogListener(object sender){mSignBitmap = (Bitmap)sender;createSignFile();mIVSign.SetImageBitmap(mSignBitmap);mTVSign.Visibility = ViewStates.Gone; }//创建文件
private void createSignFile()
{//ByteArrayOutputStream baos = null;MemoryStream baos = null;FileOutputStream fos = null;String path = null;Java.IO.File file = null;try{path = System.IO.Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal),DateTime.Now.ToString("yyyyMMddHHmmss")+ ".jpg");file = new Java.IO.File(path);fos = new FileOutputStream(file);baos = new MemoryStream();//如果设置成Bitmap.compress(CompressFormat.JPEG, 100, fos) 图片的背景都是黑色的mSignBitmap.Compress(Bitmap.CompressFormat.Png, 100, baos);byte[] b = StreamToBytes(baos);if (b != null){fos.Write(b);}}catch (Java.IO.IOException e){e.PrintStackTrace();}finally{try{if (fos != null){fos.Close();}if (baos != null){baos.Close();}}catch (Java.IO.IOException e){e.PrintStackTrace();}}
}private  byte[] StreamToBytes(Stream stream)
{byte[] bytes = new byte[stream.Length];stream.Read(bytes, 0, bytes.Length);// 设置当前流的位置为流的开始stream.Seek(0, SeekOrigin.Begin);return bytes;
}

这儿有个点，在Java中会存在ByteArrayOutputStream 类，但是在Xamarin中不存在，因此需要进行一个转换。

3.5 布局文件

3.5.1 write_pad.xml

write_pad.xml布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayoutandroid:id="@+id/tablet_view"android:layout_width="fill_parent"android:layout_height="300dp" ></FrameLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:background="@android:drawable/bottom_bar"android:paddingTop="4dp" ><Buttonandroid:id="@+id/write_pad_ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="确定" /><Buttonandroid:id="@+id/write_pad_clear"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="清除" /><Buttonandroid:id="@+id/write_pad_cancel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="取消" /></LinearLayout></LinearLayout>

3.5.2 activity_main布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showIn="@layout/activity_main"><ImageViewandroid:layout_width="match_parent"android:layout_height="400dp"android:id="@+id/signImageView" /><TextViewandroid:id="@+id/signBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="请点击我，进行签名~" /></RelativeLayout>

4、知识总结

里面大量的涉及了Canvas的方法，可以参考官网的这篇文章Android Graphics and Animation

5、代码下载

代码下载

6、参考资料

主要参考Android实现手写板和涂鸦功能

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/88534.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vector的模拟实现

vector的模拟实现

什么是vector vector是一个封装了动态大小数组的顺序容器跟任意其它类型容器一样&#xff0c;它能够存放各种类型的对象。 模拟实现 实现前的准备 在实现vector之前&#xff0c;为了和库里的区分开需要将实现的vector放在一个自定义的命名空间里。而且vector需要实现成模版…
阅读更多...
ITIL4—度量和报告实践

ITIL4—度量和报告实践

1. 关于本文 本文为度量和报告实践提供了实用指南&#xff0c;分为五个主要部分&#xff0c;涵盖&#xff1a; 本实践的基本信息本实践相关的流程和活动&#xff0c;及其在服务价值链中的作用参与本实践的组织和人员支持本实践的信息和技术合作伙伴和供应商在本实践中的注意事…
阅读更多...
P1123 取数游戏

P1123 取数游戏

取数游戏 题目描述 一个 N M N\times M NM 的由非负整数构成的数字矩阵&#xff0c;你需要在其中取出若干个数字&#xff0c;使得取出的任意两个数字不相邻&#xff08;若一个数字在另外一个数字相邻 8 8 8 个格子中的一个即认为这两个数字相邻&#xff09;&#xff0c;求…
阅读更多...
React源码解析18（1）------ React.createElement 和 jsx

React源码解析18（1）------ React.createElement 和 jsx

1.React.createElement 我们知道在React17版本之前&#xff0c;我们在项目中是一定需要引入react的。 import React from “react” 即便我们有时候没有使用到React&#xff0c;也需要引入。原因是什么呢&#xff1f; 在React项目中&#xff0c;如果我们使用了模板语法JSX&am…
阅读更多...
性能测试—Jmeter工具

性能测试—Jmeter工具

文章目录 性能测试1. 术语介绍2. 方法3. 应用场景4. 工具&#xff08;Jmeter&#xff09;4.1 介绍4.2 元件和组件4.2.2 元件4.2.1 组件 4.3 作用域4.4 参数化4.5 执行脚本 性能测试 1. 术语介绍 响应时间(Response time)&#xff1a;对请求作出响应所需要的时间。 在互联网上对…
阅读更多...
小型双轮差速底盘机器人实现红外跟随功能

小型双轮差速底盘机器人实现红外跟随功能

1. 功能说明 本文示例将实现R023样机小型双轮差速底盘跟随人移动的功能。在小型双轮差速底盘前方按下图所示安装3个 近红外传感器&#xff0c;制作一个红外线发射源&#xff0c;实现当红外发射源在机器人的检测范围内任意放置或移动时&#xff0c;机器人能追踪该发射源。 2. 电…
阅读更多...
数学建模学习（10）：遗传算法

数学建模学习（10）：遗传算法

遗传算法简介 • 遗传算法&#xff08;Genetic Algorithms&#xff09;是基于生物进化理论的原理发展起来的一种广为 应用的、高效的随机搜索与优化的方法。其主要特点是群体搜索策略和群体中个体之 间的信息交换&#xff0c;搜索不依赖于梯度信息。它是20世纪70年代初期由美国…
阅读更多...
数据结构--栈和队列

数据结构--栈和队列

文章目录 栈的概念和结构栈的实现栈的数据结构栈的初始化和销毁出栈和入栈获取栈顶、大小&#xff0c;判空 队列的概念和结构队列的实现队列的数据结构队列的初始化和销毁队列的插入 队列的删除获取队头和队尾的数据获取队列长度和判空 栈和队列的一些题目1.有效的括号2.用队列…
阅读更多...
【Leetcode】155. 最小栈、JZ31 栈的压入、弹出序列

【Leetcode】155. 最小栈、JZ31 栈的压入、弹出序列

作者&#xff1a;小卢 专栏&#xff1a;《Leetcode》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 155. 最小栈 155. 最小栈 题目描述; 设计一个支持 push &#xff0c;pop &#xff0c;top …
阅读更多...
【配置环境】Linux下安装MySQL

【配置环境】Linux下安装MySQL

目录 一&#xff0c;环境 二&#xff0c;安装步骤 1.使用包管理器安装MySQL 2.配置MySQL的安全选项 3.设置root用户使用密码进行身份验证&#xff08;可选&#xff09; 三&#xff0c;拓展知识 1.如何修改MySQL的密码策略&#xff1f; 2.实现连接MySQL数据库的测试代码…
阅读更多...
docker基础

docker基础

安装docker 参考安装&#xff1a; https://docs.docker.com/engine/install/centos/#installation-methods 开机启动 systemctl enable docker.service systemctl is-enabled docker.service 安装docker compose https://github.com/docker/compose/releases/tag/v2.17.2 …
阅读更多...
Idea报错：Cannot resolve symbol “springframework“以及各种依赖包

Idea报错：Cannot resolve symbol “springframework“以及各种依赖包

问题描述&#xff1a; Idea导入了maven项目之后出现报错Cannot resolve symbol “springframework” &#xff0c;识别不了这个标识或者找不到这个包&#xff0c;明明这些依赖和包都有就是出现报错&#xff0c;并且运行按钮变成灰色 解决办法&#xff1a; 其实这个原因大概率就…
阅读更多...
【rust/egui】(二)看看template的main函数：日志输出以及eframe run_native

【rust/egui】(二)看看template的main函数：日志输出以及eframe run_native

说在前面 rust新手&#xff0c;egui没啥找到啥教程&#xff0c;这里自己记录下学习过程环境&#xff1a;windows11 22H2rust版本&#xff1a;rustc 1.71.1egui版本&#xff1a;0.22.0eframe版本&#xff1a;0.22.0上一篇&#xff1a;这里 开始 首先让我们看看main.rs中有些什么…
阅读更多...
【Linux系统编程】21.echo、env、fork、getpid、getppid

【Linux系统编程】21.echo、env、fork、getpid、getppid

目录 echo PATH SHELL TERM LANG HOME env fork 返回值 getpid getppid 测试代码1 测试结果 测试代码2 测试结果 父子进程相同 父子进程不同 父子进程共享 echo 查看单个环境变量。 PATH 可执行文件的搜索路径。 SHELL 当前Shell。 TERM 当前终端类型。终端…
阅读更多...
山西电力市场日前价格预测【2023-08-14】

山西电力市场日前价格预测【2023-08-14】

日前价格预测 预测明日&#xff08;2023-08-14&#xff09;山西电力市场全天平均日前电价为322.03元/MWh。其中&#xff0c;最高日前电价为366.98元/MWh&#xff0c;预计出现在19: 30。最低日前电价为286.57元/MWh&#xff0c;预计出现在13: 15。 价差方向预测 1&#xff1a; 实…
阅读更多...
【ARM Cache 系列文章 9 番外篇 -- ARMv9 系列 Core 介绍】

【ARM Cache 系列文章 9 番外篇 -- ARMv9 系列 Core 介绍】

文章目录 ARMv9 系列CoreARM Cortex-A510 介绍ARM Cortex-A715ARM Cortex-A720 ARMv9 系列Core 2021年5月Arm公布了其最新3款CPU和3款GPU核心设计&#xff0c;三款新CPU分别是旗舰核心Cortex-X2、高性能核心Cortex-A710、高能效核心Cortex-A510 CPU&#xff0c;三款新GPU核心则…
阅读更多...
《面试1v1》ElasticSearch 集群索引分片

《面试1v1》ElasticSearch 集群索引分片

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…
阅读更多...
【学会动态规划】买卖股票的最佳时机 IV（18）

【学会动态规划】买卖股票的最佳时机 IV（18）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…
阅读更多...
STM32F103C8T6开发笔记1：有线陀螺仪二自由度机械臂

STM32F103C8T6开发笔记1：有线陀螺仪二自由度机械臂

经过之前几天的快速学习&#xff0c;今日尝试组装一款基于MPU6050陀螺仪控制的二自由度机械臂&#xff0c;本文对其使用器材以及基本原理进行介绍~ 组装效果图&#xff1a; 主要元器件如下&#xff1a; 器件个数15 KG以上 舵机3适合舵机的金属夹爪118650电池电源12V1云台支架2…
阅读更多...
WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

WebRTC音视频通话-实现GPUImage视频美颜滤镜效果 在WebRTC音视频通话的GPUImage美颜效果图如下 可以看下 之前搭建ossrs服务&#xff0c;可以查看&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132257196 之前实现iOS端调用ossrs音视频通话&#xff0c;可以查…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023