实现简单的手写涂鸦板(demo源码)

     在一些软件系统中,需要用到手写涂鸦的功能,然后可以将涂鸦的结果保存为图片,并可以将“真迹”通过网络发送给对方。这种手写涂鸦功能是如何实现的了?最直接的,我们可以使用Windows提供的GDI技术或GDI+技术来实现绘图功能。但是,要实现一个如此简单的涂鸦板,也不是那么容易的事情。幸运的是,我们可以直接使用OMCS提供的内置集成了这种功能的一个WinForm控件HandwritingPanel

      HandwritingPanel控件的主要接口如下图所示:

        /// <summary>
        /// 设置画笔颜色。
         /// </summary>
        Color PenColor {set;}

        /// <summary>
        /// 设置画笔粗细。
         /// </summary>
        float PenWidth {set;}

        /// <summary>
        /// 清空画板。
         /// </summary>
        void Clear();

        /// <summary>
        /// 获取涂鸦的结果(位图)。
         /// </summary>
        Bitmap GetHandWriting();

      将HandwritingPanel控件从工具箱拖到你的UI上,可以通过PenColor和PenWidth属性设置画笔的颜色和粗细。运行起来后,就可以在控件的表面进行涂鸦和手写了。     

      如果需要清空手写板,则调用Clear方法。

      当手写结束的时候,则调用GetHandWriting方法得到手写的结果,并保存为位图。位图的大小即是HandwritingPanel控件的尺寸。

      OK,下面我们就写了一个使用HandwritingPanel来实现手写涂鸦板的demo,demo的主要代码如下所示:     

    public partial class HandwritingForm : Form
    {
        private Color currentColor = Color.Red;
        private List<float> penWidthList = new List<float>();
        private Bitmap currentImage;
        public Bitmap CurrentImage
        {
            get { return currentImage; }
        }

        public HandwritingForm()
        {
            InitializeComponent();

            this.handwritingPanel1.PenColor = this.currentColor; //设置画笔颜色

              this.penWidthList.Add(2);
            this.penWidthList.Add(4);
            this.penWidthList.Add(6);
            this.penWidthList.Add(8);
            this.penWidthList.Add(10);
            this.comboBox_brushWidth.DataSource = this.penWidthList;
            this.comboBox_brushWidth.SelectedIndex = 1;
        }

        private void button_color_Click(object sender, EventArgs e)
        {
            try
            {
                this.colorDialog1.Color = this.currentColor;
                DialogResult result = this.colorDialog1.ShowDialog();
                if (result == DialogResult.OK)
                {
                    this.currentColor = this.colorDialog1.Color;
                    this.handwritingPanel1.PenColor = this.currentColor;   //设置画笔颜色
                }
            }
            catch (Exception ee)
            {
                MessageBox.Show(ee.Message);
            }
        }

        //设置画笔宽度
        private void comboBox_brushWidth_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (this.comboBox_brushWidth.SelectedIndex > 0)
            {
                this.handwritingPanel1.PenWidth = this.penWidthList[this.comboBox_brushWidth.SelectedIndex];
            }
            else
            {
                this.handwritingPanel1.PenWidth = this.penWidthList[0];
            }
        }

        private void Button_clear_Click(object sender, EventArgs e)
        {
            this.handwritingPanel1.Clear(); //清空手写板
        }

        private void button_Ok_Click(object sender, EventArgs e)
        {
            this.currentImage = this.handwritingPanel1.GetHandWriting(); //获取手写图片
              this.DialogResult = System.Windows.Forms.DialogResult.OK;
        }

        private void Button_cancel_Click(object sender, EventArgs e)
        {
            this.DialogResult = System.Windows.Forms.DialogResult.Cancel;
        }
    }

      其运行效果如下图所示:      

     

      下载demo源码

 

时间: 2024-10-30 13:26:52

实现简单的手写涂鸦板(demo源码)的相关文章

JS简单编号生成器实现方法(附demo源码下载)_javascript技巧

本文实例讲述了JS简单编号生成器实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>编号生成器</title> </head> <body&g

Android编程实现手绘及保存为图片的方法(附demo源码下载)_Android

本文实例讲述了Android编程实现手绘及保存为图片的方法.分享给大家供大家参考,具体如下: 运行效果图预览: 应 yzuo_08 要求做了此Demo,跟以前那个手写板Demo不同的是可以将画布的内容保存为图片. 附上关键代码: MainView.java package com.tszy.views; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; impor

Android编程动态加载布局实例详解【附demo源码】_Android

本文实例讲述了Android编程动态加载布局的方法.分享给大家供大家参考,具体如下: 由于前段时间项目需要,需要在一个页面上加载根据不同的按钮加载不同的布局页面,当时想到用 tabhot .不过美工提供的界面图完全用不上tabhot ,所以想到了动态加载的方法来解决这一需求.在这里我整理了一下,写了一个 DEMO 希望大家以后少走点弯路. 首先,我们先把界面的框架图画出来,示意图如下: 中间白色部门是一个线性布局文件,我喜欢在画图的时候用不同的颜色将一块布局标示出来,方便查看.布局文件代码如下:

Android仿英语流利说取词放大控件的实现方法(附demo源码下载)_Android

本文实例讲述了Android仿英语流利说取词放大控件的实现方法.分享给大家供大家参考,具体如下: 1 取词放大控件 英语流利说是一款非常帮的口语学习app,在app的修炼页面长按屏幕,会弹出一个放大镜,当手指移到某个单词的附近,可以看到该英文单词会被选中,效果如下图所示: 2 代码示例 该控件挺有意思,于是我写了个简单的demo,完整实例代码点击此处本站下载.,程序运行后的效果如下: 3 实现原理 该控件的实现原理比较简单,下面介绍几个比较重要的类 ① WordView 在实习该控件的过程中,我

Android编程实现可滑动的开关效果(附demo源码下载)_Android

本文实例讲述了Android编程实现可滑动的开关效果.分享给大家供大家参考,具体如下: 闲着没事,把之前写的一个Demo放上来分享下.就是一个开关,实现可滑动和动画效果.不是图片切换. 好了,先上图: 完整实例代码点击此处本站下载. 直接把自定义的这个View代码放上来,有注释应该很好理解: 首先是布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&qu

jQuery模拟实现的select点击选择效果【附demo源码下载】_jquery

本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

实现语音视频录制(demo源码)

      在很多语音视频软件系统中,经常有将实时的音频或视频录制为文件保存到磁盘的需求,比如,视频监控系统中录制监控到的视频.视频会议系统中录制整个会议的过程.语音通话系统中录制完整的对话内容.等等. 一.缘起       最近正在做的一个网络招聘平台的项目,其中有一个模块是这样的,应聘者可以通过该系统的客户端录制自己的视频(自我介绍)上传到服务器,而后,招聘者会在合适的时候浏览这些应聘者的视频.该模块涉及到的主要技术就是语音视频录制技术,它需要把从麦克风采集到的语音数据和从摄像头采集到的视频

Android编程实现TextView垂直自动滚动功能【附demo源码下载】

本文实例讲述了Android编程实现TextView垂直自动滚动功能.分享给大家供大家参考,具体如下: 在做android 应用的开发的时候,横向滚动或者要做出跑马灯的效果很简单,textview本身的属性就支持,只要设置准确就会滚动,开发起来比较简单,但是textview 不支持垂直滚动,那么垂直滚动就需要自己来实现了,很多网友提供的垂直滚 动方案都是千篇一律,使用ScrollView来进行滚动,但是都不完美,做起来有些别扭.有一位网友给出的歌词的滚动思路明确,能从根本上解决问题,因此我实现的

jQuery自定义动画函数实例详解(附demo源码)_jquery

本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d